FacebookのOGPキャッシュをクリアする方法(手動・自動対応)

OGP

Web サイトやブログでメタタグに指定した OGP 設定を Facebook がちゃんと反映してくれないことがありますが、そんなときは Facebook 側で持っている OGP キャッシュをクリアすることで解決することがあります。

というわけで、Facebook の OGP キャッシュを手動、自動でクリアする方法をまとめてみました。

例えばこんなとき・・・

例えば、あるブログ記事にこんなアイキャッチ画像が設定されていて、メタタグの og:image プロパティにも画像 URL が指定済みだとします。

アイキャッチ画像

これを Facebook でブログ記事をシェアしようとしたときに違う画像が出てしまう・・・。

アイキャッチ画像

他にも、メタタグの OGP 設定を変えたけどその変更が反映されないとか、似たような場面はあると思いますが、そんなときにはキャッシュのクリアを試してみましょう。( OGP 設定に誤りがないことが前提ですのでご注意を。)

手動でクリアする方法

手動でクリアするには、Facebook の Debug ページを使います。

まず、こちらの Debugger ページを開きます。

対象となる URL を入力して、「Fetch new scrape information」をクリック。

Facebook

キャッシュがクリアされて、新しく取得されたページの情報がずらーっと表示されたらOKです。

最後の方にシェアされるときの表示イメージも出てるので、ちゃんと変更されたことが確認できると思います。

Facebook

自動でクリアする方法

ページが少なければ、前述の画面から1件1件手動で処理すればいいんですが、

・サイト全体で OGP 設定を変更したので、個別ページのキャッシュを一括でクリアしたい。
・ページの内容を更新したときに自動でキャッシュクリアさせたい

といったことをしようとなると、手動で処理するのは現実的じゃなくなってきますね。

そんなときは 次のように自動でクリアする方法を使ってみます。

Facbook Developers のドキュメントより、次のような API の使い方が書かれています。

When an action is published, or a Like button pointing to the object clicked, Facebook will ‘scrape’ the HTML page of the object and read the meta tags. The object scrape also occurs when:

・The object URL is input in the Object Debugger
・Every 7 days after the first scrape
・When an app triggers a scrape using an API endpoint

This Graph API endpoint is simply a call to:

POST /?id={object-instance-id or object-url}&scrape=true

The response from this endpoint will be a JSON object that contains all the information about the object that was scraped (the same data returned when the Object ID is read from the Graph API).

via:Using Objects

要は Facebook の Graph API に対して、id=【対象ページURL】、scrape=true というパラメータを付けた POST リクエストを送信すればいいということのようです。

例えば、Linux の curl コマンドでリクエストする場合はこんな感じで実行します。

[shell]
$ curl -d scrape=true -d id=【対象ページURL】 https://graph.facebook.com/
[/shell]

リクエストに成功すると、次のように更新されたページ情報を含む JSON がレスポンスとして返ってきます。(実際のJSON は一行で返されますが、改行を入れて見やすく整形しています。)

[javascript]
{
"application": {
"id": "510553392332764",
"name": "rui_live_note",
"url": "https://apps.facebook.com/510553392332764/"
},
"description": "うちの子が通う幼稚園は月一でお弁当の日があって、自分もたまに当番で作ることがあるんですが、子ども…",
"id": "730419340375021",
"image": [
{
"url": "https://blog.ko31.com/wp-content/uploads/20141106_bento.jpg"
}
],
"locale": {
"locale": "ja_jp"
},
"site_name": "rui live note",
"title": "これは子どもが喜ぶ!Twitterに投稿された妖怪ウォッチのキャラ弁を集めてみた",
"type": "article",
"updated_time": "2014-11-09T13:12:30+0000",
"url": "https://blog.ko31.com/201411/yokai-watch-bento/"
}[/javascript]

後は、このコマンドを対象ページ数分だけ繰り返し処理させたり、ページが更新されるタイミングでプログラムからコマンドを呼び出したり、といった仕組みを作ればいいわけです。

参考URL



この記事を書いた人

ko31

岩手県出身、群馬県在住のフリーランスWeb系エンジニアです。
Webシステム・アプリ、Webサービス、WordPress開発等を雑多にこなしています。バンカラ応援好きの振り飛車党。
PHP / WordPress / 高校野球 / 将棋 / WordPress / ブログ / 食べること / 二児の父親

>>もっと詳しいプロフィールはこちら

お仕事のご相談・お問い合わせ

当ブログの管理人は、Gosign(ゴーサイン)という屋号でフリーランス Web エンジニアとして活動しています。
ブログの掲載内容はもちろん、Web サイト制作や Web アプリケーション開発などのご相談・ご質問がありましたら、どうぞお気軽にお問い合わせください!

合わせて読みたい記事