【2022年】全SNSにオールマイティーなOGP画像サイズ

SNSによってそれぞれ表示されるOGPサムネイル(プレビュー)画像のサイズはまちまちだ。そこで各SNSに1枚の画像で対処できるサイズの作成、また大小サムネールの設定方法を解説する。

OGPサムネイル画像はこれ一枚でOK

(まとめ)各SNSにオールマイティーなOGPサムネイル画像のサイズは1200✕630px

SNSにはTwitter、Facebook、LinkedIn、LINEなどいろいろあるが、これら全てのSNSに最適なOGPサムネイル画像のサイズ、それは1200✕630px。OGPサムネイル画像は各SNSごとに何点もアップできるわけではなく、またブログ記事を書くたびに各SNSに合わせリサイズした画像を作るのも面倒である。それを解決するには1200✕630pxのものを1点作りそれだけをアップすればOK。

この記事で言いたい事は以上なのだが、何故このサイズなのか、またそもそも「サムネイル画像? 何言っているのか分からない」という人のために以下解説する。

OGPのサムネイル画像とは

OGP(Open Graph Protocol)とは何か?
SNSでWEBサイトやブログ記事のURLを貼ると、自動的に画像とその要約が表示されるのを見たことがあるだろう。Twitterであれば以下のような投稿である。

TwitterのOGP表示
TwitterでのOGP表示

ブログのURLを貼るだけで、そのサムネイル画像記事の要約が自動的に表示される。
これはOGPが設定してあるため表示されるのであって、設定しないWEBサイトのURLを貼ってもURLしか表示されない。

OGPを設定していない投稿


2つのTwitter投稿を見て、どちらをクリックしたくなるだろうか?
当然サムネイル画像と記事の要約が表示されている方をクリックしたくなる。またサムネイル画像はないより有った方が、多く流れる様々なTwitter投稿の中でも目立つ。

ブログ記事をSNSに投稿する際に、その記事のサムネイル画像は、記事に関連があるイメージ画像を使う人が多いが、私の場合は必ず画像の中に文字を入れている。詳しい検証をしたことはないが、ただのイメージ画像だけよりも、文字が入っていた方がSNSを見ている人の目に留まりやすい。YouTubeのサムネイル画像に文字が必須なのは誰にでも分かるだろう。ブログや一般的なWEBサイトに関しても同じだ。

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="@YonemotoDezain" />

各設定値や記法など詳細は他を参考にしてもらうとして、ここで重要なのは、(Facebook)と(Twitter)に関する太字部分である。
OGPの設定を書かないと、先述の画像のようにURLのみ表示される。
では、の太字部分を書かないまたは誤記するとどうなるか。

imageの設定をしない場合のTwitterでの表示
image設定をしない場合のTwitterでの表示

サムネール画像が表示されない。当然だが。

WordPressのOGP設定

素のまま、インストールしただけの状態であれば、面倒だが<head>~</head>内に記述するしかない。だが通常インストール後に何かしらのテーマを適用すれば、今どきのテーマにはOGPの項目がある。もしテーマにOGP設定の項目がない場合、All in One SEOなどのプラグインをインストールすれば設定できる。ブログを書くたびにいちいち<head>~</head>内に書くのは現実的ではないだろう。

OGP画像のシュミレートと更新

投稿する前にどのように表示されるのか確認する場合は、さまざまな縦横比、ピクセル数でシュミレートできるWEBサイトがある。

OGP画像シュミレーター
https://ogimage.tsmallfield.com/

各SNSでの表示を一気にシュミレートできるので便利だが、私は各SNSが用意している以下のサービスを利用している。

投稿をした後、サムネイル画像を変更してもキャッシュの関係ですぐには修正が反映されない場合がある。すぐに反映させたい場合、各SNSが提供しているサービスにある Preview Card(Twitter)、デバッグ(Facebook)、Inspect(LinkedIn)ボタンを何度か押せばキャッシュがクリアされて変更が反映される。

●Twitter — Card validator
https://cards-dev.twitter.com/validator

●Facebook — シェアデバッガー
https://developers.facebook.com/tools/debug/

●LinkedIn — Post Inspector
https://www.linkedin.com/post-inspector/

●LINE — Page Poker
https://poker.line.naver.jp/

以降の説明画像は一部を除きこれらサービスでのサムネイル(プレビュー)画像を使用している。

各SNSによるOGP画像のサイズ

OGPサムネイル画像は、適当なサイズで良いわけではない。各SNSで縦横比や最低のサイズが決まっている。そしてOGPは自身のブログの投稿などを自身でSNSに投稿するだけではなく、ブログ記事を読んだ人や、WEBサイトを見た第三者が、SNSに投稿することを想定しなければならない。むしろそのような人向けにサムネイル画像を設定しなければならない。そのような人達がSNSでの拡散からSEOに一役買ってくれるのだから。
最も影響力のあるTwitter、Facebookに投稿されることを想定すればよいだろう。そしてLinkedIn、LINE、はてなブログも念頭に置いておく。

Twitterカードの画像サイズ

TwitterのOGPは、Twitterカードと呼ばれていて、2種類のタイプがある。
これはOGPの項目 twitter:card で設定するため分かりやすい。

サムネール画像が大きいTwitterカード summary_large_image
summary_large_imageを指定した場合
summary_large_imageを指定した場合
<meta name="twitter:card" content="summary_large_image" />

サムネイルが大きく、その下にサイト名、要約、URLが配置されるタイプで通常はこれで良いだろう。
サムネイル画像の縦横比は1:1.91
300✕157px以上の画像サイズを推奨している。

