BLOGブログ

SEOパンくずリストの正しい作り方

takefushi / 2021.05.20

Web制作・ホームページ制作

サイトやブログで必須とも言える「パンくずリスト」を正しく設置していますか？

サイトの訪問ユーザーは必ずしもトップページから流入してくるわけではありません。さまざまな下層ページや個別ページからの流入もあります。

パンくずリストの設置で、そのページがサイトのどこに位置するのか表しており、訪問ユーザーはサイトを効率的に理解して、移動できます。

この記事では、SEOを意識したパンくずリストの正しい作り方を紹介します。

SEOを意識した正しい作り方

階層構造を理解する

パンくずリストは、サイト内の階層構造にしたがって設置ものであって、まずはサイトの内部構造をしっかり理解しないといけないです。
内部構造が理解できれば、階層構造の整理もでき、訪問ユーザーにもわかりやすいサイト構造になります。

パンくずリストは通常、トップページ > 大カテゴリ >（中カテゴリ）>（小カテゴリ）> コンテンツで表してこのブログ記事の場合、下記のように表す形になります。

トップページ > ブログ > Web関連 > Web制作・ホームページ制作 > SEOパンくずリストの正しい作り方

あらかじめしっかりとサイトの内部構造やカテゴリ設定のプランを練り、それにしたがってページを作成し、サイトを制作・運用をしていきます。

階層構造の整理や見直しが終了してら、パンくずリストの設置が始まります。

構造化データの記述方法

構造化データの記述方法は3つの方法があります。

  • microdata
  • JSON-LD
  • RDFa (RDFa Lite)

それぞれ紹介していきます。Googleのパンくずリストのページを参考に作成しています。

トップページ > ブログ > Web関連

上記を表示ができるように下記を記述します。

「microdata」の記述

<html>
  <head>
    <title></title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://○○.jp"> <!-- URL -->
            <span itemprop="name">トップページ</span></a> <!-- 名前 -->
        <meta itemprop="position" content="1" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://○○.jp/△△"> <!-- URL -->
          <span itemprop="name">ブログ</span></a> <!-- 名前 -->
        <meta itemprop="position" content="2" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
          <span itemprop="name">web関連</span> <!-- 名前 -->
        <meta itemprop="position" content="3" /> <!-- 階層 -->
      </li>
    </ol>
  </body>
</html>

「JSON-LD」の記述

<html>
  <head>
    <title></title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1, <!-- 階層 -->
        "name": "トップページ", <!-- 名前 -->
        "item": "https://○○.jp" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 2, <!-- 階層 -->
        "name": "ブログ", <!-- 名前 -->
        "item": "https://○○.jp/△△" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 3, <!-- 階層 -->
        "name": "web関連" <!-- 名前 -->
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa (RDFa Lite)の記述

<html>
  <head>
    <title></title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp"> <!-- URL -->
          <span property="name">トップデータ</span></a> <!-- 名前 -->
        <meta property="position" content="1"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            https://○○.jp/△△"> <!-- URL -->
          <span property="name">ブログ</span></a> <!-- 名前 -->
        <meta property="position" content="2"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">web関連</span> <!-- 名前 -->
        <meta property="position" content="3"> <!-- 階層 -->
      </li>
    </ol>
  </body>
</html>

これがSEOを意識したパンくずリストを記述する方法です。

Googleは「JSON-LDを推奨する」となっているので、「JSON-LD」が良いのかもしれないです。

ただし、「JSON-LDしか読み込まない！」とは言っているわけではないので、好きな方法で記述して大丈夫です。

パンくずリストの複数設置

複数設置方法は以下の通りです。

「microdata」の記述

