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

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

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

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

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

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

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


SourceTreeの外部Diff / MergeツールをKaleidoscopeに設定する
MacVim-Kaoriyaのインストール方法
Neovimを使い始める最初の一歩として便利な「LazyVim」
WordPressって何なの?これからWordPressを勉強したい人がとりあえず知っておきたい事
Visual Studio Codeで開始タグを修正すると自動で閉じタグも修正してくれる拡張機能「Auto Rename Tag」
CSSやJavaScriptでスクロールバーの横幅を取得する方法
既存プロジェクトにCompassが導入されている場合に備えて、最低限Sassのコンパイルだけでも行えるようにしておく
Visual Studio Codeで複数ファイルを編集するときにタブやペインの操作方法
SVGを操作するためのCSSプロパティまとめ
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
Figmaのフレームを一瞬で整列するプラグイン「LilGrid」
Path FinderとFinderのリスト表示時の「新規フォルダ作成」の挙動違い
ファビコンや各種アイコンの作成と設定方法
Path Finder 8の一括名称変更で使える設定サンプルまとめ
pointer-eventsプロパティでクリックイベントを無効化にする|気になるCSSプロパティ
自分の管理下にないどうしようもできないログイン情報は1Passwordの「脆弱なパスワード」を無視しておく
Macでリッチテキストをコピペしたときに、余計なスタイルが入ってしまうのを回避する方法
Spreadsheetで改行をする方法|スマホアプリでの改行方法や演算内を改行して表示させる方法
ATOKの「連想変換」で似た意味の別表現に変換して自分の文章に磨きをかける
ブック.appのライブラリに表示されている読み終わった書籍を非表示にする方法