初代編集長ブログ―安田英久

FacebookでシェアしたときのOGP画像、大きな表示で出てますか？

Facebookで自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法

今日は、Facebookの話題を。自社サイトの記事がシェアされたときに、大きな画像で表示されるようにする方法を解説します。ポイントはog:image画像のサイズです。

Facebookでシェアされたときの画像表示には2パターンある

Facebookでページがシェアされたときに表示される内容を指定する、OGP（Open Graph Protocol）は、当然、ページのHTMLで指定していますよね？さすがに、イマドキOGPを指定していないページは非常に少ないと思います。

でも、og:imageで指定する画像がFacebookで表示されるパターンは2種類あることをご存じですか？記事タイトルの上に画像が大きく出るスタイルと、記事タイトルの左に画像が小さく出るスタイルがあるんです。

記事タイトルの上に画像が大きく出るスタイル

記事タイトルの左に画像が小さく出るスタイル

どちらのほうが目立つか……そりゃ、画像が大きく出るほうがいいですよ。

では、画像が大きく出るスタイルで表示されるには、どうすればいいのでしょうか。ポイントは、og:imageで指定する画像の縦横サイズです。

Facebookの公式情報では、次のように書かれています。

高解像度のデバイスで画像をよく表示するには、1200ピクセル×630ピクセル以上のサイズの画像を使ってください。現状では、600ピクセル×315ピクセル以上の大さの画像使う必要があります。

シェア用のベストプラクティス（Webサイト＆モバイルアプリ）：良いプレビューのために画像を最適化する（Facebook Developers）
https://developers.facebook.com/docs/sharing/best-practices#images

横600ピクセル×高さ315ピクセル以上の画像でないと、大きく表示されるスタイルにはならないということですね（「高解像度のデバイス」というのはRetina採用のiPhoneなどを指していると思われます）。

つまり、og:imageで指定する画像を大きなものにすれば、Facebookでシェアされたときの画像が大きく表示されるようになるということですね。

Web担でも以前にOGPの画像サイズルールに関して解説したことがありますが、そのときは「画像が小さすぎるとプレビューアイコンとして使われない」と説明していただけでした。今はプレビューの表示スタイルに影響しているんですね。

Facebookは「600ピクセル×315ピクセル」と言っていますが、編集部でテストしたところ、現状では、横幅が398ピクセル、高さが209ピクセル以上であれば大きく表示されるようでした。

大きく表示される
- 398×209以上
  - 398×300
  - 400×300
  - 600×300
  - 398×398
  - 400×400
  - 1500×209
  - など

小さく表示される
- 300×300
- 397×300
- 350×350
- 397×398
- 398×208
- 400×200
- 1500×200
- など

といっても、これもすぐFacebook側での処理が変わる可能性があるので、今後のことを考えると1200×630というサイズにしておくのがいいですね。

ちなみに、小さい表示のときは正方形の画像でも大丈夫ですが、大きい表示のときは、縦横比が1.91:1となるとのことで、画像もその縦横比に近くすることを、Facebookで推奨しています。

画像が大きく表示されるスタイルはここ最近（といってもけっこう前ですが）に追加されたものなので、昔からOGPに対応しているサイトでは、画像が小さく出るスタイルのままになっていることが多いようです。

昔はOGP画像の最小サイズが200ピクセル×200ピクセルということだったので、それに準じているサイトが多いかもしれませんが、今のFacebookでの表示をより良い形にするには、OGP用の画像を別途用意するようにするのがいいでしょう。

でも、わざわざOGP用に大きな画像を作るのも大変ですし、そのURLをCMSに登録できるようにするのも……大変ですよね。

Web担では、通常のサイト内で使うアイコン画像を、サーバー側で自動処理して、OGP用の画像を生成するようにしています。具体的には、次のような処理を行っています（実際にはなぜかWeb担では940×492のサイズにしていますが）。

だいたいのCMSには、元画像にこうした処理を加えて別バージョンの画像を作る仕組みが備わっていると思いますので、その機能を使うのがいいでしょう。

まぁ、それなりに重い処理になりますし、Facebookのクローラが画像を認識していない状態でシェアされると画像なしになってしまいますので、OGP画像に関しては次のような処理をオススメします。

CMSへの記事の保存時に、次の2つのアクションを実行する
1. OGP用の大きな画像の自動生成を行う
2. 次のどちらかを自動実行する
  - 管理画面上でURL Debuggerにアクセスした結果の画面を自動表示する（管理画面にアクセスしている人がログインしているFacebookアカウントでDebuggerを実行
  - OGPのAPIで「scrape=true」を付けてクロールさせることで、Facebookのクローラに画像を読み込ませる（特にFacebookアカウントは必要なし）

ちょっと難しい話題ですが、OGPの画像に悩んでいる方は、技術がわかる人に上記の説明をしたら、わかってもらえると思います。