Bloggerのアイキャッチ画像をXで表示させる方法

はじめに

以前私の記事で取り上げましたが、Xにて自分のブログをアピールする際にはアイキャッチ画像があるとかなり見栄えがいいです。

今回はそのアイキャッチ画像の設定方法について紹介します。

OGPの事前設定

まずはアイキャッチ画像を表示するにもOGPの設定をすることが必要です。

以下の私の記事を参考にしてOGPを設定してください。非常に簡単です。数分で終わるのでサクッとやってみましょう。

画像選択とアップロード

まずは投稿前に画像を選択します。これは私の経験則ですが、１度「公開」ボタンを押して投稿してしまうと自動的にアイキャッチ画像が選ばれてしまうようです。また、投稿時に何も画像を投稿内に含めていなければ、自動的にアイキャッチ画像無しになってしまうようです。

そのため、投稿前にアイキャッチ画像を選んでアップロードしておきましょう。

アイキャッチ画像は投稿内の数ある画像の中から先頭の画像が選択されるようですので、一番先頭にアイキャッチ画像をアップロードします。

以下サイトでも同様の記載がありますので、参考にされてください。

では、手順に移ります。

以下の赤枠部分辺りの絶対に先頭になりそうな箇所にカーソルを当ててから画像をアップロードします。

アイキャッチ画像とかは適当にgeminiとかに作ってもらいましょう。パッと見が良ければいいのでは？と思ってます。凝った映えるやつは私には難しい…ｗ

アイキャッチ画像の非表示

大抵のアイキャッチ画像は投稿内容として表示したくないと思いますので、以下の非表示コードを埋め込みます。

style="display:none"

スタイルはタグに近い順に優先して適用されます。そのため、「img」で検索して、そのすぐ隣にでもスタイルを適用してあげましょう。

これであとは邪魔なタグなどを消して投稿すれば完成です。

今回の私の場合はh2タグ内に画像が入ってしまってましたので、アイキャッチ画像をその外側に出しました。また、改行のbrタグを消しておきました。

試しにXにリンクを貼りつけて出来栄えを見てみましょう。

できましたね！

注意点としては、Bloggerでは私の経験則だと一度「公開」ボタンを押してしまうと２度とアイキャッチ画像を変更することはできません。そのため、投稿ボタン押下とアイキャッチ画像選択は慎重にやりましょう。

お役に立てば幸いです。ではまた。