正方形の画像をアップしたらどうなるか。結果1:1.91に合わせるように上下がトリミングされる。

サムネール画像が小さいTwitterカード summary
summaryを指定した場合
summaryを指定した場合
<meta name="twitter:card" content="summary" />

サムネイルが小さく左に寄り、右にサイト名、要約、URLが配置されるタイプ。サムネイル画像が小さいのでアピールは控え目となる。
サムネール画像の縦横比は1:1(正方形)
144✕144px以上の画像サイズを推奨している。

横長の画像をアップした場合どうなるか? 画像の左右が1:1でトリミングされる。

使用する画像のサイズと縦横比

Twitterの場合、サムネイル画像の大小はtwitter:cardで設定するのであり、画像のサイズや縦横比で自動的に決まるのでは無いことに注意。
上の2つの例では、共に使用した画像は1200✕628px。画像の解像度や縦横比で決まるのではないことが分かるだろう。

FacebookのOGP画像サイズ

Facebookの場合、Twitterとは異なりtwitter:cardのような、大きさを設定する項目がないため、アップする画像サイズで自動的に振り分けられる
ではその境界線はどこなのか。多くのWEBサイトでその説明があるが間違えている。あるサイトでは600x315pxが境界との説明があるが誤り(2022年現在)。
この記事を書くために1pxずつ画像サイズを変更して、どこでサムネイル画像の大きさが変わるのか実際にピクセル単位で検証してみた。
結果、境界は446px445pxだった。

サムネール画像が大きいタイプ 446px以上
サムネール画像が大きいタイプ
サムネール画像が大きいタイプ

長辺(横幅)のピクセル数が446px以上であれば、大きいサムネイルの下に、URL、サイト名、要約が配置される。
縦横比はTwitterと同様1:1.91
画像サイズは1200✕630px以上を推奨。
最低画像サイズは600✕315pxだが、画像の品質は別として上述のように446px以上であれば大きなサムネイル画像として正常に表示される。

では1:1.91以外の例えば446px以上で1:1の画像をアップするとどうなるか。

446✕446pxの画像をアップした結果
446✕446pxの画像をアップした結果

大きなサムネール画像で表示されるギリギリの大きさ446✕446pxの画像をアップした結果は上のようになる。1:1.91の比率で上下がトリミングされる。これは避けなければならない。

サムネール画像が小さいタイプ 445px以下
445✕445pxの画像をアップした結果
445✕445pxの画像をアップした結果

長辺(横幅)が445px以下の画像をアップすると小さなサムネイル画像を左に、URL、サイト名、要約を右に配置した表示となる。
縦横比は1:1

1:1でない横長または縦長の画像をアップした場合、左右または上下がトリミングされ正方形となる。

使用する画像のサイズと縦横比

意図的に小さなサムネイル画像のタイプを選択するのでなければ、大きなサムネイル画像のタイプで表示すれば問題ないだろう。むしろ大きなタイプを選択した方がいい。

それ以外のSNSによるOGP画像サイズ

LinkedIn
200✕200pxの画像をアップした結果
200✕200pxの画像をアップした結果

試しに200✕200pxの画像をアップした結果、上下がトリミングされた大きなサムネイルの状態で表示された。LinkedInの場合、小さなサムネイルの表示は存在しないようである。
縦横比は1:1.91
1200✕627px以上を推奨。

LINE
LINEの表示

少し前までLINEのOGPサムネイル画像は1:1の正方形の小さなタイプだったのだが、2022年現在は上の画像のようにTwitterやFacebookの1:1.91よりもやや縦が長い約1:1.78となることに注意。「約」というのは私が測ったためである。TwitterやFacebookのサムネール画像の左右が少しトリミングされるイメージである。

はてなブックマーク

私ははてなに投稿されることを想定していないので詳細な検証はしていない。
最適サイズ:1200✕840px
これはTwitter、Facebookの推奨サイズ1200✕630pxよりも縦が長いので、1200✕630pxの画像をアップした場合左右がトリミングされる。

サムネール画像を各SNS共通の1枚で済ます

TwitterとFacebookのサムネール画像の縦横比は1:1.91。これを横幅1200pxとして当てはめると縦幅628pxとなる。しかし推奨サイズは1200✕630px

作成する画像サイズと実際に表示される範囲
作成する画像サイズと実際に表示される範囲

上下が1pxずつ実際の表示では狭くなるのだが、ほとんど無視して良い範囲だろう。
SNSを通じてのSEOはほぼTwitterとFacebook中心になるので、これらサービスの推奨通り1200✕630pxの画像1枚を作成してアップすれば問題ない

はてなブックマークを考慮するのであれば1200✕840pxの画像を作成して、TwitterとFacebookの表示用に縦628px内に必要な要素は入れておく。
Twitter、Facebookに最適化された1200✕630px(実際に表示される範囲は1200✕628px)の画像をアップした場合は、左右がトリミングされる。

はてなブックマークとTwitter、Facebookの表示範囲
はてなブックマークとTwitter、Facebookの表示範囲

LINEを考慮する場合は1200✕674pxの画像を作成して、TwitterとFacebook表示用に628pxの範囲内に必要な要素を配置する。
Twitter、Facebookに最適化された1200✕630px(実際に表示される範囲は1200✕628px)の画像をアップした場合は、左右がトリミングされる。

LINEとTwitter、Facebookの表示範囲
LINEとTwitter、Facebookの表示範囲



タイトルとURLをコピーしました