素肌にサスペンダー

個人的な備忘と日記

【SEO】強調スニペットの表示から、メディアサイトのマークアップについて思ったこと

最近、Electronでちょっとしたmac OSアプリを作っていて、アイコンのサイズをGoogle検索した。

そしたら、良い感じに強調スニペットで表示されているサイトがあった。

f:id:bnsgt:20210718013358p:plain

一番上にこんな表示のされ方したら、そりゃクリックしたくなる。

該当箇所のマークアップを見てみると普通にtableタグだったので、テクニカルな対応をしているというより、コンテンツの中身を鑑みて、検索クエリからユーザーが意図するものをよしなに表示してくれたんだと思われる。 (ただし、スニペットも表組みで表示されているので、画像で表を再現していたとすると、たとえaltを入れていてもこういうスニペットにはならなかった様な気がする。)

これを見て思ったのは、検索流入が欲しいメディア的なサイトを作る時は、普通にマークアップして良質なコンテンツを出し続けることが大事と思った。

なので、コンテンツ制作にあたりコストや手間がかかるようなメディアのテンプレートを作るのはよくない。

コンテンツ制作の障壁例

  • 今までとちょっと異なるレイアウトのページ追加の際にCSSを書かなければならない。
  • テキストを画像にして表示する仕様にした場合、毎回画像を作らなければならない。

デコレーション的な意味合いでのデザイン性を重視しすぎて、ちゃんと設計出来ていないことが殆ど。 上記は以前から思っていたことでもあるけど、案件でコーダーとして入った場合、結局こういう部分まで考慮しないデザインが上がってきて(おそらく代表1ページの記事詳細ページをデザインしたりして、どういう記事を今後書いていくかなどの運用設計ができていないなど)、後々苦労することがあった。

コンテンツ制作の障壁にならないメディアサイトのテンプレートを作る時

  • 想定されるレイアウト一覧をあらかじめ踏襲したデザインを作りコーディングする。
    • 実際どんな記事を書いていくのか、複数実際の記事をもとにデザインすると漏れがなくなりそう。
    • レイアウト一覧のサンプルがあれば、どうやって記事を表示するかイメージが湧くので、コンテンツ制作の負担が減る。
  • 写真以外は、なるべくテキストで展開できる様にする。
  • マークダウンで展開できると良いかも?(コンテンツ作る人にもよる。今書いているはてなブログは、マークダウンで入力している)

自分でちょっとしたメディアを持って、色々試してみると面白そう。 何かあった時に説得材料にもなるし、AMPやJamstackを試したいこともあるし。 今やっている案件が落ち着いたら、次はそれを着手してみようと思う。