【Cocoon】Twitterカードの変更がどうしても反映されない時の原因と解決法

ブログを書き始めてしばらく経った方は、
Twitterなどでの紹介・宣伝を考えはじめる方もいるでしょう。

Twitterカードをというものを設定し、
自分のブログをTwitterで紹介されている方が多いと思います。

CocoonではTwitterカードの設定は、
Cocoon設定の中で簡単に行うことができます。

しかし、せっかくTwitterカードを設定したのに、
変更や更新内容が反映されない！というトラブルも発生するようです。

本記事では、このTwitterカードの変更・更新に関して、
以下のような状態で困っている方に向けて、その解決方法をご紹介します！

当ブログでは、ブログ初心者の方に向けた悩み解決やノウハウを紹介しています！
ブログ開設初期の皆さんに向けて、
最低限に厳選した設定・すべきことを下記記事でも紹介しています。

Twitterカードの変更・更新が反映されない現象

CocoonでTwitterカードを設定する方法は、
Cocoon設定⇒OGPタブをクリックし画面下の方へ移動すると、

「Twitterカード設定」の欄があります。
ここで、「Twitterカードの有効化」欄で「Twitterカードタグの挿入」を選択します。

「Twitterカードタイプ」は、
選択したアイコンや画像を大きく見せるか小さく見せるかを選択する設定です。
ブログアイコンのみで、すっきり見せたいときは「サマリー」、
背景画像込みで大きく見せたいときなどは「大きな画像」
というように好みの見せ方で構いません。

その下にある、「ホームイメージ」でTwitterカードに表示させる画像を設定します。
「画像のアップロード」のところで、カードに表示させたい画像を
選択・アップロードするようにしてください。

この手順でTwitterカードの画像を設定するのですが、
TwitterでブログURLを書いた投稿をしても、
表示される画像に選んだ画像が反映されない
という不具合に直面しました。

本来は、設定した画像とともに以下のように表示されるはずでした。
※サマリーでブログアイコンを表示しています

Twitterカードに設定した画像が反映されない主な原因としては、

といったことがあるようです。
2つ目以降は割とよくあるトラブルで、解決策なども検索したらたくさん出てきます。

私の場合は、一番目のことが原因でした。
Cocoonを使っている方なら相当数あり得る現象だと思うのですが、
その原因と解決方法にたどり着くまでに相当苦労しました。

同じように困っている方に向けて、解決方法をご説明します！

Twitterカードやブログカードのキャッシュ削除をしても反映されない現象の原因は、

Cocoonでトップページに固定ページを使用している場合、
固定ページでアイキャッチ画像を設定していないことが原因

と判明しました。

つまり、サイトURLから最初に入るトップページを固定ページにしている場合、
その固定ページにおける画像の優先度が原因です。

Cocoonでは画像の優先度は以下のようになっていて、
アイキャッチ画像　＞　SNS画像　＞　記事内の画像　＞　ノーイメージ　＞　OGP画像
固定ページで使っている画像がOGPよりも優先されてしまうため、
OGPで設定した画像が反映されないということでした。

私の場合は、
固定ページ（トップページ）で吹き出しとともに自分のプロフィール画像を使っていたため、
Twitterカードがいつまでたってもプロフィール画像のままでした・・・

固定ページをトップページにしていて、
Twitterカードの変更・更新が反映されない場合は、
固定ページのアイキャッチ画像を設定しましょう！

固定ページのアイキャッチ画像設定方法は、
固定ページ右側の「投稿タブ」で下の方へスクロールすると、
「アイキャッチ画像」という欄がありますので、
そこでTwitterカードに表示したい画像をアップロードするようにしましょう。

Twitterカードに自分の選んだ画像を表示させるために、
Cocoonでは設定の中の「OGPタブ」で設定します。

通常はここで設定するだけで反映されるはずなのですが、
反映されないトラブルに遭遇することがあるようです。
その際はキャッシュの削除などが一般的な解決方法ですが、
Cocoonではそれらを行っても全く反映されないといったトラブルがあります。

原因は、
「固定ページをトップページにしている際に、
　固定ページでアイキャッチ画像を設定していないから」

解決方法は、トップページにしている固定ページで、
アイキャッチ画像を「Twitterカードに表示したい画像」にすることです。
私はこれで長時間の格闘の末、無事に解決することができました。