Web制作実務役立ち

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】
本ページにはプロモーションが含まれています。
まさひろくん

パンくずリストって何?あと、構造化データに対応しなきゃいけないらしいけど、よくわからないので、コードの書き方を教えて欲しい。

あとSEOでもパンくずリストが重要みたいだけど、本当なの?

こんな疑問に答えます。

パンくずリストはLPなどペライチじゃない限りは、基本的にどんなサイトにも必要です。

よって暗黙の了解的に色んなサイトに導入されていますが、構造化データに対応していないと検索結果にリッチスニペットとして表示することができないので、SEOでも重要になってきます。

今回の記事では「HTMLで構造化データに対応したコードを元に解説」していき、最終的に自分のサイトに導入できるまでのレベルを目指します。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

コーディング課題 超実践編

超実践編をとりあえず見てみる

パンくずリストとは?

パンくずリストは簡単に言えば、今見ているページのサイト内での位置を分かりやすく表したナビゲーションリンクと言えます。

このサイトにも記事下部に設置されています。

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】
補足:なぜパンくず?

私がこの業界に入った時に、ハンバーガーとパンくずに関しては最初本当に意味が不明でした。

パンくずは、ヘンゼルとグレーテルが元になっています。

引用:https://lucy.ne.jp/bazubu/pankuzu-42602.html

パンくずは道しるべ。ユーザーがサイト内で迷子にならないための施策なのです。

パンくずリストの役割

パンくずリンクを設置するのは、以下のようなメリットがあるからです。

  1. ナビゲーションのサポート: パンくずリストは、ユーザーに現在のページの位置を示し、ウェブサイトの他のセクションに簡単にアクセスできるような補助になります。
  2. サイトの構造の説明: パンくずリストは、サイトの階層構造を視覚的に表示し、ユーザーにその構造を理解する手助けをします。
  3. SEOの強化: 検索エンジンはパンくずリストを利用してサイトの構造を理解し、検索結果においてパンくずリストを表示することがあります。これにより、ウェブページの検索エンジンのランキングが向上する可能性があります。
  4. ユーザーエクスペリエンスの向上: パンくずリストは、ユーザーが迷子にならないようにし、必要な情報を迅速に見つけるのに役立ちます。
  5. 戻るナビゲーションの簡素化: パンくずリストにより、ユーザーはブラウザの戻るボタンを使用することなく、前のセクションやホームページに簡単に戻ることができます。

ユーザーに視覚的に分かりやすいのもそうですが、Googleのクローラーなども適切にWebサイトの構造を理解できるようになるので、現代のSEO上必須とも言えます。

構造化データとパンくずリストの関係

構造化データとは何なのか?

構造化データは、ウェブページのコンテンツを機械可読な形式でマークアップする方法です。

これにより、検索エンジンや他のアプリケーションはウェブページの内容を正確に理解し、それを適切にインデックスし、表示することができます。

例えば下記は適切にパンくずをマークアップした際に現れるパンくずのリッチスニペットです。

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】

検索一覧での自社メディアの表示情報を多くできる→検索流入が増える」ということで、対応が推奨されています。

リッチスニペットに関してはGoogle公式が種類をまとめています。

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

https://developers.google.com/search/docs/appearance/structured-data/search-gallery?hl=ja

schema.orgについて

構造化データには様々な種類がありそれをまとめているサイトがあります。

それが「https://schema.org/」です。

ここでは詳しくは割愛しますが、パンくず以外にも沢山の構造化データがあり、それが「https://schema.org/」にまとまっていると考えておきましょう。

構造化データに対応したパンくずリストの書き方

今回は以下のような代表的なパンくずを紹介します。

多くの場合はWordPressのプラグインを使うか、自作をすることになると思いますが、今回はHTMLコードの形式で紹介します。

See the Pen Microdata by samuraibrass (@samuraibrass) on CodePen.

構造化データにはMicrodataとJSON-LDの二種類がある

  1. Microdata: Microdataは、HTMLタグに属性を追加することで、ウェブページのコンテンツにメタデータを埋め込む方法を提供するHTML仕様。
  2. JSON-LD: JSON-LD (JSON for Linking Data)は、JSON形式を使用してリンクされたデータを表現する方法を提供する仕様。

