Facebook シェアで OGP タグを設定しているのに反映されない時の対処法

  • HTML

Facebook のシェアデバッガーを使うことで、シェアされたときにどういった表示になるかを確認することが出来ます。

ですが、OGP を設定しているにも関わらず、OGP タグが読み込まれない(存在しないことになっている)という現象が発生しました。

タグ自体のミスや、画像が表示されない(https://~から始まる絶対パスを指定していないミス)などではなく、「タグが正しいのに表示されない」時の対処法になります。

エラーになる原因

コンテンツが部分的にしか取得されていない

Facebook シェアデバッガーを確認すると、ステータスコードが 206 (partial content) となっています。

このステータスコードは、取得自体は成功していますが「ファイルを部分的にしか GET しませんよ」ということを表しており、取得する範囲を range で指定しています。

この range を確認してみると、どうやらファイルの 40kb 分までしか取得していないようです。

つまりファイルの最初から 40 kb 分までを取得し、その範囲内に OGP タグがなければそのページには OGP タグが無いことになってしまいます。

例えば動的に style タグなどを出力していて、その文字数が多すぎる場合に OGP タグをその style タグの後に出力させていると読み込まれない可能性が出てきます。

解決策

1バイト1文字と考えると、

ソースコードを見てだいたい 40,000 文字以内にOGP タグを入れて 40kb の制限に収まるようにしてみると良いかもしれません。

参考

Facebook debugger : Response 206