この記事は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]ボタンをクリックすると、
自動でカード情報が更新されます。通常は１クリックで済むのですが、クリックしても更新されない場合は、もう一度クリックすれば解決します。
２クリックでも解決しないと言う場面は画面下のLog情報を解析する必要があります。
●Facebookのカード情報を更新する方法
デベロッパーツールに、シェアデバッガー(https://developers.facebook.com/tools/debug/sharing/)というページがあるので、そちらに移動して、
シェアデバッガーの下にあるボックスに該当記事のURLを入力して、[デバッグ]ボタンをクリックすると、現在のカード情報が表示されます。
スクレイピングの実行時間欄を見ると、いつキャッシュされたのかがわかります。
※キャッシュすることを、facebookではスクレイピング(scraping)と呼んいる
| 前回のURLスクレイピングの日時と方法 | |
| スクレイピングの実行時間 | 約１時間前 [もう一度スクレイピング] |
| レスポンスコード | 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/
コメント