各SNSによってそれぞれ表示されるOGPサムネイル（プレビュー）画像のサイズはまちまちだ。場合によっては必要な画像部分や文字がトリミングで切れてしまうこともある。各SNSに合わせたサイズのOGP画像を用意するのも合理的ではない。では1枚の画像ですべてのSNSに対応できるサイズはないのだろうか。
（2023年11月23日に記事を更新）
【いきなりまとめ】各SNSにオールマイティーなOGP画像のサイズは1200✕630px
いきなりまとめると、SNSにはX（旧Twitter）、Facebook、LinkedIn、LINE、Googleマップなどいろいろあるが、これら全てのSNSに最適なOGPサムネイル画像のサイズ、それは1200✕630px。形式はJPGまたはPNG。OGPサムネイル画像は各SNSごとに何点もアップできるわけではなく、またブログ記事を書くたびに各SNSに合わせリサイズした画像を作るのも面倒である。それを解決するには1200✕630pxのものを1点作りそれだけをアップすればOK。
ただし各SNSで実際に表示されるOGP画像にはアスペクト比（縦横比）がある。詳細は以下で解説するが、1200×630pxの画像をアップした場合SNSによっては、上図のように上下左右がトリミングされるので、見せたい画像や文字がある場合なるべく中央に寄せたほうがいい。
まとめは以上。なぜこのサイズなのか、またそもそも「サムネイル画像って何？」「何言っているのか分からない」という人のために以下詳しく解説する。
OGPのサムネイル画像とは
OGP（Open Graph Protocol）とは何か？
SNSでWEBサイトやブログ記事のURLを貼ると、自動的に画像とその要約が表示されるのを見たことがあるだろう。Xであれば以下のような投稿である。
ブログのURLを貼るだけで、そのサムネイル画像、タイトルと記事の要約が自動的に表示される。
これはOGPが設定してあるため表示されるのであり、もし設定していなければどうなるか。以下のようにURLを投稿しても画像も要約も表示されない。URLそのものが表示されるだけである。
上記2つのX投稿を見て、どちらをクリックしたくなるだろうか？
当然サムネイル画像、タイトルと記事の要約が表示されている方をクリックしたくなる。またサムネイル画像はないよりある方が、大量に投稿が流れるXの中でも目立つ。
これはOGPとは関係ない余談だが、ブログ記事をSNSに投稿する際にその記事のサムネイル画像は、記事に関連があるイメージ画像を使う人が多いが、私の場合は必ず画像の中に文字を入れている。詳しい検証をしたことはないが、ただのイメージ画像だけよりも、文字が入っていた方がSNSを見ている人の目に留まりやすい。YouTubeのサムネイル画像に文字が必須なのは誰にでも分かるだろう。ブログや一般的なWEBサイトのサムネイル画像も同じだ。
OGPの設定
現在Xと呼ばれている旧Twitterだが、meta nameに書く部分に関しては、Twitter時代と変わらず「twitter:」のままで問題ない。
（2023年11月23日追記）
これからOGPの設定方法に入る。一般的なOGPの設定は、通常HTMLの<head>～</head>内に以下のように記述する。
<meta property="og:title" content="音楽特化型デザインサービス double#" />
<meta property="og:type" content="website"/>
<meta property="og:url" content="https://d-sharp.com" />
<meta property="og:image" content="https://d-sharp.com/fb_thum.jpg" />
<meta property="og:site_name" content="音楽専門デザイン・サービス│double#" />
<meta property="og:description" content="伝えたい音楽を的確にビジュアル化できるのは音楽に造詣の深い当サービスだけ。" />
<meta property="fb:app_id" content="12354567890" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:description" content="伝えたい音楽を的確にビジュアル化できるのは音楽に造詣の深い当サービスだけ。" />
<meta name="twitter:title" content="音楽特化型デザインサービス double#" />
<meta name="twitter:site" content="@YonemotoDezain" />
<meta name="twitter:image" content="https://d-sharp.com/tw_thum.jpg" />
<meta name="twitter:creator" content="@YoneｍotoDezain" />本記事はOGP画像のサイズ説明なので、各設定値や記法など詳細は他を参考にしてもらうとして、ここで重要なのは、青部分（Facebook）と赤部分（X）に関する箇所である。
OGPの設定を書かないと、上述画像のようにURLのみ表示される。
では、青と赤の太字部分を書かないまたは誤記するとどうなるか。
サムネイル画像は表示されずWEBサイト名とサイトの説明のみが表示される。当然だが。
WordPressのOGP設定
何のテーマも適用せずインストールしたままの状態であれば、面倒だが<head>～</head>内に上記のように記述するしかない。だが通常インストール後に何かしらのテーマを適用すれば、今どきのテーマなら管理画面にOGPの設定項目がある。もしテーマにOGP設定の項目がない場合、All in One SEOなどのプラグインをインストールすれば設定できる。ブログを書くたびにいちいち<head>～</head>内に記述するのは現実的ではないだろう。
各SNSによるOGP画像のサイズ
OGPサムネイル画像は、適当なサイズで良いわけではない。各SNSで縦横比や最低サイズが決まっている。そしてOGPは自身のブログの投稿などをSNSに投稿するだけではなく、ブログ記事を読んだ人や、WEBサイトを見た第三者が、SNSに投稿することを想定しなければならない。むしろ不特定のそのような人向けにサムネイル画像を設定しなければならない。そのような人たちがSNSでの拡散からSEOに大きく貢献してくれるのだから。
それにはリツイートによる最も拡散力のあるXを筆頭に、次にFacebookを想定すればよいだろう。そしてLinkedIn、LINE、はてなブログも念頭に置いておく。
X（旧Twitter）の画像サイズ
X（旧Twitter）のOGPは、Summary Card（旧Twitterカード）と呼ばれていて、2種類のタイプがある。
これはOGPの項目 twitter:card で設定するため分かりやすい。
2種類共XのOGPサムネイル画像必要要件は以下のようになる（X公式ドキュメント より）。
| 最小サイズ | 144×144px |
| 最大サイズ | 4096×4096px |
| ファイルサイズ | 5MB以下 |
| アスペクト比 | 1.91:1（大）または1：1（小） |
| ファイル形式 | JPG, PNG, WEBP, GIF, GIFアニメは最初のフレームのみ SVGはサポートしていない |
サムネイル画像が大きいSummary Card – summary_large_image
<meta name="twitter:card" content="summary_large_image" />サムネイルが大きく、その下にサイト名、要約、URLが配置されるタイプで通常はこれで良いだろう。
“summary_large_image“と記述する。
サムネイル画像のアスペクト比（縦横比）は1.91：1（≒1200×628px）。
X用のOGP画像の最適なサイズは1200×628pxである。しかし公式推奨サイズは630×1200px。後に詳細を述べるが縦幅に2pxの差があるので、上下各1pxの余裕をもたせれば良い。推奨される最小サイズは、300✕157px（≒1.91：1）以上。
この場合のアスペクト比を2：1と説明しているサイトがあるが、実際に計測してみるとXフィード上でのレンダリングサイズは504×264px（≒1.91×1）である。
ではアスペクト比1.91：1以外の、例えば正方形の画像をアップしたらどうなるか。結果1.91：1に合わせるように上下がトリミングされる。
サムネイル画像が小さいSummary Card – summary
<meta name="twitter:card" content="summary" />サムネイルが小さく左に寄り、右にサイト名、要約、URLが配置されるタイプ。サムネイル画像が小さいのでアピールは控え目となる。
サムネイル画像のアスペクト比は1：1（正方形）。
144✕144px以上の画像サイズを推奨している。
横長の画像をアップした場合どうなるか？ 画像の左右が1：1でトリミングされる。
表示したいサムネイル画像のサイズと縦横比
Xの場合、サムネイル画像の大小はtwitter:cardで設定するのであり、Facebookと違い画像のサイズやアスペクト比で自動的に決まるのでは無いことに注意。
上の2つの例では、共に使用した画像は1200✕628px。画像の解像度や縦横比で決まるのではないことが分かるだろう。
FacebookのOGP画像サイズ
Facebookの場合、Xとは異なりtwitter:cardのような、サムネイルの大きさを指定する項目がないため、アップする画像サイズで自動的に振り分けられる。ここがXとの大きな違いである。
FacebookのOGPサムネイル画像必要要件は以下のようになる（Facebook公式ドキュメント より）。
| 最小サイズ | 200×200px |
| 最大サイズ | ━ |
| ファイルサイズ | 8MB以下 |
| アスペクト比 | 1.91:1（大）または1：1（小） |
| ファイル形式 | JPG, PNG, GIF |
ではその境界線はどこなのか。Facebookの公式ドキュメントでは600x315pxが境界との説明がある。そしてサムネイル画像がアスペクト比1.91:1以外の画像サイズではトリミングされるとある。だが共に公式ドキュメントと実際の表示は異なる。（2023年5月15日現在）。
Facebookの公式ページには記述がないようなので、この記事を書くために1pxずつ画像サイズを変更して、どこでサムネイル画像の大きさが変わるのか実際にピクセル単位で投稿を繰り返し検証してみた。
素材として実際Facebookに表示されるOGP画像としてアスペクト比1.91:1の横長の画像を用意する。この画像のアスペクト比は維持したままピクセルサイズを変更して投稿し、実際のFacebookフィード上でサムネイルの大小が切り替わる点を探す。
異なるサイズのOGPサムネイル画像ファイルを入れ替えるたびに、Facebookのシェアデバッガーにて再度スクレイピングを行いキャッシュをクリアする。シェアデバッガーのプレビュー画像とその下に記載される「rawタグに基づいて、以下のOpen Graphプロパティが構築されました」の「og:image」の項目で画像ファイル名が更新されていることを確認しながら検証する。
検証結果は、
- 424px以上であればサムネイル大
- 423px以下であればサムネイル小
だった。公式ドキュメントとの間に大きな差がある。
【2023年5月追記】あらためてサムネイルのサイズ切り替え点を検証した結果、Facebookのシェアデバッガーでは、446pxと445pxの間でサムネイルの大きさが切り替わる。だが実際投稿してみると上述のような結果になった。当然実際の投稿の結果に従うべきである。
サムネイル画像が大きいタイプ 画像の長辺が424px以上
長辺（横幅）のピクセル数が424px以上であれば、大きいサムネイルの下に、URL、サイト名、要約が配置される。
アスペクト比はTwitterと同じ1.91：1。
画像サイズは1200✕630px以上を推奨。
最低画像サイズは600✕315pxだが、画像の品質は別として上述のように424px以上であれば大きなサムネイル画像として正常に表示される。
実際に計測してみると、フィードに表示されたレンダリングサイズは615×321px（≒1.91:1）。計算するとXよりも微妙に横長だが無視してよい程度。
ではアスペクト比1.91：1以外の例えば424px以上で1：1の画像をアップするとどうなるか。
大きなサムネイル画像で表示されるサイズ446✕446pxの画像をアップした結果は上のようになる。アスペクト比1.91：1で上下がトリミングされる。これは避けなければならない。
サムネイル画像が小さいタイプ 画像の長辺が423px以下
長辺（横幅）が423px以下の画像をアップすると小さなサムネイル画像を左に、URL、サイト名、要約を右に配置した表示となる。
アスペクト比は1：1。
1：1でない横長または縦長の画像をアップした場合、左右または上下がトリミングされ正方形となる。
使用する画像のサイズとアスペクト比
意図的に小さなサムネイル画像のタイプを選択するのでなければ、大きなサムネイル画像のタイプで表示すれば問題ないだろう。むしろXと同様に大きなタイプを選択した方がいい。
LinkedInのOGP画像サイズ
試しに200✕200pxの画像をアップした結果、上下がトリミングされた大きなサムネイルの状態で表示された。LinkedInの場合、小さなサムネイルの表示は存在しないようである。
アスペクト比は1.91：1。
1200✕627px以上を推奨。
XやFacebookと同じアスペクト比なので、同じサイズ1200×630pxで問題ない。
Googleビジネス プロフィール（Googleマップ）
「最新情報」にブログ記事をアップする人もいるだろう。正確に言えばGoogleの場合は、URLを記述しても自動でOGPサムネイル画像は表示されない。別に手動で画像をアップするのだが、私の場合他のSNS用に作成したOGPサムネイル画像をそのまま使用している。
Googleビジネス プロフィールのOGPサムネイル画像必要要件は以下のようになる（Googleビジネスプロフィール公式ドキュメント より）。
| 最小サイズ | 250×250px |
| 推奨サイズ | 720×720px |
| ファイルサイズ | 10KB～5MB |
| アスペクト比 | 1：1 |
| ファイル形式 | JPG, PNG |
しかし実際に表示されるOGP画像サイズは表示される場所によって異なるため注意しないといけない。
各箇所でのOGPサムネイル画像の実際に表示されるレンダリングサイズは以下のとおり。
- Google検索のナレッジパネルでの表示━━255×143px（≒1.78:1）
- Googleマップ検索のナレッジパネルでの表示━━390×293px（≒1.33：1）
- 「最新情報」フィードでの表示━━407×305px（≒1.33:1）
推奨サイズ720×720pxの画像をアップした場合、Googleマップと「最新情報」フィードでは1.33:1のアスペクト比に合わせ上下がトリミングされることに注意。これらでの表示サイズは720×541pxとなる。
LINEのOGP画像サイズ
少し前までLINEのOGPサムネイル画像は1：1の正方形の小さなタイプだったのだが、2023年5月現在は上の画像のようにXやFacebookの1.91：1よりもやや横幅が短いアスペクト比である1.78：1となることに注意。XやFacebookのサムネイル画像の左右が少しトリミングされるイメージである。
はてなブックマークのOGP画像サイズ
私ははてなに投稿されることを想定していないので詳細な検証はしていない。
最適サイズ：1200✕840px
これはX、Facebookの推奨サイズ1200✕630pxよりも縦が長いので、1200✕630pxの画像をアップした場合左右がトリミングされる。
【まとめ】画像ファイルをSNS共通の1枚で済ます
ここまで各SNSのアスペクト比と仕様を説明してきた。結果冒頭で述べたようにサイズ：1200✕630px、形式：JPGまたはPNGでOGPサムネイル画像を作成しアップすれば問題ない。ただし表示されるアスペクト比が異なるので、上図のように表示される範囲に注意する。私の場合は、X、Facebook、LinkedIn、Googleビジネスプロフィールの「最新情報」、LINEに表示されることを想定しているので、JPG形式で1200✕630pxの画像を作成し見せたい部分や文字をGoogleの範囲に配置するようにしている。上図はそれに沿っている例だ。Googleでの表示を想定しないのであれば、LINEの範囲で必要な要素を配置すればよい。
OGP画像のシュミレートと更新
ブログを投稿する前、WEBサイトを更新した後などOGP画像がSNSにどのように表示されるのかを確認する際一括でシュミレートできるサービスがある。
OGP画像シュミレーター
https://ogimage.tsmallfield.com/
各SNSでの表示を一括でシュミレートできるので便利だが、私の場合画像以外にもタイトルや要約を確認するため各SNSが用意している以下のサービスを利用している。
投稿後サムネイル画像の変更を正確に反映させたい場合
投稿をした後、サムネイル画像を変更してもキャッシュの関係ですぐには修正が反映されない場合がある。すぐに反映させたい場合、各SNSが提供しているサービスにある Preview Card（Twitter）、デバッグ（Facebook）、Inspect（LinkedIn）ボタンを何度か押せばキャッシュがクリアされて変更が反映される。
●X(旧Twitter） — Card validatorhttps://cards-dev.twitter.com/validator
X(旧Twitter）はCard validatorを廃止した。理由は「投稿文内にURLがあれば、投稿する前にOGP画像のプレビューも表示されるから」とのこと。
●Facebook — シェアデバッガー
https://developers.facebook.com/tools/debug/
●LinkedIn — Post Inspector
https://www.linkedin.com/post-inspector/
●LINE — Page Poker
https://poker.line.naver.jp/
(以前の正方形プレビューが表示される。アップデートされていないのかも。2023年5月15日記）
