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