Simple Life Navi

日常のちょっとした気づき、体験などを掲載します

- トップもご覧ください - 検索画面では「シンプルライフナビ」と検索ください -

🍀 Pop Categories 🍀

Blog

Mobile

Gadget

Travel

🌱  New Articles  🌱

Twitterでツイートしたブログ記事紹介のサムネイル画像を変更する方法

ブログの記事をツイートした時に、次のようなことを経験したことはありませんか?

  • Twitterでのブログ紹介のサムネイル画像が、最初にツイートしたときの画像から変えられなくて困っている
  • ブログ記事を書き換えてアイキャッチ画像を差し替えしたのに、古い画像がそのまま表示されてしまう

この記事ではTwitterカードのサムネイル画像を変更、更新する方法をご紹介します。

ツイートの画像は後から変更できるんですよ!

 

ブログの記事のアイキャッチ画像とツイッターに表示される画像の関係

こちらの記事をサンプルにして画像の取り扱いを確認してみましょう。

MNP一括1円iPhone復活は契約乗り換えタイミングの好機!総務省の政策がスマホの機種変更や通信料金に与えた影響 - Simple Life Navi

 

この記事では最初の投稿時、下の画像をアイキャッチ画像として指定していました。

アイキャッチ画像

 

この状態で記事をツイートすると、最初にアイキャッチ画像として指定した画像(右側のサムネイル画像)がツイートした時のサムネイル画像として使われます。

 

記事のアイキャッチ画像としてはよくても、ツイッターで紹介するならもうちょっとインパクトがある画像のほうがいいかも、という場合があります。

ツイッターに表示させている画像を任意のものに(あとから)変更することはできないのでしょうか?

 

ツイッターに表示させるブログ記事の画像は、あとから変えることができる

上のサンプル記事だと「一括1円」がパッとみてわかる画像の方がツイッター向けにはよさそうですよね。

あることをすると、(ツイート済みの)ツイッターのブログ記事紹介のサムネイル画像を変えることができました!
こんな感じになります↓

 

ツイッターに表示させるブログ記事のサムネイル画像を変える方法

どんな手順で画像を変更することができるのかを、解説します。

ブログの記事のアイキャッチ画像の変更と、Twitter社のCard validatorを利用することで任意の画像に変更できます。

では詳しくみてみましょう。

 

1.はてなブログの記事編集画面で、ツイッターで表示させたい画像をアイキャッチ画像に指定する

ツイッターのサムネイル画像として表示させたい画像を選びます。

サンプル記事では(最初は)この画像をアイキャッチ画像として指定していました。

アイキャッチ画像

 

これを、アイキャッチ画像を他の画像にして、記事を更新してください。

アイキャッチ画像の変更



2.ツイッターの「Card validator」で画像を更新する。

続いて、ツイッター社の「Card validator」というサイトにアクセス(下のボタンからアクセスできます)し、次の操作を行ってください。

  • 指定の場所に「記事のURL」を入力してください
  • 「Preview card」をクリックしてください

Card validator

ツイッターにログインしていない場合はログイン画面がでます。その場合はログインしてからCard validatorにアクセスしてください。

Preview cardをクリックすると、URLに紐づける画像(変更後の画像)が表示されます。

 

ツイッターのサムネイル画像が変更できなかった理由とCard validatorで変更できる理由

ツイッターの画像は、最初にツイートした時に、記事のURLと画像が紐付けされてツイッター社のサーバーに記録されるようです。

そのため、ブログ記事のアイキャッチ画像を変えただけだと、ツイッター社のサーバーに記録されている画像は変更されないため、最初の画像が表示され続けてしまいます。

 

Card validatorを使って画像を更新するのがポイントです。

この記事の方法で、ツイッター社のCard validatorで「URLにリンクしている画像」が書き換えられるので、画像を更新することができます。

この方法でツイッターカードのサムネイル画像を、任意の画像に更新・変更できるようになります。
キャッチーな画像を設定するとTwitterからブログ記事へのアクセスが増えるかもしれないので試してみてくださいね。