TwitterやFacebookのカード情報を更新する

この記事はSNSに関する個人的な技術メモですが、Wordpressのブログを運用している人の役に立つ情報になると思うので、ブログに掲載します。

TwitterやFacebookのカード表示

ブログ記事をTwitterやFacebookにも投稿する場合、そのまま同じ記事を書きこむ場合と、URLを送信して、カード表示させる方法がありますが、手間が掛からないので、カード表示させるのが一般的になっています。

カード表示の場合こう表示されます。

Twitterカード:

Facebookカード:

ブログを更新しても、カード表示は古いまま

記事を作成した時にカードが生成される仕組みなので、作成後にブログのタイトルや記事・アイキャッチ画像を更新しても、TwitterやFacebookカード表示は古いキャッシュデータをそのまま保持するので、TwitterやFacebookで見ている人には更新が伝わりません。

ならば、手動でTwitterやFacebookでURLを再度書きこんでも、キャッシュデータがそのままなので、やはり更新されません。

更新するには、TwitterやFacebookのデベロッパーページにあるツールを使います。デベロッパーページに入るには、それぞれのアカウントでログインする必要があります。

Twitterのカード情報を更新する方法

デベロッパーページに、Card validator(https://cards-dev.twitter.com/validator)というページがあるので、そちらに移動して、

Card URLの下にあるボックスに該当記事のURLを入力して、[Preview card]ボタンをクリックすると、

自動でカード情報が更新されます。通常は1クリックで済むのですが、クリックしても更新されない場合は、もう一度クリックすれば解決します。
2クリックでも解決しないと言う場面は画面下のLog情報を解析する必要があります。

Facebookのカード情報を更新する方法

デベロッパーツールに、シェアデバッガー(https://developers.facebook.com/tools/debug/sharing/)というページがあるので、そちらに移動して、

シェアデバッガーの下にあるボックスに該当記事のURLを入力して、[デバッグ]ボタンをクリックすると、現在のカード情報が表示されます。

スクレイピングの実行時間欄を見ると、いつキャッシュされたのかがわかります。
※キャッシュすることを、facebookではスクレイピング(scraping)と呼んいる

前回のURLスクレイピングの日時と方法
スクレイピングの実行時間 約1時間前 [もう一度スクレイピング]
レスポンスコード 206

ここで、[もう一度スクレイピング]ボタンをクリックすると、最新の情報をキャッシュするので、ブログのタイトルや記事、アイキャッチ画像が更新されます。
まれに更新されないことがありますが、再度ボタンクリックすると更新されます。

ただし、facebookの場合は、タイムライン上で見ても更新されなかったりするケースがあるので、記事を更新する必要がある時もありますが、なぜ挙動が異なるのかは、良く判りません。
挙動にばらつきがあるのは、facebookの内部構造が原因のようです。予想できない挙動をするあたり、facebookらしさが現れてますね(笑)

補足:
現在のカード情報で、

修正が必要な問題
Missing Properties The following required properties are missing: fb:app_id

というメッセージが出てくることがあります。
fb:app_idというのは、アプリ開発者IDのことであり必須ではないので、基本的には無視して構いません。以下の記事が参考になります。

海外在住フリーランスのウェブ制作の豆知識
FacebookのOGP設定の「Admin ID」は必須ではない!
http://blog.cloud9works.net/sns/facebook-ogp-admin-id/

取得方法については、以下のブログが参考になります。どうしても気になる場合、アプリ開発者登録してIDをで取得して、テーマ:Sinmplicityの場合は、SNS項目に設定しておけばワーニングメッセージは出なくなります。取得方法については、以下の記事が参考になります。

Six Apart ブログ
Facebookインサイト設定の落とし穴、app_id, admins の違いとは
https://blog.sixapart.jp/2012-04/fb-app-id.html


ブラウザのキャッシュデータを削除する

上記の処理を行ってTwitterやFacebookをブラウザで確認すると、デベロッパーページでは更新されているのに、ブラウザでは更新されていないことがあります。

これは、ブラウザが持っているキャッシュデータ(閲覧履歴データ)が残っているのが原因なので、ブラウザのキャッシュを削除してから確認することが必要です。

再投稿してみる

ここまで行っても、まだ更新しないことがあります。ネットワーク上のどこかのキャッシュが残っているみたいなので、この場合は更新されない投稿を削除して、同じ投稿を再投稿してみると更新されます。

参考サイト

寝ログ
1度登録したTwitterカード情報(タイトル、アイキャッチなど)を変更する方法
https://nelog.jp/how-to-use-twitter-card-validator

てく2テック
Facebookのシェア画面を更新したい時、キャッシュの削除を。Twitterは・・・
https://tek2tech.com/how-to-renew-your-facebook-shared-content/