HTML

OGP の og:image を設定したのに画像が表示されない時の対処法

はじめに

実務にて、meta タグの property 属性に OGP（Open Graph protocol）の og:image、content 属性に画像の URL を設定したが、Facebook でシェアしたところアイキャッチ画像（サムネイル）が表示されない現象が発生、それを解決した情報になります。

検証環境

解説

よくある原因は、content 属性に相対パスで画像 URL が記述されている場合です。

<meta property="og:image" content="../images/example.jpg" />

画像 URL を絶対パスに修正して、Facebook の シェアデバッガー で表示を確認しましょう。

<meta property="og:image" content="https://xxx/images/example.jpg" />

絶対パスにする理由は、Facebook for Developers の og:urlタグまたはog:imageタグで相対URLを使用したいが、デバッガーでエラーになる。 より、URL はリソースの canonical（カノニカル）な場所を表すものであり、絶対にする必要があると記述があります。

次によくある原因は、OGP の設定が Facebook の要件に合っていない場合です。

Facebook の要件は リンクシェアの画像 に情報があります、よく関係するのは下記の項目です。

  • 画像の最小サイズは 200 x 200 ピクセル
  • 画像ファイルのサイズは 8 MB以下
  • 高解像度デバイスに最適なサイズは 1200 x 630 ピクセル以上
  • 大きな画像を含むリンクページ投稿は 600 x 315 ピクセル以上
  • 新しい画像には新しい URL を使用する

上記の要件に OGP の設定を合わせても解決ができない場合は、リンクのシェアに関するよくある質問 の情報を頼りに解決できる可能性があります。よく関係するのは下記の項目です。

以上です。

おわりに

この辺りは二次情報、三次情報が多く道に迷いやすいので、一次情報から仕様を確認すると良いですね。

参考