PRを含む場合があります

サムネを検索結果に出したくて正方形にしてみた

制作・ハック

スマホでGoogle検索をした時に、検索結果でたまに出るサムネイルをご存知ですか?

こういうの

どうやらこれの出し方って「これ!」と言った正解がないみたいで、

本業のWebデザインの仕事でも苦戦していました。

せっかくなのでこのブログもより多くの人に見てもらいたいのでこの検索結果にサムネを出す対策をしてみたいと思いました。

スポンサーリンク

ググったら出てくる対策

  • OGPタグを入れる
  • PageMapタグを入れる
  • thumbnailタグを入れる

職場で作っているページに対策をする際、以上の方法のタグを入れてもうまく出ず、さらには特に対策をしていないページでサムネイルが表示されていたりと謎でした。

しかし色々試した結果、ページのできるだけ上部に正方形の画像を配置すると、今まで検索結果でサムネイルが表示されなかったページが表示されるようになりました!

これが正解なのかはわかりませんが、やってみる価値はありますね。

やってみたこと

  • 正方形画像を上部に配置
  • cssで隠したりせず正方形のまま見せる
  • (サイズ変更や透明度変更は問題なし)
  • altを簡潔に書く

これでサムネ反映?

最初に正方形画像を配置したときは、見た目をカッコよくするためにcssで調整をして画像が隠れる部分がありました。

その状態では検索結果のサムネイルが反映されなかったので、思い切ってcssでいじらず正方形そのまんまを表示させると、検索結果に反映されるようになりました!

cssで全くいじらない、ということではなく今回は大きさや透明度などはいじっても大丈夫でした。

本当によくわからない基準ですね。。。

このブログでできること

  • アイキャッチを正方形にする
  • altを入れる

以上のことを踏まえてアイキャッチ画像を正方形に変えてみました!
記事一覧ページではアイキャッチが正方形でも自動で長方形にトリミングされていて見やすいですね。

問題点もある

しかし、記事ページではアイキャッチ画像が正方形だと結構ボリュームが大きく、縦に間延びしてしまっているように見えてしまいます。

しかしそれ以前に検索結果のサムネイルはページやキーワードやPV数によっても出たり出なかったりがあるみたいで原因や基準が不明なのです。

とはいえ出るかわからないのに手間のかかる対策はしたくないし、これ以上の対策も思いつかないので…

とりあえず今回はこれで様子見しようと思います。

この方法で可能ならアイキャッチ画像は正方形で統一して作ってインスタなどの連携が楽になりそうです。

おわりに

これだ!という方法が見つかればまたまとめますね。
また、解決方法・対処方法をご存知の方は教えていただけますと大変ありがたいです。。。

コメント

タイトルとURLをコピーしました