〈cocoon〉新しくTwitterカードに設定した画像が表示されない!解決済

昨日まではちゃんと表示されていたのに、新しい画像に変更したら画像が表示されなくなっちゃった!

色々試した結果、意外な方法で解決!

何が原因かで対処法がか変わります。

同じようになってしまって困っている人は、上から順に試してみてください。

Twitterカードの画像が表示されなくなった!

Twitterカードとは?


新しく記事を書いてTwitterで紹介する・Twitter内でシェアするときに

ツイート画面にページURLを入力するだけで

ワードプレス内で設定したアイキャッチ画像、記事タイトルを一つのカードとして表示してくれる機能です。

こんな感じです。

正しく表示されたツイッターカード


URLだけのリンクよりもTwitterカードの方が画像があって目を引くし、記事タイトルも表示してくれるので興味を持ってもらいやすいですよね。

そして、表示されなくなってしまったものがこちら。


記事タイトルは入っていますしリンクもちゃんと貼られていてクリックするとちゃんと記事へ飛ぶことができます。

画像だけが表示できないようです。

だけどせっかく時間をかけて作ったアイキャッチ…どうしても表示したい!

Card validatorでエラーをチェックする


Card validatorでは、カードがTwitter上でどのように表示されるかをチェックできます。

ここで画像が表示されるかどうかによって、問題がTwitterの設定にあるのかブログの設定にあるのかがわかります。

Card validator にログインしてカードのURLの欄に記事のURLを入力します。

Twitter上でどのように表示されるか結果がでます。

①Card validator で画像が表示されているのに Twitter では表示されない場合

ちゃんと画像が表示されています。

①→Twitter側での設定に理由がある

ブラウザからTwitterにログイン

設定➡プライバシーとセキュリティ➡セキュリティグループ

【ツイートする画像・動画をセンシティブな内容を含むものとして設定する】


ここにチェックが入っていると画像が表示されなくなることがあります。

チェックを外しまよう。


Twitterのキャッシュが反映されるまで待つ


ここでキャッシュをクリアしても、実際にTwitter内で反映されるまでにはタイムラグがあります。

1時間から1週間、残念ながらどのくらいかかるかはわからないので気長にまちましょう。

②Card validator で画像が表示されない場合

画像が表示されていません。

②→ブログ側での設定に理由がある


画像は表示されませんが右下の「ログ」を見ると正常にデータは送られているようです。

ということはブログ側の設定に問題があるようです。


ブログ側の設定が原因のときのいくつかの可能性

アクセス拒否をしている

robots.txtで画像ディレクトリのクロールを拒否していると画像が表示できなくなります。

詳細は難しくて省きますが

そもそもrobots.txtなってなに?そんなのいじった覚えないわ。

という人は、おそらくこれが原因の可能性がないのでスルーで大丈夫です。

画像の大きさが規格外

画像サイズが大きすぎるor小さすぎる


小さなカード〈Summary〉の場合 幅120px以上×高さ120px以上

大きなカード〈Summary with Large Image〉の場合 幅280px以上×高さ150px以上

画像が重すぎる


2MB未満の画像を設定しましょう

パソコンのフォルダやワードプレスのライブラリからも画像を選択すれば確認できます。

そもそもアイキャッチで使う画像なので、1M未満の画像を使うのが無難でいいと思います。

Twitterカードタグ挿入を設定していない

ワードプレスのコクーン設定からOGPタブを選択

cocoonのOGP設定とツイッターカード設定

☑OGP設定のOGPタグの挿入

☑Twitterカード設定のTwitterカードタグの挿入


どちらもチェックが入っていること!

☑Twitterカードタイプはどちらでも好きな方を選択

ちゃんと設定しているハズだと思う人も原因を絞り込むためにもう一度確認してみましょう。

プラグインが原因の場合

このようなエラーが起こる原因としてよくあるのが、なんらかのプラグインが干渉してしまっている場合です。

All In One SEO Pack  

Jet Pack  

などのプラグインが 、

使用しているワードプレスの「テーマ」の機能と被ってしまって、結果二重に設定されたTwitterカードの設定が正しく機能しなくなることがあります。

私はテーマにコクーン、プラグインにJet Pack を使用しています。

キャッシュが影響している可能性もあるので、
 

今回は Jet pack の設定からサイトアクセラレーターを有効化のチェックを外しました。

jetpackのサイトアクセラレーター有効化の設定
それでも改善されない場合


