Simple Life Navi

シンプルで楽しい暮らしのための、お得な情報ブログ

~ お知らせ ~
『Simple Life Navi』
気になるカテゴリを選べます

ーーー New Post ーーー

X(𝕏) Twitterでブログ記事紹介のサムネイル画像を変更する方法

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

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

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

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

この記事でXに投稿したブログの画像を後から変えたい!という想いを解決します!

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

X(Twitter)とブログ画像の関係を知ってる?

X(Twitter)とブログ画像の関係を知ってる?

さっそくブログ記事を例(サンプル)にして画像の取り扱いを確認してみましょう。はてなブログを例にしていますが、他のブログサービスでも同じようにして変更できます。

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

アイキャッチ画像

 

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

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

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

X(ツイッター)に表示させるブログ記事の画像を変更する方法

X(Twitter)に載せた画像を変更する

X(Twitter)に載せた画像を変更する

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

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

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

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

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

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

アイキャッチ画像

 

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

アイキャッチ画像の変更

これだけではまだ画像が変わらないので、次の手続きをしてください。

2. X(Twitter)の「Card validator」で画像を更新する。

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

Card validator

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

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

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

ここまですれば、新しい画像に切り替わっているはずです。*1

X(Twitter)のサムネイル画像が変更できなかった理由とCard validatorで変更できる理由

Xのサムネ画像変更はCard Valididatorを使えばOK!

Xのサムネ画像変更はCard Valididatorを使えばOK!

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

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

 

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

この記事の方法で、X(𝕏)・Twitter社のCard validatorで「URLにリンクしている画像」が書き換えられるので、画像を更新することができます。

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

*1:画像が変わらないという場合は、利用しているブラウザのキャッシュを削除して更新してください