Googleのモバイル検索結果で好きなサムネイル画像を表示させる方法


久しぶりのブログです。
最近もいろいろと思いついたことはメモしてたりするんですが、
こうやってブログに落とし込んでおくと、後々見返して役に立つことも多いです。
リアルに質問された時も、ブログの記事URLを紹介して読んでもらうとかできるので。
弊社のアクセス数もほとんどがブログで、それによってクライアントが増えることも多いので、
やはり定期的に書いていくことのメリットは感じています。
なかなか時間がー!というのがほとんどの人の課題だと思いますが、しっかりそこを解決して定期的に書いていきたいですね。

偉そうなことをかけるタイプではないので、
引き続き、どちらかというと自分のために備忘も兼ねた記事を中心に再開していきたいと思います。

モバイル検索で右側に表示される画像

さて、本題。
モバイルでGoogle検索したときに、このように検索結果の右側に画像が表示されるのを知っていました?
特に、上位の検索されたページに対してこのような表示がされるんですが、かなり目立ちますよね。
このモバイル検索で画像を表示するための方法を紹介します。
FireShot Capture 114
この画像は、モバイル検索で上位に表示される場合に表示されます。
※ただし、検索キーワードのテーマによるようで、画像が表示されない検索ワードも多いです
FireShot Capture 104
特に何も設定していなくてもページの中から適当な画像をGoogleが選んで表示させてくれるようなので、何もしなくてもいいといえばいいのですが、
全然関係のない画像が選ばれてしまうことも多いので、せっかくこのように目立つように表示されるんだったら自分が意図した画像を表示させたいですよね。
少しでもコードを触れる人なら簡単、ページに特定のタグを埋め込んで、任意の画像を検索上に表示させてみましょう。

モバイル検索で表示される画像の設定方法

設定する方法は2つ

その1

<PageMap>
    <DataObject type="thumbnail">
        <Attribute name="src" value="(表示させたい画像のURL)"/>
        <Attribute name="width" value="100"/>
        <Attribute name="height" value="100"/>
    </DataObject>
</PageMap>

その2

<meta name="thumbnail" content="(表示させたい画像のURL)" />

HTMLを書いている人にとっては難しくは無いですね。
上のタグを設置して表示させたい画像のURLを指定するだけ。

ページ単位なので、サイト全体を対応させようと思うと、すべてのページで設定していく必要があります。
ページのボリュームが大きいサイトではなかなかすべてのページにこのような画像を設定するのって大変ですよね。
SNSや、Googleの様々な機能によって、ホームページの表示以外の設定がどんどん増えてきています。
仕組みを構築しない限りは、全てに対応していくのは非常に大変で効率が悪い(その時間をコンテンツや分析に充てた方がいい)。
弊社でも、必要に応じて対応しているというのが現状です。

設定を入れるべきページを探す

モバイル検索の上位に表示されるページにしか画像表示されないので、ほとんど検索されてないページや検索順位が低いページに画像設定してもあまり意味がありませんよね。
なので、SearchConsoleを使って、検索順位が高いページ(キーワード)を中心に対応していきましょう。

・SearchConsoleで検索順位でページを並び替え
・個々のページの検索クエリをチェック
・検索画面を確認して、上位表示、画像の有無を確認
FireShot Capture 107
とすると、効率よく対応すべきページがわかりますよ。

画像を任意のものに設定したところで、どのように数字が変わるか分かりませんが、
興味がある人は設定の前と後でCTR(クリック率)を比較して、画像の違いでどのように変化するのかを見るのも面白いですね。