Googleデジタルマーケティング＆Eコマース：サイト階層・URLのベストプラクティス

# はじめに

”Googleデジタルマーケティング＆Eコマース プロフェッショナル認定証"　の受講が完了しました(2022/3/3)。私がこのコースから得られた素晴らしい体験を、テーマごとに分割して、わかりやすくご紹介しています。興味を持たれた方は、是非下記を受講してみてください。

https://jp.coursera.org/professional-certificates/google-digital-marketing-ecommerce

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/84e33f4e-81cb-98a6-4546-f2ec06fd8b8b.png" width="800">

# サイト階層を整理することで・・・

- Googleの検索エンジンがサイト内のページをクロールし、インデックスを作成しやすくなります。クロールとは、新しいページや更新されたページを見つける作業のことです。
- URLがシンプルで見やすくなり、SEO対策にもなりますし、お客様がサイト内で欲しいものを見つけやすくなります。

# サイト階層の深さ

全てのWebサイトには、「ホームページ」、つまり「ルートページ」があります。これは、サイト階層を作るための出発点です。また、多くのお客様が初めてサイトを訪れたときに訪れるページでもあります。

サイト階層の最上位に位置するトップページには、ビジネスや製品に関する一般的な情報を掲載する必要があります。トップページの下に表示されるサブページ、つまり下位のページには、製品の詳細など、より具体的な情報を掲載する必要があります。

サイト階層には、3つまたは4つのレベルのサブページがあります。各レベルには、前のレベルよりも具体的な情報が含まれます。4つ以上の階層を持つサイトもありますが、通常は、***<font color="MediumBlue">すべてのページがトップページから3～4回以上クリックされないようにする</font>***　のがベストです。

ここでは、eコマースサイトのサイト階層の例として、トップページから始まり、カテゴリページ、サブカテゴリページ、商品ページという3つのレベルのサブページにつながる構成を示しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/76c6db57-20bc-3584-f21c-dc822a275a5b.png" width="700">

#### オンライン書店の例

1. トップページには、最新のお買い得品や新刊、ベストセラーなど、顧客の大半が関心を寄せるコンテンツを掲載します。
1. 類似のコンテンツや製品をまとめたカテゴリーページがあります。例えば、オンライン書店の場合、フィクション、ノンフィクション、児童書などのカテゴリーがあります。
1. サブカテゴリー・ページで、カテゴリー・ページに関連するページです。例えば、児童書のカテゴリページの下には、チャプターブック、絵本、グラフィックノベル、ボックスセット、およびその他の関連テーマのサブカテゴリが含まれる場合があります。
1. 特定の児童書のタイトルの商品詳細ページなど、より具体的な情報が含まれます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/88ea095a-7fda-d81b-a9e5-4a58c53a33a4.png" width="700">

# breadcrumbsを利用する

例えば、訪問者がある児童書の商品詳細ページにたどり着いた後、他の本も見てみたいと思ったとします。その場合、どのようにすれば、より多くの書籍を閲覧できるようになるのでしょうか。breadcrumbsは、ページの上部または下部にある内部リンクの列で、訪問者が前のセクションやホームページにすばやく戻ることができるようにするものです。

breadcrumbsは通常、トップページから始まり、訪問者が現在いるページにつながるサイト階層の各レベルのリンクを含んでいます。

例えば、オンライン書店のbreadcrumbsは、トップページから始まり、カテゴリページへのリンクを含み、サブカテゴリページへのリンクで終了します。以下のパンくずは、このようなレイアウトを表しています。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/60610b13-63d8-9589-d351-7ceb98905399.png" width="700">

ある本の詳細ページにアクセスすると、このようなbreadcrumbsが表示されます。breadcrumbsリンクをクリックすることで、より多くの書籍に戻ることができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2358573/3d20ca4b-106f-6493-ae75-62ad03828144.png" width="700">

# シンプルで説明的なURLを作成する

URLのテキストは、そのページのコンテンツを説明するものでなければなりません。こうすることで、訪問者がそのページにアクセスしたときに何が見つかるかを簡単に理解することができます。また、検索エンジンにとっても、そのページが何について書かれているのかを理解しやすくなるため、SEO対策にもなります。

### Best practices for URLs

#### <font color="MediumBlue">できるだけ短いURL</font>

- 長すぎるURLは、訪問者を圧倒したり、混乱させたりする可能性があります。
- 短いURLは、訪問者があなたのページへのリンクを簡単に共有できるようにします。

#### <font color="MediumBlue">理解しやすいURL</font>

- 訪問者がURLをクリックしたときに、そのリンク先がわかるようにする必要があります。
    - 例えば、ミステリー本のサブカテゴリーページのURLを作成する場合、「[https://www.booksgalore.com/fiction/mystery」のようなURLを使用します。訪問者は、自分が本に関するウェブサイトを訪れていることを認識します。また、このリンクがフィクションのカテゴリーにあるミステリーの本へと導いてくれることもわかります。
- URLは、訪問者にとって意味のない数字ではなく、単語を含むべきです。
    - 例えば、「page1」のような一般的な言葉や、「books-fiction-books-fictionbooks」のような過度のキーワードをURLに使用しないようにします。
- URLは検索エンジンの検索結果に表示されるため、ユーザーフレンドリーなURLにすることが重要であることを覚えておいてください。

#### <font color="MediumBlue">リンク切れの回避</font>

リンク切れ（既に存在しないWebページにリンクする）は、ウェブページを削除した場合や、コンテンツを別の場所に移動した場合に発生することがあります。

#### <font color="MediumBlue">カスタム404ページの用意</font>

訪問者が404ページ（訪問しようとしたウェブページが存在しないことを知らせるページ）にたどり着くことがあります。

- 曖昧なメッセージや次に何をすべきかのガイダンスがない404ページでは、訪問者を行き止まりに導いてしまいます。
- カスタム404ページは、訪問者をサイト内の動作するページに戻すためのガイドとして役立ちます。