【ブログ運営】Twitter Cardで大きい画像が表示されない時の原因と対処法

スポンサーリンク

こんにちは、パパです。

今回は、「ブログ運営」に関連する記事を書いてみたいと思います。

ブログ運営する上で「つまづいた事」「うまくいった事」「解決策」などを記事にする事で

同じ事でつまづいている方に、少しでも役に立てれたらなあと思います。

タイトルにもありますとおり

ツイッターカードでの表示画像です。

さっそくつまづきました!

「大きい画像」が表示されない?

ツイッターで自身のブログや投稿した記事をツイートする際に、ツイッターカードを設定すると思います。

ツイッターカードの設定で summary_large_image を設定しているのに、大きい画像が表示されない場合があります。

まあ、小さい画像でもツイッターカードが表示されていたら「まあいいか・・・」と思っていましたが

何故自分だけできないんだろう?

何度も設定を確認し、Card validatorで表示結果を確認するも

小さいサイズの画像しか表示されません。

やっぱり、大きいサイズの画像の方がインパクトあるし、クリックしてもらいやすいと思い

色々調べました!

原因は?

原因はさまざまあると思いますが、パパの場合は・・・

記事の中に、複数の<meta>タグでツイッターカードの画像サイズが指定されていました。

自分のサイトを表示して、ソースを開いてみると

<meta name="twitter:card" content="summary_large_image" />

このような表記の<meta>タグが3つあり、最後の<meta>タグで指定されていた画像サイズが「summary」でした。

ページが表示されて、一番下の<meta>タグが有効になるので、何度試しても「summary」が適用されるわけです。

そもそも、なぜ、3つの<meta>タグが混在する事になったのか?

まず、パパが使わせて頂いてるテーマ「Luxeritas(ルクセリタス)」の機能で、ツイッターカードが設定できます。

そして、インストールしているプラグイン「Twitter Cards Meta」(導入したのを忘れていた・・・有効化されてました)

さらに、プラグイン「All In One SEO Pack」のソーシャルメディア設定が有効化されていた。

つまり、3つのツイッターカード設定が有効化されている状態だったわけです。

Card validatorの結果

LOG

INFO:  Page fetched successfully
INFO:  23 metatags were found
INFO:  twitter:card = summary_large_image tag found
INFO:  Card loaded successfully

ツイッターカード設定で「summary_large_image」を設定しているにもかかわらず

3行目に ”summary_large_image” の文字が無ければおそらく他の設定が上書きされています。

対処法

もうおわかりだと思います、対処法は・・・。

自分が使うツイッターカードの設定、もしくはプラグインの設定を有効化し、使わないものは無効化する。

パパは、プラグイン「Twitter Cards Meta」 無効化 

ルクセリタステーマのツイッターカード設定を 無効化 にしました。

プラグイン「All In One SEO Pack」ソーシャルメディア設定でツイッターカードを  有効  にしました。

これで解決しました!

スポンサーリンク

まとめ

今回のケースのように、複数のプラグインでツイッターカードを設定していたりすると

最後の<meta>タグの設定が有効になるので、見落としてる場合があります。

ソースファイルを開いて、<meta>タグを検索して、複数ないか、探してみましょう!