Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
2
Help us understand the problem. What is going on with this article?
@shibe23

og:imageで指定した画像がFacebookで正しく反映されない時の対処法

More than 1 year has passed since last update.

はじめに

Facebookのシェア機能を実装する際、og:imageで指定した画像をタイムラインに表示させることができます。
この時、新規で画像を差し替えたのに反映されないことがありますが、
それはFacebook側でog:imageに指定した画像をキャッシュしているためです。

og:imageって何?という方はこちら。
og:image 徹底解説、意味も設定画像スペックもこれでばっちり!2015年5月時点最新版

キャッシュを更新する3つの方法

1) 30日間放置する

Facebookのキャッシュは、「最初にFacebookが対象ページの画像をキャッシュしてから30日後」に再度更新を確認するようです。
期間を空けても問題が無い場合は、そのまま放置していても画像は最新のものに更新されます。

2) 公式のdebuggerを使い、手動で更新する

Sharing Debugger

Facebook公式のデバッガーを使うと、対象ページのキャッシュを手動で更新することが出来ます。
基本的にURLを入力して「デバッグ」をクリックするだけですが、
デバッガー自体の動作が安定していないらしく、正しく取得できない場合があります。
その際は「Scrape Again」を押すことで再度画像を取得しに行きます。

3) FacebookのAPIを使い、自動で更新する

動的ページなど、手動では対応しきれない場合、FacebookのAPIにPOSTすると、キャッシュを更新してくれます。
これを使い、ページ読み込み時に自動でキャッシュを更新することができます。

jQuery(document).ready( function() {
    $.ajax({
        url: 'https://graph.facebook.com/?scrape=true&id='+location.href,
        type: 'post',
    }).done(function( data ) {
    // (成功時の処理)
    }).fail(function() {
    // (失敗時の処理)
    });
});

※この方法を使うと、実装したURLに対してfacebook側からアクセスが発生します。
アクセスカウントを取得しているページでは、余分にアクセス数がカウントされてしまうため、使用の際は十分に注意してください

また、アクセスする毎にFacebookのAPIに通信負荷がかかるため、
大量のアクセスが発生する場所では使用を控えてください。

参考

Facebook公式ドキュメント
自動でFBのOGPのキャッシュをクリア
FB自動キャッシュクリア

2
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
shibe23

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
2
Help us understand the problem. What is going on with this article?