どうも7noteです。スマホ時のGoogle検索結果画面に表示される画像を設定する方法

Googleで検索した際にたまに出てくる正方形の画像を任意の画像に設定する方法を解説していきます。

この正方形の画像の呼び方はサムネイル(thumbnail)と言います。思ったよりシンプルな名前。

サムネイルの設定方法

headタグに以下の一文を追加し、画像を指定します。

<meta name="thumbnail" content="(画像URL)" />

これでもしサムネイルが表示される場合は上で指定した画像が表示されるはずです。

サムネイル設定の注意点

▼ 設定したから必ず表示されるわけではない

設定しても表示されるとは限りません。
もしサムネイルが表示される場合、この画像を表示してくださいというものです。

▼ 設定していないと勝手に画像が選ばれる

サムネイル画像が設定がされていない場合は該当ページに設定されている画像が自動的に表示されます。

そのため思わぬ画像が選ばれて、文字が見切れてしまう、なんてこともあるので設定しておいた方が無難でしょう。

設定する画像をわざわざ作らなくてもogp画像を用意しているサイトであればひとまずogp画像を設定しておくのも個人的にはアリかなと思います。

まとめ

・headタグに1行追加。
・設定しても必ずサムネイルが表示されるわけではない。
・何かは設定しておく方が無難。ogp画像があれば取り急ぎogp画像を設定しておこう。

現在サムネイルが表示されるのはスマートフォンでの検索時だけです。
開発の優先度は低いですが、余裕があればしっかり設定しておきたいところですね。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