<html>
  <head>
    <title></title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://○○.jp"> <!-- URL -->
            <span itemprop="name">トップページ</span></a> <!-- 名前 -->
        <meta itemprop="position" content="1" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://○○.jp/△△"
           href="https://○○.jp/△△"> <!-- URL -->
          <span itemprop="name">美顔器</span></a> <!-- 名前 -->
        <meta itemprop="position" content="2" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://○○.jp/△△/◇◇"
           href="https://○○.jp/△△/◇◇"> <!-- URL -->
          <span itemprop="name">ブランド名</span></a> <!-- 名前 -->
        <meta itemprop="position" content="3" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">商品名</span> <!-- 名前 -->
        <meta itemprop="position" content="4" /> <!-- 階層 -->
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://○○.jp"> <!-- URL -->
            <span itemprop="name">トップページ</span></a> <!-- 名前 -->
        <meta itemprop="position" content="1" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://○○.jp/△△"
           href="https://○○.jp/△△"> <!-- URL -->
          <span itemprop="name">ブランド名</span></a> <!-- 名前 -->
        <meta itemprop="position" content="2" /> <!-- 階層 -->
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">商品名</span> <!-- 名前 -->
        <meta itemprop="position" content="3" /> <!-- 階層 -->
      </li>
    </ol>
  </body>
</html>

「JSON-LD」の記述

<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1, <!-- 階層 -->
        "name": "トップページ", <!-- 名前 -->
        "item": "https://○○.jp" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 2, <!-- 階層 -->
        "name": "美顔器", <!-- 名前 -->
        "item": "https://○○.jp/△△" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 3, <!-- 階層 -->
        "name": "ブランド名", <!-- 名前 -->
        "item": "https://○○.jp/△△/◇◇" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 4, <!-- 階層 -->
        "name": "商品名" <!-- 名前 -->
      }]
    }
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1, <!-- 階層 -->
        "name": "トップページ", <!-- 名前 -->
        "item": "https://○○.jp" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 2, <!-- 階層 -->
        "name": "ブランド名", <!-- 名前 -->
        "item": "https://○○.jp/△△" <!-- URL -->
      },{
        "@type": "ListItem",
        "position": 3, <!-- 階層 -->
        "name": "商品名" <!-- 名前 -->
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa (RDFa Lite)の記述

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp"> <!-- URL -->
          <span property="name">トップページ</span></a> <!-- 名前 -->
        <meta property="position" content="1"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp/△△"> <!-- URL -->
          <span property="name">美顔器</span></a> <!-- 名前 -->
        <meta property="position" content="2"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp/△△/◇◇"> <!-- URL -->
          <span property="name">ブランド名</span></a> <!-- 名前 -->
        <meta property="position" content="3"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">商品名</span> <!-- 名前 -->
        <meta property="position" content="4"> <!-- 階層 -->
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp"> <!-- URL -->
          <span property="name">トップページ</span></a> <!-- 名前 -->
        <meta property="position" content="1"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://○○.jp/△△"> <!-- URL -->
          <span property="name">ブランド名</span></a> <!-- 名前 -->
        <meta property="position" content="2"> <!-- 階層 -->
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">商品名</span> <!-- 名前 -->
        <meta property="position" content="3"> <!-- 階層 -->
      </li>
    </ol>
  </body>
</html>
トップページ > 美顔器 > ブランド名 > 商品名（詳細ページ）
トップページ > ブランド名 > 商品名（詳細ページ）

パンくずリストを複数設置するのは、SEOには影響があるのか気になりますよね。

このように設置することで、「美顔器」「ブランド名」からの再度商品を探すことができるため、ユーザーの利便性は向上します。

では、Googleの見解はどうなのかといいますと、パンくずを複数設置していることでサイトの評価を下げてしまうのではないかという、心配は必要ありません。

Googleは、複数設置してあった場合「１つ目を優先する」と発表されています。
１つ目には、サイト構造を意識しているパンくずリストを設置して、その他はユーザーの利便性を考えた設置をすると有効です。

まとめ

クローラーに対していい影響があったり、ユーザーの利便性を向上があるパンくずリストが簡単に作ることができます。

ぜひ、パンくずリストを設置してみて下さい。

ブログ一覧に戻る

関連記事

Default Thumbnail自分のお店、会社のホームページが検索にヒットしない！解決方法 Default Thumbnail[HTML] tableタグを使うメリット・デメリットとdlタグを使った表の作り方 ページの表示速度を意識した画像を最適化する方法 Default ThumbnailMacコマンドで簡単！PNG＆JPGをWebPに一括変換 ブラックハットSEOとは？代表例をまとめて紹介 SEO対策における記事・コンテンツの正しい更新方法