ブログを書いて慌ててfacebookにシェアした経験は誰しもあると思います。困るのが、タイトル間違いや、醜いアイキャッチ写真で投稿されてしまうことですね。
あわててブログを修正して再度、facebookにシェアしても修正が反映されないんですよね。
そんな、やらかした〜な内容を修正する方法を書いてみます。
ogpの基本的な設定は、把握している前提で書いています。
facebookのシェアに修正が反映されない原因
これは、facebookが表示効率を上げるためにシェアされたURLをキャッシュとして保存しているからです。
毎日、世界規模で11億人以上が利用、投稿数となるととんでもない数になってしまいますね。
投稿された記事に対して、さらにシェアされるわけですから、システムへの負荷を軽減する処置として仕方ありません。
facebookのキャッシュを書き換える方法
以前から方法はありましたが、英語表記だったり、わかりにくかったりしていたページが、日本語表示になって使い易くなっていましたので、改めて紹介しておきます。
Open Graphオブジェクトデバッガー
( https://developers.facebook.com/tools/debug/og/object/ )
ビフォーアフターがわかるように、修正前と修正後を表示して比較確認しましょう。
まずは、現在の表示を確認します
ページの一番下に現在のキャッシュ内容が表示されています。
ブログを修正した後に『新しいスクレイピング情報を取得』してみる
無事に反映されました
Facebookシェアに最適な画像サイズ
画像に関しては、そもそもfacebookシェアに適したサイズを使う事が良いわけです。
facebookが推奨するサイズ
縦630px横1200px
最低でも
縦315px横600px
これは、デスクトップやモバイルに問わず画像表示サイズが縦：横の1:1.91と決まっているからです。
画像の最大サイズは、８MBです。
詳細は、デベロッパーズサイトで確認ください。
参考までにtwitterでの修正方法
Card Validator | Twitter Developers
ブログを修正後にこちらのサイトでURLを入れてプレビューカードをクリックしたらOKです。
まとめ
Open Graphオブジェクトデバッガーを使って、タイトルや画像のキャッシュを修正する方法を見てきました。
ついつい、やってしまった時の為に修正方法があることを知っていたら安心です。
しかし、そもそも修正しないでよい最適な画像サイズを使う習慣をつけていれば問題自体が起きませんね。
私自身は、常に画像サイズを測ってはいません。トップ表示させる画像を横長の画像を使うようには気をつけている程度です。ご参考になれば幸いです。
