はてなブログ 記事のアイキャッチ 画像を変更しましたが、ツイートに反映されません。クライアント側のキャッシュかと思ったら、サーバ側のキャッシュが原因でした。
急ぎ解決したい方へ。 下記のURLから「Card URL」にアイキャッチ 画像を更新したい記事のURLを入力して「Preview card」を押すだけです。
https://cards-dev.twitter.com/validator/
ことのはじまり。
先日投稿した記事にアイキャッチ 画像を設定していなかったため、Twitter ではご覧の状態で表示されていました。
OGPの設定変更前
見に覚えのないアイキャッチ 画像です。仕様を確認してみます。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
アイキャッチ 画像には、記事中にある最初の画像が自動で選択されます。
記事中にある埋め込みiTunes のアートワークがアイキャッチ 画像として設定されてしまったようですね。*1
グロウアップ・シャイン！のアートワークは素敵なのですが、あまりにも画質が荒いため、アイキャッチ 画像を差し替えます。ついでに、その他のOGPの設定もおこないます。
OGPの設定を変更する
Open Graph Protocol（OGP）をざっくり説明すると、SNS 上でWebサイトをいい感じに表現するためのプロトコル プロトコル にしたがってhead要素とmeta要素を記述することで、SNS 側がWebサイトプレビューなどのコンテンツを生成することができます。詳しくは公式に短くまとまっているので、ココを読めば大丈夫です。
ogp.me
以下は、はてなブログ で付与されるOGPの設定値の一例になります。
OGP設定項目
デフォルト値
設定方法
og:title
記事編集画面の「タイトル」欄
編集オプション>高度な設定>og:title（ソーシャルメディア 向けタイトル）
og:image
記事中の最初の画像
編集オプション>アイキャッチ 画像
og:description
記事本文の冒頭部分
編集オプション>記事の概要
og:type
article自動生成のため変更不可
og:url
記事のURL
自動生成のため変更不可
上3つの設定項目は、公式のヘルプより確認した情報です。*2
編集オプションの設定とOGP - はてなブログ ヘルプ
下2つのog:typeとog:urlは、実際の記事からリバースしただけなので、信頼できる情報ではありません。間違っていたらごめんね。
Twitter では上3つの設定値を用いて、タイトル・アイキャッチ 画像・概要から構成されるカード型のプレビューをツイート上に表示します。これをTwitter Cards*3
さて、表の設定方法にしたがってOGPの設定を変更してみましょう。
OGPの設定変更後
あれ？変更されていません。
OGP設定が反映されない問題はあるあるのようで、対処法も公式に記載があります。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
Card Validator を利用してみます。
キャッシュの更新
無事に更新できました。
OGPの設定変更後（キャッシュ更新）
並べてみるとこんな感じ。
OGPの設定変更前後の比較
一件落着。ですが、想像と異なっていて気になった点がひとつ。問題のあるキャッシュの場所 です。OGPの設定項目のうち、アイキャッチ 画像に絞ってもう少し深堀りします。
クライアントのキャッシュとサーバーのキャッシュ
クライアント（ブラウザ）のキャッシュが残っているため、更新する前の古いアイキャッチ 画像が表示されているのだろうとはじめは思っていました。
クライアントのキャッシュ？
「キャッシュクリアした？」というWebアプリ開発 の癖ですね。思い込みはよくないです。そもそも、クライアントのキャッシュは、同一リソースへのHTTPリクエス トを対象とします。今回のアイキャッチ 画像の変更では
といったようにリソース名が異なるため、クライアントのキャッシュは利用されません。
実際の原因はサーバー（Twitter ）に存在するキャッシュが更新前のままであることでした。Twitter CardsではURLをクロールし、コンテンツをキャッシュするそうです。*4
カードの利用開始 | Docs | Twitter Developer Platform
なるほどー。問題となるキャッシュはサーバー側なのですね。
サーバーのキャッシュ！
というわけで、はてなブログ 記事のアイキャッチ 画像を更新しても、サーバーのキャッシュは更新されないため、古いアイキャッチ 画像がツイート上に表示されているのでした。
サーバーのキャッシュに反映されないダイワスカーレット ちゃん
サーバーのキャッシュにダイワスカーレット ちゃんを反映する作業が、前章でおこなったCard Validator によるキャッシュの更新です。手動で更新しない場合、約一週間で自動更新されます。
Troubleshooting Cards | Docs | Twitter Developer Platform
I updated my site meta tags, but my Tweet shows the old Card. How do I refresh the Card?
余談
以下は、Twitter からアイキャッチ 画像を取得するHTTPレスポンスヘッダーの一部です。
cache-control: max-age= 604800 , must-revalidate
last-modified: Tue, 04 May 2021 03:57:39 GMT
キャッシュ関連のヘッダーがあるとおり、クライアントのキャッシュも利用しています。
クライアントとサーバーのキャッシュ
ややこしいですね。
余談ここまで
さて、Twitter Cardsの仕様を見てきましたが、CDN やプロキシを考慮していないため、実際とは異なる構成図であると思います。Twitter CardsではURLをクロールし、キャッシュしたコンテンツを配信しているため、オリジナルと差異が発生することがある
おわりに
一部の文章や構成図など、省いた方がまとまりがよくても「せっかく書いたしなあ」と残してしまいました。今年は大胆にプロトタイプを捨てる勇気を身に着けたいです。
それから、いつも冒頭に記事の概要を書いていたのですが、自動生成される「記事の概要（description）」には概要以外の箇所も含まれているため、今回からちゃんと書くようにしようと思いました。
あとは「"ですわ"を連呼するやたら顔のいいウマ娘 」というメジロマックイーン の印象を正しいものにすべく、ゲームで育てるかアニメ2期を見るかしたいですわ。
