ちょっぴり幸せになる

誰かに教えたくなるそんな・・・

Twitter のブログ記事のサムネイルが更新されない場合

自分の記事のTwitterボタンからツイートすることができますが、一度ツイートした後に、はてなブログ側でサムネイル(アイキャッチ)画像を変更した場合、再度ツイートしても、変更内容が反映されないことがあります。

はてなブログの記事をツイートする方法

はてなブログの記事を簡単にツイートする方法は、2種類あります。

  1. 記事投稿・更新後にダッシュボードの画面から『Twitterに投稿』ボタンから投稿する。
  2. 実際の記事の下に配置した、Twitterボタンから投稿する。

サムネイルが更新されない

上の手順の場合、はてなブログでのサムネイルの変更内容は正しく、反映されるのですが、
下の記事内のTwitterボタンを使用する場合のサムネイルは反映されず、以前登録した画像のままとなってしまいます。

流れは以下のとおりです。
① 記事のアイキャッチ画像を指定し、記事を投稿する。
  編集オプションの『アイキャッチ画像』で画像を指定します。

f:id:yamatowwiw:20160615234720p:plain

② 投稿後、画面が遷移するので、『Twtterに投稿』ボタンを押し、『シェア』ボタンを押す。
f:id:yamatowwiw:20160615234721p:plain

③ このように、ツイートすることができます。
f:id:yamatowwiw:20160615234723p:plain:h300

④ 記事自体を表示させ、記事の下に配置した『Twitter』ボタンを押します。
f:id:yamatowwiw:20160615234726p:plain:h300
⑤ このような画面が出力されるので、『ツイート』ボタンを押します。
f:id:yamatowwiw:20160615234725p:plain:h300

ここまでは正常な動きです。
次に、サムネイル画像を変更してみます。

⑥ 編集オプションの『アイキャッチ画像』でアイキャッチ画像とするファイルを変更します。
f:id:yamatowwiw:20160615234722p:plain

⑦ 記事更新後の遷移画面で、先ほどと同様に『Twtterに投稿』ボタンを押し、『シェア』ボタンをします。
  変更したサムネイル画像でのツイートが投稿されました。
f:id:yamatowwiw:20160615234724p:plain:h300

⑧ 記事自体を表示させ、記事の下に配置した『Twitter』ボタンを押します。
  あれれ、変更前の画像のままです。
f:id:yamatowwiw:20160615234725p:plain:h300




変更を正しく反映させる方法

どうも、TwitterCardsの情報が最新化されていないことが原因のようです。
TwitterCardsの情報最新化は以下の手順のとおりです

① TwitterCardsの管理画面 https://cards-dev.twitter.com/validator
にアクセスします。
f:id:yamatowwiw:20160615234727p:plain

② 該当する記事のURLを入力し、『Preview card』を押します。
該当の記事のTwitterCardsが表示されます。
f:id:yamatowwiw:20160615234728p:plain

③ 記事自体を表示させ、記事の下に配置した『Twitter』ボタンを押します。
  最新のサムネイル(アイキャッチ)画像が反映されました。

f:id:yamatowwiw:20160615234729p:plain:h300
f:id:yamatowwiw:20160615234730p:plain:h300

最後に

はてなブログのヘルプページに下記記載がありました。Twitterの仕様のようです。(多分)

※Facebookのようにプレビューのサムネイルをキャッシュするサービスでは、ブログ側でアイキャッチ画像を指定し直しただけでは変更が反映されず、サービスごとの開発者向けツールを利用する必要があることがあります。

詳しい対応方法の記載がありませんでしたので、まとめました。ご参考まで(^▽^)/