Googleのスマホ検索結果にサムネイル画像を表示したいのが、何をどうやっても反映されなかったけどようやく解決した話

先日お客様より、
「スマホで検索された時に、サムネイルが検索結果に出るようにしたい」
というご相談を受けまして、色々と対策を講じていたのですが、
ネットで検索した方法を色々試してもどうやっても表示されず、
1か月の格闘の末、ようやく表示されるようになりましたので
その方法を共有したいと思います！

表示されるキーワードと表示されないキーワードがある

そもそもなのですが、対策を施したとしても、
サムネイルが表示されるキーワードと、そうでないキーワードがあります。
なので実施前に、モバイルの検索時にサムネイルが表示されるかどうかを実際に確認しましょう。
今回のお客様の場合は、すでに競合が表示されていたので、
対策をすればすぐにサムネイルが表示されるだろうと甘く見ていました。。

PageMapデータを実装してみる

まずは、巷に出ている方法を一通り試してみました。
最初はPageMapデータを実装してみました。

これで、1週間程度様子を見てみましたが。。
出てきませんでした。。

thumbnailメタタグを実装してみる

次に、thumnailタグを試してみます。

これでまた1週間程度様子を見ましたが。。
やはり出てきません。。
なぜだ。。

そもそも、競合サイトは上記を実装していなかった

スマホ検索のサムネイル表示は、まだまだ情報が少ないのと、
Google側でも表示のゆらぎがあるようで、
「これを実装したら表示される」という感じではなさそうでした。
競合で検索結果にサムネイルが表示されているサイトをひとつずつ見てみたところ、
どのサイトも「PageMap」「thumnailタグ」のいずれも実装していませんでした。
もちろん、実装した方が表示される可能性は高いのだと思いますが、
今回に関してはなぜか表示されませんでした。。

そこで、実際に表示されているサムネイルと、
クリック後のサイトをよく調べてみたところ

・サイト内の画像が表示されている
・OGP画像が表示されている

の2パターンがあることが分かりました。
特段、対策をしていないサイトにサムネイルが表示されていて、
一生懸命対策をしたはずのサイトにサムネイルが表示されないのは納得いきません笑。
ちょっと燃えてきました。

OGPを設定してみる。

OGPの画像がサムネイルとして表示されているサイトがあったので、
対象のサイトにも、早速OGPも実装してみます。

これでさらに1週間待ってみましたが。。
それでも表示されません。。

さすがに焦ってきました。。

正方形サイズの画像を上げたら、表示された！！！

再度競合サイトをチェックしたところ、
検索結果に表示されているサムネイル画像は
「正方形か、それに近い縦横比率の画像である」ことが分かりました。

そして、お客様のサイトをチェックすると、
基本的には横長の画像ばかりだったことが分かりました。
どうやら、横長の画像はサムネイル画像にならないのかもしれません。
競合サイトを念入りに確認したところ、どうやら

「ソース上最初に記載されている『正方形サイズの画像』がサムネイルとして表示される」

可能性が非常に高いことが分かりました。
また、対象キーワード以外のサムネイル画像の表示ルールを調べてみたところ、
レスポンシブデザインの場合は、スマホ表示でのソースが適応されるようでした。
つまり、スマホ表示の場合に、正方形の画像があれば、
それを認識してサムネイル画像として表示されているようでした。

ということで、アイキャッチ画像をスマホ表示の時に正方形になるようにしました。

上記のように、アイキャッチの画像をPC表示とモバイル表示で切り分け、
モバイル画像の画像を正方形にしたものにしてみたところ。。
2日ほどで、無事表示されるようになりました！！！

色々と試行錯誤をしたので、喜びもひとしおです笑。
「どうやってもスマホの検索結果でサムネイル画像が表示されない」
とお悩みの方、是非お試しいただければ幸甚です。

それでは。。