【WordPress】Twitterでトップページのアイキャッチが表示されない時の対処法

読者の悩み

WordPressで作ったサイトを拡散したいけど、アイキャッチ画像が表示されない
特にトップページのアイキャッチが表示されない
表示させるようにするにはどうしたらいい？

こんな悩みに答える記事になっています。

Twitterで、「あなたのブログを紹介します！」といった企画が多く見られます。

しかしながら、その時にTOPページだけアイキャッチ画像が表示されないという現象に頭を悩まされていました。

TOPページ、つまり私の場合はhttps://maipyon.netにあたる部分を拡散しようとすると、画像がなにも表示されません。

このような形ですね。

この上に「このブログおすすめです！！」とかの自分のサイトに対する褒め言葉が並んでいるというのに、最後の最後で台無しです(笑)

もし、個別の記事ならば、以下の画像のように設定した画像が表示されます。

アイキャッチ画像に設定した画像がちゃんと表示されます。クリックしてみたいなと多少は思うような内容になりますね。

ということで今回は、トップページにも自分が設定した画像を表示される方法を詳しく解説していこうと思います！

ちなみに、アイキャッチ画像があるのとないのではクリック率は1.6%→3%という変化があったそうで、これはアイキャッチ画像を設定するしかない。ということになりますね！

簡単ですので、設定は3分ほどでおわりますよ～！

1.WordPressの個別記事でアイキャッチ画像が表示される理由

個別記事ではアイキャッチ画像が表示されるのはなぜかと言いますと、ざっくりといえばプラグインかテーマの設定で知らず知らずのうちに表示されるようになっているからです。

私はYoast SEOというプラグインを入れていますが、それだけで拡散時のアイキャッチ画像が表示されるようになっているようです。

しかし、TOPページにはそのような画像がない。

トップページにだけ普段個別の記事で設定するようなアイキャッチ画像は設定されていませんよね。

なので画像がないから画像を表示することができていませんでした。

では、個別ページで画像が表示される理由を突き止めて、TOPページでも表示してやればいいということになります。

2.WordPressでトップページのアイキャッチ画像を設定する方法

結論から言えば、head内に以下のコードを入れ込むだけ。

HTML

<!--Twitterカード-->
<meta name = "twitter:card" content="summary_large_image">
<meta name = "twitter:image" content="ここに画像のURL">
<!--Twitterカードここまで-->

head内ってどこか？といえば、Googleアドセンスでの審査の時に、コードを挿入する場所と同じですね。

編集する箇所

外観

テーマエディター

header.php

私はヘッダーテーマ(header.php)で設定しました。

画像のURLについては、もう少し先で述べます。

トップページのアイキャッチ画像の作成

TOPページのアイキャッチ画像を作っていきましょう。

Twitterを閲覧するのは大抵の人がスマホからです。
スマホでURLを紹介した際の画像の大きさを考えて、画像サイズは780px × 450pxにします。

私はCanvaでサクッと作成しました。
説明用なので、本当にサクッと(笑)

トップページのアイキャッチ画像のURLを取得する

紹介したコードの三行目、「ここに画像のURL」という部分に、画像のURLを入れていきます。

いつものように、メディアを追加から作成したアイキャッチ画像を追加して・・・

そこに現れる、URLをまんまコピーして貼り付けます。

私の場合ですと、以下のようなコードになります。

HTML

<!--Twitterカード-->
<meta name = "twitter:card" content="summary_large_image">
<meta name = "twitter:image" content="https://maipyon.net/wp-content/uploads/2018/12/14547ae3e21a4730ddeaca73be4bea7f.png">
<!--Twitterカードここまで-->

3.トップページに設定したアイキャッチ画像の確認方法

確認方法は簡単で、以下のURLに飛んで、トップページのURLを打ち込むだけでどのような感じになるか見ることができます。

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

これがうまく表示されていれば完成です！お疲れさまでした！

4.WordPressでトップページのアイキャッチ画像の設定まとめ

今回は、トップページのTwitter拡散時のアイキャッチ画像の設定方法について解説しました。

まとめると以下の通り

原因：個別記事で設定するようなアイキャッチ画像がトップページに設定されていないから
まずはトップページのアイキャッチ画像を作る
headタグの中に入れ込み
表示を確認して、修正完了！

今回紹介した内容の通りにすると、Twitterだけでの設定となりますので、その他のSNSではまた別途似たようなコードを追加する必要があります。

また、その時にはサイズの異なる画像を用意する必要性も出てきますので、注意してください。

また、はてなブログではTwitterとの連携をとる画面で設定できるようです。

トップページでのアイキャッチ画像を設定して、より多くの人が見に来てくれるようにしましょう！

WordPressのカスタマイズについてまとめた記事はこちら

【コピペでOK】WordPressのカスタマイズ集21選【ほぼ必須のカスタマイズあり】今までにやってきたブログカスタマイズをまとめた記事になっています。必須レベルのカスタマイズも紹介。綺麗なブログに近づけたい人に向けて、コピペでカスタマイズできるようなものを集めました。

ブログ初心者向けにブログで稼ぐ方法についてまとめた記事はこちら