スマホの検索画面で好きな画像(サムネイル、アイキャッチ)を表示させる方法

HTML/cssアイキャッチ,グーグル,サムネイル,レスポンシブ対応,検索結果,画像

ここ最近は、既存のホームページをレスポンシブ対応にする作業をしていました。

その際に、スマホでキーワードを入れて検索し、自分が作っているホームページを探す作業が増えました。

そこで気づいたのですが、検索結果で出てくるホームページにおいて、画像(サムネイル、アイキャッチ)が表示されるものと、されていないものがあることに気づきました。

私はお教室を紹介するホームページを持っています。残念ながら現時点でこのホームページは画像が表示されていません。

地域名と教室種類をキーワードとして検索してくれるかと思うのですが、他教室よりも目立つにはやはり画像が欲しい!

そこでどうしたら表示されるかを他サイトのソースを見ながら確認してみました。

<PageMap> などは効果はないらしい

画像を表示される方法をネットで検索すると、すぐに方法がでてきました。

<PageMap>タグをソース内に入れ込むだけでOKとありました。

さっそくやってみたのですが、表示されません。さらに調べていくと、どうやら効果が無かった人が多いらしい。

タイトル画像やブログの最新記事の画像が表示されている

画像が表示されている他サイトを見てみると、検索結果で表示されている画像は、表示させる専用の画像ではなく、サイト内の画像が表示されている様子。

検索表示順位など、Googleのルールは公にされていないのか難しいですね。

私のサイトでももちろん画像は使っているのですが、表示されていません。

この差は・・・?

検索キーワードによって、画像が表示されたりされなかったりしている

検索結果に画像が表示されているサイトでも、キーワードを、教室の講師の名前に変更したら画像が表示されないことがありました。

そうなると、どうにかしてその画像がどういう画像かを見ているような気がします。

そこで、imgタグにaltを記入してみようとなりました。

面倒くさがりの私は、altを記入していませんでした。

この検証はかなり当たっているかも。

画像は正方形じゃないとダメ?

検索結果に表示される画像は正方形なので、画像は正方形にトリミングされるのか、縦横比関係なく縮小されるのか気になり調べてみました。

すると、縮小されているようですが、縦横比は変わっていない、というかもともとが正方形の画像。

完璧な正方形じゃないにしても、正方形に近い画像が表示されているようです。

私のサイトでは、表示させたい画像は横長のばかり。

そこで正方形の画像を差し込んでみました。おかげでちょいと不自然な所に画像が・・・。

ただ、どうしてもスマホバージョンでは非表示にしているdivエリアにしか画像を置けず。

とりあえず、「altを記入した正方形の画像をソースの最初の方に」入れてみましたので、数日は様子を見ます。

ブログランキングに参加しています。