Twitterでアイキャッチ画像が表示されない時の対処法【Cocoon】

スポンサーリンク
スポンサーリンク
スポンサーリンク

CocoonのTwitterカードの問題

Twitterでアイキャッチ画像が反映されない時の対処法【Cocoon】

こんなことでお困りですか?

ランドゥ
ランドゥ

こんにちは。ツイートにブログのリンクを貼った時、こんなことで困っていませんか?

 ツイートにカードが表示されない

 アイキャッチ画像を更新したのにカードに反映されない

せっかく頑張って作成したアイキャッチ画像。ブログの顔ともいえるこの部分が、Twitterに投稿したとたん表示されないようでは悲しいですよね。

この記事では、以下2種類のケースの解決策をご紹介します。

ツイートにカードが表示されない

ツイートにカードが表示されない
※架空のアカウントです

そもそも、リンクを貼り付けた時にカードではなくURLがそのまま表示されてしまうケースです。

画像の更新がカードに反映されない

画像の更新がカードに反映されない
※公式マークがつく器量はありません

Twitter用のカードは表示されているものの、アイキャッチ画像がNO IMAGEとなってしまっているケースです。

ツイートにカードが表示されない対処法

Cocoonの場合の対処法となります。この3つを対処法としてご説明します。

  • CocoonのOGP設定の確認
  • Card validatorで表示確認
  • 他のプラグインの停止

CocoonのOGP設定の確認

ダッシュボードから、『cocoon設定』→『OGP』とすすみます。

 OGPとは

 Open Graph protocolの略称。SNSでwebページがシェアされた時にそのページの情報(タイトル・アイキャッチ画像など)を正しく表示させる仕組みです。

カードの設定だから、と『ブログカード』を押してしまわないように注意ですね。

それぞれの設定項目の確認をしていきます。

OGP設定

OGP設定

デフォルトで『OGPタグの挿入』という項目へチェックが入っています。つまり、Cocoonユーザーは特に何もしなくても、本来カードが表示される設定になっています。

Twitterカード設定

Twitterカード設定

こちらは『Twitterカードタグの挿入』へチェックが入っているかを確認しましょう。

また、『大きな画像のサマリー』というのは、ニュースサイトのような大きなカードを表示したい場合にオススメです。僕はこちらを選択しています。

ホームイメージ

デフォルトではCocoonのイメージ画像となっています。自分のアイコンやブログのホーム画面などをカードのデフォルトにしたい場合には設定しておくといいですね。

全ての設定を終えたら、『変更をまとめて保存』を選択します。

Card validatorで表示確認

つぎに、Twitter公式のカード表示確認ツール『Card validator』を使ってみたいと思います。

https://cards-dev.twitter.com/validator

使い方は簡単。

確認したいアカウントにログインしたのち、カードのURLをバーの中に入力、『カードをプレビュー』を押すだけです。

これで希望どおりに表示された場合は解決です。

他のプラグインの停止

上記の確認を行ってもカードが表示されない、もしくは大きな画像のサマリーにならない場合は、他のプラグインのTwitterカード設定とバッティングしている可能性があります。

バッティングとは

 複数のプラグインを同時に有効化することによって、動作の不具合が発生すること。

たとえば、『All in One SEO Pack』はTwitterカードの設定が可能ですが、僕がこのプラグインを有効化している時、画像のサマリーが小さくなるという不具合がありました。

その後バッティングに気が付いて停止した結果、正しく大きな画像が表示されるようになったのです。

この記事を読んでいるあなたは『Cocoon』ユーザーの可能性が高いと思われます。その場合『All in One SEO Pack』の機能はテーマと重複するので停止することをオススメします。

画像の更新がカードに反映されない対処法

この3つを対処法としてご説明します。

  • Card validatorの情報の更新
  • SNS画像の設定
  • キャッシュの削除

Card validatorの情報の更新

先ほど紹介したツール、Card validatorの『カードをプレビュー』を繰り返しクリックすることで、前のアイキャッチ画像を含む、古いカード情報の更新を行います。

https://cards-dev.twitter.com/validator

これで改善されない場合はつぎの対処法へ進んでください。

キャッシュの削除

Card validatorで更新が出来ない場合に試してほしいのがキャッシュの削除です。

❔ WordPresにおけるキャッシュとは

 ページの表示速度を上げるために、データをサーバー内に保存する仕組み。もう一度アクセスした際に、変更されていない箇所はキャッシュが表示される。

ダッシュボードで『Cocoom設定』→『キャッシュ削除』と進み、『全てのキャッシュの削除』をここで行います。

もう一度Card validatorで確認して、それでも更新されない場合はつぎへすすんで下さい。

SNS画像の設定

最終手段ですが、設定サイドバーの『SNS画像』という箇所にカードで表示させたい画像をアップロードします。

設定サイドバーとは

投稿の編集画面の右側にあるサイドバーのこと。『SNS画像』の項目は下部にある。

『選択』を押して、あとは通常のメディア同様にアップロードします。

本来Twitterカードの設定がうまくいっていればこれがなくても反映されるのですが、万策尽きた場合には頼るしかありません。

対処後には念のため、Card validatorで確認しましょう。

まとめ

最後までお読みいただきありがとうございました。

無事Twitterのカードは表示されましたか。今回の記事ではアイキャッチ画像の表示と更新の方法をご紹介いたしましたが、

アイキャッチ自体のクオリティを向上させるツールの徹底比較もこちらの記事でご紹介しております。

また、これを読んでAdobe Photoshopでのアイキャッチ画像作成に興味を持たれた方は、期間限定価格でソフトを購入できる制度があるので、こちらの記事も読まないともったいないですよ。

忙しいあなたにオススメ

 これから忙しくなるあなたにオススメなのは、こちらのオーディオブック『Audible』。本を『聴く』新習慣は、手がふさがらないだけではなく直接脳に本をインプットすることのメリットもあります。こちらの記事で詳しく説明しております。

(文責・ランドゥ)

コメント