blog

前からやりたかった奴が出来るようになりました。ちゃんとしたメディアでよく実装されているやつです。ちゃんとしたメディアでよく実装されている奴を自分のサイトに実装すると、あたかも自分のサイトがちゃんとしているように見えます。

広告 (SPONSORED LINK)

 

ページによってOGP画像を変えています。

 

参考にさせていただいたのはこちらの記事です。
プラグイン不要でTwitterカードをコピペでサクッと設置する方法|WordPressカスタマイズ

 

で、Twitter上に表示されるOGP画像の正確なアスペクト比が実はよく分かりません……。

Twitterカードに使用しているのは<meta name="twitter:card" content="summary_large_image">で、画像はFacebookが推奨しているW1200×H630pxを用意しました。
画像の縦横比が summary_large_image の縦横比と著しく異なる場合、画像は枠内を覆うサイズに拡大され、拡大によりはみ出した部分は切り取られます。(backgroud-size: cover; のような処理)

 

Twitterカードに表示される縦横比について、こちらを参考にしました。
SNSへのリンクの投稿時に、表示される画像のちょうどいいサイズ設定 | あぱーブログ

検証結果を見ると、 W1200×H630pxで、W630×H630pxにトリミングしても見栄えが保てる画像 が良いらしいということでした。

この記事で検証してみた

Card validatorでの検証結果

上下方向に若干切り取られます。ディベロッパーツールで見たら W438×H220px でした。

OGP画像シミュレータによる検証結果
OGP画像シミュレータ | og:image Simulator

Facebookだとこんな感じらしい。

Google+ への投稿
Google+ への投稿

(2017.09.16追記)iOS版Twitterアプリでの表示

TL上の表示(iPad縦持ち・横持ち時も同様の結果) ツイートの詳細画面 TL上の表示(Slide Over) TL上の表示(Split View)

iPadで検証。画面幅が広いとき、画像と説明文が横一列に扱われてしまうようです。
こちらではW1200×H630pxのイメージで、縦横ともにトリミングされずちょうど良い大きさで表示されています。

Twitterでの表示

Author : 山川 夜高

libsy 管理人。DTP・webデザインを中心とした文化的何でも屋。
このサイトでは自作品(小説・美術作品)の発表と成果物の紹介をしています。blogではDTP等のTIPSを中心に自由研究を掲載しています。
お問合わせは contact からお気軽に。

twitter @mtn_river
広告 (SPONSORED LINK)
広告 (SPONSORED LINK)

PAGE TOP