Facebookでシェアした記事の画像反映ができていない時の修正方法

Facebookで公開後すぐの記事をシェアすると下の画像のようにOGP画像やタイトルがうまく反映されていない事があります(今まであまり経験なかったのですが、最近よく出てくるようになりました)。

今回は、このようにOGP設定がうまく反映されなかった時のデバッグ方法についてです。
スクレイピングが出来ていない場合はシェアデバッガーを使用
スクレイピングが出来ていない(Facebook側がうまく情報を取得出来ていない)場合はFacebookのシェアデバッガーを使用します。
使い方は、フォームにURLを入力して「デバッグ」をクリックします。

前回のスクレイピング結果が表示されるので、「もう一度スクレイピング」ボタンをクリックすると再度情報を取得して、最新のOGP設定に更新されます。

すぐにシェアした投稿を更新する方法
「もう一度スクレイピング」をしてOGP内容を更新しても、投稿に反映されるには時間がかかります。あるいはシェアデバッガーで見ると問題ないのに、シェアした投稿ではOGP画像が反映されていない事もあります。
そんな時はシェアした投稿自体を更新する必要があります。
方法は、まず投稿の詳細ページに行く必要があるので、Facebookの投稿の日時の部分をクリックして詳細ページへ移動します(それ以外の方法で詳細ページへ移動する方法が見つかりませんでした)。

詳細ページ(タイムラインに目的の投稿1つだけが表示されている状態)になったら、右上のメニューアイコンをクリックして「シェアした添付ファイルを更新」をクリックします。

これでOGP設定の更新が出来ます。
Facebookはよく仕様が変わるので今後はどうなるか分かりませんが、「シェアした添付ファイルを更新」というメニューは、詳細ページでないと表示されません。
その上、詳細ページへ行く方法も分かりづらいので、もう少し分かりやすくしてほしいものですね。


さくらのレンタルサーバで.htaccessが原因で500エラーになってしまう場合のチェックリスト
JavaScriptで配列内から特定条件の要素を探す方法
JavaScriptのテンプレートリテラル内で条件分岐を行う方法
ウェブ上でLaTeXで数式をキレイにプレビューするJavaScriptライブラリ「MathJax」
iTerm2を使いこなすために覚えておきたいショートカット集
Vue.jsで値段を表示するときに3桁ごとにカンマを入れる方法
JavaScriptで簡単にCookie操作ができるライブラリ「js-cookie」
iOSシミュレーターを使ってWebサイトを開発者ツールを見ながら実機表示で開発する方法
「epel-release」インストール後にyum installで「Cannot retrieve metalink for repository」と表示される場合の対処法
WordPressのデータを取得できるWP REST APIの使い方
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Google Chromeの別アカウントとのブックマークを同期する「TeamSync Bookmarks」
スクロールしてもテーブルヘッダーが追尾するテーブルの作り方
Path Finderの見た目を最低限整えるための設定
Keyboard Maestroの「Click at Found Image」で画像と一致する場所をクリックするマクロの作り方
Google Chromeでいま開いているページのQRコード生成方法
Macでデュアルディスプレイ時に、通知を表示するディスプレイを指定する方法
Alfred 4のファイル検索機能を使って、ファイルの操作を高速で行う方法
macOS Mojaveのログイン周りの設定まとめ(ゲストユーザのオフ、ログイン時の壁紙変更)
動画の圧縮をFinder右クリックメニューの「選択したビデオファイルをエンコード」から行う
CSS Nite in Kobe, vol.45「Adobe XDの自動アニメーションで作るプロトタイプと 現場で活用できるマイクロインタラクションの作り方」に参加してきました