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

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

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

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

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

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

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

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

ちなみに、アイキャッチ画像があるのとないのではクリック率は1.6%→3%という変化があったそう。

これはアイキャッチ画像を設定するしかない。ということになりますね！

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

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

個別記事ではアイキャッチ画像が表示されるのはなぜか。

それは、ざっくりといえばプラグインかテーマの設定で知らず知らずのうちに表示されるようになっているからです。

WordPressのトップページのアイキャッチが表示されない理由

しかし、TOPページにはそのような画像が設定されていません。

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

単純に画像が設定されていないから画像を表示することができていませんでした。

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

WordPressでトップページのアイキャッチ画像をTwitterで表示されるように設定する方法

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

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

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

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

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

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

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

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

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

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

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

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

そこに現れる、URL(上記画像の下側にある、https://maipyon.net～の部分)をコピーして貼り付けます。

<!--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カードここまで-->

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

最後に設定した画像がTwitterではどのように表示されるか確認してみます。

確認方法は簡単で、以下のURLに飛んで、トップページのURLを打ち込むだけ。

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

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

WordPressでTwitterにトップページのアイキャッチ画像を設定する方法まとめ

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

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

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

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

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

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

ブログで稼ぎたい人におすすめな登録必須のアフィリエイトASPは5つだけ ブログを始めた初心者に向けて、登録必須のおすすめASPを紹介します。ブログで稼ぐ仕組みも合わせて紹介。ブログで収入を得るためにはどうしたらいいか？や、アフィリエイトの仕組みなどが分かります。絶対に登録しておきたい5つのASPについて紹介します。