コードを見たほうが早いと思いますが、大まかに言えばMicrodataのほうが簡単に書けるが、Google推奨はJSON-LD、しかしどちらもリッチスニペットは問題なく表示されるので、どちらでもいいと思う。

そんな感覚です。

しょーご

私はMicrodataが多いですかね。このブログもそうなってます。

❶Microdata

MicrodataはHTMLタグに属性をかけばいいので分かりやすいと思います。

<nav>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/">
                <span itemprop="name">ホーム</span>
            </a>
            <meta itemprop="position" content="1" />
        </li>
        <li itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/category">
                <span itemprop="name">カテゴリ</span>
            </a>
            <meta itemprop="position" content="2" />
        </li>
        <li itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/category/subcategory">
                <span itemprop="name">サブカテゴリ</span>
            </a>
            <meta itemprop="position" content="3" />
        </li>
        <li itemprop="itemListElement" itemscope
            itemtype="https://schema.org/ListItem">
            <a itemprop="item" href="https://example.com/category/subcategory/detail" class="current">
                <span itemprop="name">詳細記事</span>
            </a>
            <meta itemprop="position" content="4" />
        </li>
    </ol>
</nav>
nav ol {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
}

nav li {
  margin: 0;
  padding: 0;
}

nav li + li::before {
  content: '›';
  padding: 0 10px;
}

nav a {
  text-decoration: none;
  color: #007BFF;  /* 他のリンクの色 */
}

nav a.current {
  color: #000;  /* 現在のページのリンク色 */
}

nav a:hover {
  text-decoration: underline;
}

<ol>タグ:パンくずリストの各項目が特定の順序で表示されることを示します

itemscopeとitemtype属性:itemscope属性は、新しい項目スコープを作成し、itemtype属性はそのスコープのタイプを指定します。

itemprop=”item”:リンク先のURLを指定

itemprop=”position”:各項目の順序が明確になります。

❷JSON-LD

JSON-LD (JSON for Linking Data)は、JSON形式を使用するのでわかりにくいかもです。

見た目の部分と構造化データ部分を分離できるので、管理しやすいメリットがあります。

<nav>
    <ol>
        <li>
            <a href="https://example.com/">ホーム</a>
        </li>
        ›
        <li>
            <a href="https://example.com/category">カテゴリ</a>
        </li>
        ›
        <li>
            <a href="https://example.com/category/subcategory">サブカテゴリ</a>
        </li>
        ›
        <li>
            <a href="https://example.com/category/subcategory/detail" class="current">詳細記事</a>
        </li>
    </ol>
</nav>
<script type="application/ld+json">
        {
            "@context": "https://schema.org",
            "@type": "BreadcrumbList",
            "itemListElement": [{
                "@type": "ListItem",
                "position": 1,
                "item": {
                    "@id": "https://example.com/",
                    "name": "ホーム"
                }
            }, {
                "@type": "ListItem",
                "position": 2,
                "item": {
                    "@id": "https://example.com/category",
                    "name": "カテゴリ"
                }
            }, {
                "@type": "ListItem",
                "position": 3,
                "item": {
                    "@id": "https://example.com/category/subcategory",
                    "name": "サブカテゴリ"
                }
            }, {
                "@type": "ListItem",
                "position": 4,
                "item": {
                    "@id": "https://example.com/category/subcategory/detail",
                    "name": "詳細記事"
                }
            }]
        }
    </script>

scriptはheadでもbodyでもどこでも大丈夫です。

リッチリザルトテストをして確認しよう

実装できたら、テストをしましょう。

リッチリザルトテストを行えばOKです。

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】

以下のように有効なアイテムとして「パンくずリスト」が検出されれば成功です。

パンくずリストのHTMLでの書き方【構造化データとリッチスニペットやSEOについても解説】
しょーご

既存サイトも検査にかけられるので、試してみましょう。

パンくずリストは構造化データに対応させよう

今回の記事では「HTMLで構造化データに対応したコードを元に解説」していき、最終的に自分のサイトに導入できるまでのレベルを目指しました。

実際の制作ではパンくずは自動生成することが多いと思うので、HTMLで一つ一つ書く機会は多くないかもしれませんが、構造化データは対応方法を知らないと大変になります。

今回の記事を参考に、サイト制作の際に構造化データ対応を実践していただければと思います。

しょーご

私の出しているコーディング演習課題でも、構造化データに対応させてみてくださいね!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

あなたに是非読んでほしい記事です!
});