マクロビ講師の母ちゃんによるシンプルなくらしとこそだて

Twitterでアイキャッチが表示されない・更新されないときの対応策

Twitterのキャッシュを更新するCard validator


母ちゃん

5児の母ちゃんのたかなです。

先日からTwitter、始めてみました。
たかなのtwitter

早速blogをシェアしてみようと思ったら、Twitterのカードの画像が「かおなしさん」泣

そもそもアイキャッチ画像を設定していない

どこのblogを使っているかや、wordpressによってはテーマごとに多少仕様が違いますが、そもそもアイキャッチ画像を設定してなければ、Twitterでも表示されません

まずはアイキャッチ画像の設定を確認しましょう。

All in one SEO でソーシャル設定をする

わたしはアイキャッチの画像は設定していたのに反映がされていない・・・

なんでだろう?と色々と調べてみたら、All in one SEO のプラグインを入れている場合は、「ソーシャル設定」でも画像の設定が必要とのこと。

そこで、ソーシャル設定で画像を設定してみました!

Twitterのキャッシュを更新して、アイキャッチ画像を表示

が、まだ「かおなしさん」泣

Twitterのキャッシュを更新するCard validator

POINT
わたしは wordpressで sango のテーマを使っているのですが、ただアイキャッチ画像を設定しただけじゃダメでした。

アイキャッチ画像を設定しても更新されない場合

Twitterでは表示を高速化するため、Twitter側のサーバーにキャッシュを保存します。

そのためツイート直後は、アイキャッチ画像が出ずにURLだけが表示されている場合もあります。

しばらくするとTwitterのサーバーにキャッシュされて、アイキャッチ等が正常に表示されます。

なので、今回のわたしのケースは、「先ほどツイートしたアイキャッチ画像の設定がない状態がキャッシュされている」と考えられます。

Twitterのサーバーのキャッシュを更新する

この場合、SNSではそれぞれのキャッシュを更新するのが有効

Twitterのキャッシュを更新する場合は、Card validator を使用します。

参考

Card validator

Card validatorの操作方法は簡単

更新したいURLをコピペして、「Preview card」ボタンを押すだけ。

Twitterのキャッシュを更新するCard validator

すると、サーバーのキャッシュが更新され、新しい情報が反映されるようになります。

正常に更新されると「Card loaded saccessfully」と表示されます。

Twitterのキャッシュを更新するCard validator

アイキャッチ画像が表示されました!

Twitterのキャッシュを更新するCard validator

facebookのキャッシュ更新方法

ついでなので、メモも兼ねてfacebookの更新方法も書いておきます。

facebookの場合は、オブジェクトデバッガーを使用します。

参考

オブジェクトデバッガー

オブジェクトデバッガーの操作方法も簡単

更新したいURLをコピペして、「新しいスクレイピング情報を取得」ボタンを押すだけ。

facebookのキャッシュの更新クリア方法

すると、サーバーのキャッシュが更新され、新しい情報が反映されるようになります。

正常に更新されると、「情報の収集項目にあるレスポンスコードが200」となります。

まとめ

母ちゃん

アイキャッチ画像を設定すると満足してしまいがちですが、SNSでシェアしたい場合はSNSの画像設定まで必要なんですね!

以前の記事も確認せねば〜。

POINT
Twitterやfacebookのキャッシュの有効期限は公表されていません。

ツイート後に記事のタイトルやアイキャッチ画像を変更したときは、Card validator や オブジェクトデバッガーで一旦キャッシュを更新しておくと安心ですよ。

いずれのサイトも、Twitter・facebookの公式です。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします