はてなブログ記事のアイキャッチ画像を変更しましたが、ツイートに反映されません。クライアント側のキャッシュかと思ったら、サーバ側のキャッシュが原因でした。
急ぎ解決したい方へ。下記のURLから「Card URL」にアイキャッチ画像を更新したい記事のURLを入力して「Preview card」を押すだけです。
https://cards-dev.twitter.com/validator/
よしなに設定されるアイキャッチ画像
ことのはじまり。
先日投稿した記事にアイキャッチ画像を設定していなかったため、Twitterではご覧の状態で表示されていました。
見に覚えのないアイキャッチ画像です。仕様を確認してみます。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
アイキャッチ画像には、記事中にある最初の画像が自動で選択されます。
記事中にある埋め込みiTunesのアートワークがアイキャッチ画像として設定されてしまったようですね。*1
グロウアップ・シャイン！のアートワークは素敵なのですが、あまりにも画質が荒いため、アイキャッチ画像を差し替えます。ついでに、その他のOGPの設定もおこないます。
OGPの設定を変更する
Open Graph Protocol（OGP）をざっくり説明すると、SNS上でWebサイトをいい感じに表現するためのプロトコルです。このプロトコルにしたがってhead要素とmeta要素を記述することで、SNS側がWebサイトプレビューなどのコンテンツを生成することができます。詳しくは公式に短くまとまっているので、ココを読めば大丈夫です。
以下は、はてなブログで付与されるOGPの設定値の一例になります。
| OGP設定項目 | デフォルト値 | 設定方法 |
|---|---|---|
| og:title | 記事編集画面の「タイトル」欄 | 編集オプション>高度な設定>og:title（ソーシャルメディア向けタイトル） |
| og:image | 記事中の最初の画像 | 編集オプション>アイキャッチ画像 |
| og:description | 記事本文の冒頭部分 | 編集オプション>記事の概要 |
| og:type | article |
自動生成のため変更不可 |
| og:url | 記事のURL | 自動生成のため変更不可 |
上3つの設定項目は、公式のヘルプより確認した情報です。*2
下2つのog:typeとog:urlは、実際の記事からリバースしただけなので、信頼できる情報ではありません。間違っていたらごめんね。
Twitterでは上3つの設定値を用いて、タイトル・アイキャッチ画像・概要から構成されるカード型のプレビューをツイート上に表示します。これをTwitter Cardsといいます。*3
さて、表の設定方法にしたがってOGPの設定を変更してみましょう。
あれ？変更されていません。
Twitter Cardsのキャッシュ更新する
OGP設定が反映されない問題はあるあるのようで、対処法も公式に記載があります。
アイキャッチ画像（記事のサムネイル） - はてなブログ ヘルプ
- シェアデバッガー - Facebook for Developers
- 記事URLを入力し、「もう一度スクレイピング」をクリックしてください。
- Card Validator | Twitter Developers
- 記事URLを入力し、「Preview card」をクリックしてください。
Card Validatorを利用してみます。
無事に更新できました。
並べてみるとこんな感じ。
一件落着。ですが、想像と異なっていて気になった点がひとつ。問題のあるキャッシュの場所です。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?
Our web crawlers re-index the Card tag information on your page roughly every week.
以下は、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期を見るかしたいですわ。
*1:Twitterモーメントのカバー画像はアイキャッチ画像の候補に表示されていませんでした。基準は不明です。
*2:og:titleについて。「高度な設定」には「title要素（ページのタイトル）」という入力欄も存在しますが、こちらは文字通りtitle要素を上書くため、検索エンジンの検索結果やブラウザのタグなど広範囲に影響が及びます。og:titleを設定したいだけであれば「og:title（ソーシャルメディア向けタイトル）」を変更するだけで十分でしょう。
*3:厳密には、Twitter CardsはOGPとは異なる独自のmeta要素を優先して探索し、存在しない場合にOGPの設定内容を適用する仕組みです。詳細はカードの利用開始 | Docs | Twitter Developer Platformを参照してください。はてなブログでは、設定したOGPと同等の内容が、Twitter独自のmeta要素にも設定されます。
*4:広義の意味で"キャッシュ"という言葉と用いていることに注意してください。
