今日は、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の画像サイズルールに関して解説したことがありますが、そのときは「画像が小さすぎるとプレビューアイコンとして使われない」と説明していただけでした。今はプレビューの表示スタイルに影響しているんですね。
実際には398ピクセル×209ピクセルあればいい？
Facebookは「600ピクセル×315ピクセル」と言っていますが、編集部でテストしたところ、現状では、横幅が398ピクセル、高さが209ピクセル以上であれば大きく表示されるようでした。
- 大きく表示される
- 398×209以上
- 398×300
- 400×300
- 600×300
- 398×398
- 400×400
- 1500×209
- など
- 398×209以上
- 小さく表示される
- 300×300
- 397×300
- 350×350
- 397×398
- 398×208
- 400×200
- 1500×200
- など
といっても、これもすぐFacebook側での処理が変わる可能性があるので、今後のことを考えると1200×630というサイズにしておくのがいいですね。
ちなみに、小さい表示のときは正方形の画像でも大丈夫ですが、大きい表示のときは、縦横比が1.91:1となるとのことで、画像もその縦横比に近くすることを、Facebookで推奨しています。
昔からOGPに対応しているサイトは要チェック
画像が大きく表示されるスタイルはここ最近（といってもけっこう前ですが）に追加されたものなので、昔からOGPに対応しているサイトでは、画像が小さく出るスタイルのままになっていることが多いようです。
昔はOGP画像の最小サイズが200ピクセル×200ピクセルということだったので、それに準じているサイトが多いかもしれませんが、今のFacebookでの表示をより良い形にするには、OGP用の画像を別途用意するようにするのがいいでしょう。
OGP用画像はCMSで自動生成＆自動クロール処理が楽
でも、わざわざOGP用に大きな画像を作るのも大変ですし、そのURLをCMSに登録できるようにするのも……大変ですよね。
Web担では、通常のサイト内で使うアイコン画像を、サーバー側で自動処理して、OGP用の画像を生成するようにしています。具体的には、次のような処理を行っています（実際にはなぜかWeb担では940×492のサイズにしていますが）。
- 元画像（縦横比が1:1）を、縦横630ピクセル四方に拡大（アップスケール）
- 画像キャンバスとして1200ピクセル×630ピクセルを設定（背景色は白）
だいたいのCMSには、元画像にこうした処理を加えて別バージョンの画像を作る仕組みが備わっていると思いますので、その機能を使うのがいいでしょう。
まぁ、それなりに重い処理になりますし、Facebookのクローラが画像を認識していない状態でシェアされると画像なしになってしまいますので、OGP画像に関しては次のような処理をオススメします。
- CMSへの記事の保存時に、次の2つのアクションを実行する
OGP用の大きな画像の自動生成を行う
次のどちらかを自動実行する
管理画面上でURL Debuggerにアクセスした結果の画面を自動表示する（管理画面にアクセスしている人がログインしているFacebookアカウントでDebuggerを実行
OGPのAPIで「scrape=true」を付けてクロールさせることで、Facebookのクローラに画像を読み込ませる（特にFacebookアカウントは必要なし）
ちょっと難しい話題ですが、OGPの画像に悩んでいる方は、技術がわかる人に上記の説明をしたら、わかってもらえると思います。
※このコンテンツはWebサイト「Web担当者Forum - 企業ホームページとネットマーケティングの実践情報サイト - SEO/SEM アクセス解析 CMS ユーザビリティなど」で公開されている記事のフィードに含まれているものです。
オリジナル記事：FacebookでシェアしたときのOGP画像、大きな表示で出てますか？ | 編集長ブログ―安田英久 | Web担当者Forum
Copyright (C) IMPRESS CORPORATION, an Impress Group company. All rights reserved.
安田 英久（やすだ・ひでひさ）
株式会社インプレスビジネスメディア
Web担当者Forum 編集長
プログラミングやサーバー、データベースなどの技術系翻訳書や雑誌『インターネットマガジン』などの編集や出版営業を経て、現在Webサイト 「Web担当者Forum」編集長。ビジネスにおけるWebサイトの企画・構築・運用と、オンラインマーケティングの2軸をテーマにメディアを展開してい る。
個人としては、技術とマーケティングの融合によるインターネットのビジネス活用の新しい姿と、ブログ/CGM時代におけるメディアのあるべき姿を模 索し続けている。趣味は素人プログラミングと上方落語と南インドカレー。