パンくずリストって何？あと、構造化データに対応しなきゃいけないらしいけど、よくわからないので、コードの書き方を教えて欲しい。
あとSEOでもパンくずリストが重要みたいだけど、本当なの？
こんな疑問に答えます。
パンくずリストはLPなどペライチじゃない限りは、基本的にどんなサイトにも必要です。
よって暗黙の了解的に色んなサイトに導入されていますが、構造化データに対応していないと検索結果にリッチスニペットとして表示することができないので、SEOでも重要になってきます。
今回の記事では「HTMLで構造化データに対応したコードを元に解説」していき、最終的に自分のサイトに導入できるまでのレベルを目指します。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
パンくずリストとは？
パンくずリストは簡単に言えば、今見ているページのサイト内での位置を分かりやすく表したナビゲーションリンクと言えます。
このサイトにも記事下部に設置されています。
私がこの業界に入った時に、ハンバーガーとパンくずに関しては最初本当に意味が不明でした。
パンくずは、ヘンゼルとグレーテルが元になっています。
パンくずは道しるべ。ユーザーがサイト内で迷子にならないための施策なのです。
パンくずリストの役割
パンくずリンクを設置するのは、以下のようなメリットがあるからです。
- ナビゲーションのサポート: パンくずリストは、ユーザーに現在のページの位置を示し、ウェブサイトの他のセクションに簡単にアクセスできるような補助になります。
- サイトの構造の説明: パンくずリストは、サイトの階層構造を視覚的に表示し、ユーザーにその構造を理解する手助けをします。
- SEOの強化: 検索エンジンはパンくずリストを利用してサイトの構造を理解し、検索結果においてパンくずリストを表示することがあります。これにより、ウェブページの検索エンジンのランキングが向上する可能性があります。
- ユーザーエクスペリエンスの向上: パンくずリストは、ユーザーが迷子にならないようにし、必要な情報を迅速に見つけるのに役立ちます。
- 戻るナビゲーションの簡素化: パンくずリストにより、ユーザーはブラウザの戻るボタンを使用することなく、前のセクションやホームページに簡単に戻ることができます。
ユーザーに視覚的に分かりやすいのもそうですが、Googleのクローラーなども適切にWebサイトの構造を理解できるようになるので、現代のSEO上必須とも言えます。
構造化データとパンくずリストの関係
構造化データとは何なのか？
構造化データは、ウェブページのコンテンツを機械可読な形式でマークアップする方法です。
これにより、検索エンジンや他のアプリケーションはウェブページの内容を正確に理解し、それを適切にインデックスし、表示することができます。
例えば下記は適切にパンくずをマークアップした際に現れるパンくずのリッチスニペットです。
「検索一覧での自社メディアの表示情報を多くできる→検索流入が増える」ということで、対応が推奨されています。
リッチスニペットに関してはGoogle公式が種類をまとめています。
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の二種類がある
- Microdata: Microdataは、HTMLタグに属性を追加することで、ウェブページのコンテンツにメタデータを埋め込む方法を提供するHTML仕様。
- 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>リッチリザルトテストをして確認しよう
実装できたら、テストをしましょう。
リッチリザルトテストを行えばOKです。
以下のように有効なアイテムとして「パンくずリスト」が検出されれば成功です。
既存サイトも検査にかけられるので、試してみましょう。
パンくずリストは構造化データに対応させよう
今回の記事では「HTMLで構造化データに対応したコードを元に解説」していき、最終的に自分のサイトに導入できるまでのレベルを目指しました。
実際の制作ではパンくずは自動生成することが多いと思うので、HTMLで一つ一つ書く機会は多くないかもしれませんが、構造化データは対応方法を知らないと大変になります。
今回の記事を参考に、サイト制作の際に構造化データ対応を実践していただければと思います。
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
