読者の悩み
- WordPressで作ったサイトを拡散したいけど、アイキャッチ画像が表示されない
- 特にトップページのアイキャッチが表示されない
- 表示させるようにするにはどうしたらいい?
こんな悩みに答える記事になっています。
Twitterで、「あなたのブログを紹介します!」といった企画が多く見られます。
しかしながら、その時にTOPページだけアイキャッチ画像が表示されないという現象に頭を悩まされていました。
maipyon
この上に「このブログおすすめです!!」とかサイトに対する褒め言葉が並んでいるというのに、最後の最後で台無しです(笑)
もし、個別の記事ならば、きちんと以下の画像のように設定した画像が表示されます。
アイキャッチ画像に設定した画像がちゃんと表示されます。クリックしてみたいなと多少は思うような内容になりますね。
ということで今回の記事では、トップページにも自分が設定した画像を表示される方法を詳しく解説していこうと思います!
ちなみに、アイキャッチ画像があるのとないのではクリック率は1.6%→3%という変化があったそう。
これはアイキャッチ画像を設定するしかない。ということになりますね!
簡単ですので、設定は3分ほどでおわりますよ~!
この記事の目次
WordPressの個別記事でアイキャッチ画像が表示される理由
個別記事ではアイキャッチ画像が表示されるのはなぜか。
それは、ざっくりといえばプラグインかテーマの設定で知らず知らずのうちに表示されるようになっているからです。
私はYoast SEOというプラグインを入れていますが、それだけで拡散時のアイキャッチ画像が表示されるようになっているようです。
WordPressのトップページのアイキャッチが表示されない理由
しかし、TOPページにはそのような画像が設定されていません。
maipyon
トップページにだけ普段個別の記事で設定するようなアイキャッチ画像は設定されていません。
単純に画像が設定されていないから画像を表示することができていませんでした。
では、個別ページで画像が表示される理由を突き止めて、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~の部分)をコピーして貼り付けます。
maipyon
<!--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拡散時のアイキャッチ画像の設定方法について解説しました。
まとめると以下の通り
- 原因:個別記事で設定するようなアイキャッチ画像がトップページに設定されていないから
- まずはトップページのアイキャッチ画像を作る
- headタグの中に入れ込み
- 表示を確認して、修正完了!
今回紹介した内容の通りにすると、Twitterだけでの設定となりますので、その他のSNSではまた別途似たようなコードを追加する必要があります。
また、その時にはサイズの異なる画像を用意する必要性も出てきますので、注意してください。
また、はてなブログではTwitterとの連携をとる画面で設定できるようです。
トップページでのアイキャッチ画像を設定して、より多くの人が見に来てくれるようにしましょう!

