Web サイトにおける理想的な階層構造の話

 Gridsome を用いると Core Web Vitals のパフォーマンスはどれくらいなのか

Web1.0 からの系譜、サイトマップって何?

サイトマップは、Web1.0 時代からの名残で、検索エンジン(Google bot)や閲覧するユーザーに向けて、サイトのページ構成を説明する上で重要な要素です

大規模なサイトだと検索エンジンのクローラーが適切にページ辿りきれず、把握しきれない場合があり、サイトマップを作成することによって、今サイトにあるページがどのように更新されているかをお知らせすることができます

また、ユーザーにとってはサイトマップを見ることで各ページへのリンクが分かりやすくなり、サイトの運営者にとってはページの内容を知らせる重要なツールでもあります

まず初めに、サイトマップについてです

Googleがサイトマップでサイト構造を理解するには主に3つの方法があります

  1. リンクをチェック
  2. スキャンしてくる
  3. フォーマットに従う

リンクをチェック Google はサイトの中のページを知るために、サイト内のすべてのリンクをチェックします。特に重要なページは、外部リンクであったり、コンテンツが豊富であればあるほど、Googlebot がアクセスしやすくなります。サイトマップを作成することで、Googlebot にページの重要性を伝えることができます。

スキャンしてくる Googlebot は検索エンジンとして機能していますから、ページ内の内容を読んで情報収集を行います。高度な検索アルゴリズムに基づいて Google の検索結果は生成されますが、最初に情報収集を行うのは Googlebot であり、サイトマップはこの情報収集の助けとなります。サイトマップはコンテンツの割合やレイアウトなどの情報も含めて提供します。

フォーマットに従う サイトマップフォーマットは XML(Extensible Markup Language)で作成されます。XML を使用したフォーマットは正式な形式であり、Web サイトの管理者が独自ドメイン名や URL を使用しても Googlebot に正常にイベントデータが送信されることが保証されています。

サイトインデックスの重要性

せっかくページを作成しても、Google に知られなければ検索した時に引っかからないので、知られないこと=無いも同然になってしまいます。多くの事業者はサイトマップを作成し、Google の理解を促す必要性があります

Google がサイトの中のページを知るすべは2つあり、1つがサイトマップ。もう1つがパンくずリストです

まず初めに、サイトマップについてです Google がサイトマップでサイト構造を理解するには主に 3 つの方法があります

  • html で用意するケース
  • xml で用意するケース
  • RSS を記事更新とみなすケース

1 つめに記述した HTML は、ページ同士のリンク構造が適切にあると、Google が自動的に辿ってくれます。ただし、Google Bot も機械なので、サイト内でリンクがつながっておらず浮いているページや、ページ下部などの優先度が低いコンテンツのリンクは辿れない場合があります。

XML でサイトマップを用意する場合は、sitemap.xml を作成します。主には、サイトのルート階層に 例:sitemap.xmlを置きます

ロケーションや最終更新日、更新頻度、サイトにおけるページの優先度などを設定することにより Google は読むべきページのプライオリティを把握します。 こちらも機械ではあるので、数十万行にも及ぶ膨大な XML ファイルは読みきれない可能性もあり、サイトマップを構成する際には工夫が必要です

余談ですが、サーチコンソールのサイトマップでは、RSS の XML を認識することも可能です。更新頻度の高い RSS 情報には、最新の記事の情報が詰まっていることが多く、いち早く Google に知らせたい場合は、RSS をサイトマップとしてサーチコンソールに登録することであったり、pubsubhubbub というライブラリをシステムに組み込んで、直接 Google に送り込むという方法があります

ページをお知らせすることができたら、次はパンくずリスト

最近の Google はとても賢く、breadcrumbs というマークアップであったり、ある程度パンくずっぽい要素をページの中で認識すると、自動的にページの構造とパンくずを判別してくれますが、より効果的に把握してもらうには以下の2つのアプローチがあります

パンくずリストを Google が認識しやすい送り方は2つ

  • microformat などの構造化データを HTML に記述する
  • LD-JSON 形式でページのどこかに構造化データを記述する

前者は旧来から使われてきた手法で、後者は最近の記法です。メリデメについては割愛しますが、基本的には LD-JSON 形式を採用して、ページの構造をパンくずで認識させましょう

パンくずリストはどうするのが理想だろうか?

まずパンくず(breadcrumbs)の設計思想をご紹介します。パンくずリストは童話「ヘンゼルとグレーデル」で、道しるべのためにパンくずを森の中に、点々と置いていったエピソードから名付けられています。

つまり、自分以外の人が、適切に道筋を辿れるということが最も大事だということです。

例えばこのような階層があるとします

TOP > コラム > 恋愛 > 30 代の恋愛術

自身もそうですが、ページがどの階層に存在しているかが、視覚的にわかりやすいような仕組みになっています。

このホームページの中にコラムがあり、コラムの中に恋愛、恋愛の中に 30 代の恋愛術があるんだなという感覚です。

階層構造は、ユーザーの検索意図に合わせて設計する

基本的には、ユーザーの検索の意図が反映されている方が SEO としては有意義なものとなるでしょう。

検索には目的がつきものです。例えば、情報を深く知りたい、ノウハウを知りたい、モノを買いたいといった行動の動機が必ず裏側にあります。SEO 界隈では、インテントと呼ぶことも多いです。

例えば、恋愛について知りたい人は、恋愛の関連性として何を求めているのか、恋愛と一口にいっても内包しているインテントは、かなり多く存在します。

例えば、

TOP > 恋愛 > 占い

TOP > 恋愛 > 小説

2つの階層は、一見同様のコンテンツに見えて、違うコンテンツの最適解があると考えます。例えば、恋愛というキーワードを SEO で 1 位に持っていきたい場合、恋愛に関する関連情報の網羅性が大事になってきます

ここで言うなれば、恋愛という階層のページに、占いや小説といったことを内包していることが、SEO に強いサイトへの近道となります。

検索意図を全て満たすことは叶わないことが多いですが、ページ成果や打率を上げる上では、この情報の網羅性というのを念頭に置いて取り組むと良いでしょう

階層構造として意識したいのは 階層の深度

理想的な階層構造を考えていくと、浅い階層(ここでいう恋愛)の方が内包している情報の網羅性が高く、深い階層(ここでいう占い)の方が情報の密度が高いということも考えられるでしょう

2021 年頃のトレンドは 2~3 階層(深度は浅め)でカテゴリを表現すると、認識されやすい実感はあります。もちろん、編集者によるページクオリティも大切になってきます

階層を見直す時には、何が階層を妨げているのか、検索のインテントと一致しているかなど、思考していくことも大切です。階層構造はインテントをみたし、シンプルで美しいものが選ばれることは今後も変わらないでしょう

まとめ:Web サイトにおける理想的な階層構造の話

サイトマップの重要性や、パンくずを作る上でのポイントなどに触れていきましたが、 今となっては、いずれもできて当たり前の世界です。

簡単ではありますが Google が認識できることと、ユーザーのためになるかの両立が大事です。

適切な情報設計ができてないかもという場合は、ぜひこの記事を見直してみてください。