Card validator にURLを入力してプレビューカードを選択します

(Twitterカードが実際にTwitter上で表示されるかのチェックと同時にキャッシュ削除ができます)

cardvalidaterでカードプレビュー検証

始めにここでURLを入力しても画像は表示されませんでしたね。

古いアイキャッチ画像と新しいアイキャッチ画像のURLが一緒であるため、同じURLを入力しても古いキャッシュがクリアされなかったからです。

なので、以下のようにURLの後ろに?と適当な数字をつけて入力します。

<meta name=”twitter:image:src” content=”http://xxxx.com/eyecatch.jpg?741852963″/>


これで画像が表示されるはずです。

そしてTwitterでキャッシュが反映されるのをしばらくの間待ちます。

1時間か1週間かはわかりません。気長に待つしかありません。

今回の一連の確認は、今後同じ現象が起きた時にまず確認するデフォルトのポイントだと思います。


Twitterカードの新しい画像が表示されなくなった原因

アイキャッチ画像を新しい画像に変更したら表示されなくなった

☑今まではTwitterカードのアイキャッチ画像は表示されていた。

☑画像を変更していないTwitterカードの画像はちゃんと表示される。

☑新しい画像に差し替えてから、古い画像は削除した。


Twitterカードの新しい画像を表示させる方法まとめ

STEP1. ワードプレスのライブラリ内で古い画像を消去したらもちろんTwitterカードに設定していた画像は表示できなくなる

STEP2. 新しいカードを設定したという情報がTwitterもしくはクローラーに伝わっていない

STEP3. 新しい情報を伝えるには古い情報をキャッシュして送りなおす必要がある

画像を変更したという情報が伝わっていないまま前に設定してあった画像を消去したので

Twitterからすれば「探したけど(前の)画像ないから表示できないよ~」

と画像が存在しない状況になってしまっていただけだったんですね。

それでも表示されない、反映されるまで待てないときの代用処置

私もそうだったんですが、それでも表示されない画像が一つだけありました。

それに、Twitterのキャッシュが反映されるまで待てない。早く更新したい!

という方のために、代用処置にはなりますがすぐに新しい画像を反映させる方法を紹介します。


キャッシュ反映まで待てない!すぐに新しい画像を表示させる方法

ワードプレスから画像が表示されない記事の編集画面

文書タブを開きます

「アイキャッチ画像を設定」のところにTwitterカードに表示させたい画像が選択済みなことを確認します。

cocoonアイキャッチ画像設定

そして問題は最下部のこの部分!

cocoonのsns画像設定

SNS画像

“FacebookやTwitterなど、SNSでシェアする画像を設定します。未設定の場合はアイキャッチが利用されます。”

本来であれば、ココに画像を設定しなくとも

「アイキャッチ画像」を選択しておけばTwitter・Facebookにはその画像が表示されます。

なのでいつもここには画像の設定はしません。

アイキャッチ画像とTwitter・Facebookのカード画像を同じものにしているひとがほとんどだと思います。

ならば元の画像で送信された情報が新しく書き変わっていなくても

ここに新たに画像を設定すれば(ここには何もない状態だったので、初めて画像を設定すると認識されて)反映されるかも!

なのでこちらにもアイキャッチ画像と同じ画像を選択してみました。

そして改めて Card validator と Twitter で確認します。

card validaterで正しく表示されたプレビュー

Card validator で確認したところ無事成功!

正しく表示されたツイッターカード画像

もちろんTwitter上でも!

無事に新しい画像が表示されるようになりました!

色々試してみたけど改善されない人は一度試してみる価値あり

本来であればこの設定はいらないはずでした。

明確な原因がわからないままでスッキリしませんが、このようなエラーが起こることは珍しくありません。

Twitterやブラウザやワードプレスのキャッシュ。

通信の不具合。

クローラーのタイミングなどなどさまざまな可能性があります。

ただ今回のようにそれでもやっぱり新しく設定したTwitterカードの画像が表示されないときの対処法を探してもヒットするものがなかったので

自力で色々試してみたところ解決することができました。

ブログはとても奥が深いものです。

さまざまなことができるからこそ、初心者には難しいものです。

色んな方法を試したけどダメだった…という人は

一度この方法を試してみてください。

原因も直った理由もわからないけど、なんとなくやったらできちゃった!

という感じで二日間かかって無事解決できました。

めでたしめでたし

コメント