検索エンジンに正しく伝わるパンくずリストと構造化データの作り方
パンくずリストとは
まず最初に、パンくずリストとは何の事かについて解説します。
おそらく、皆さんもよく見かけるものかもしれません。
パンくずリストとは、現在見ているページがどの階層に位置するかを示すリストの事を言います。
サイト全体で見た時に、現在のページとその他ページとの関係性を階層で表現することで、サイト全体の構造を示す事が出来ます。
- パンくずリストが必要な理由
-
パンくずリストは、利用者にとってサイト全体のページ構造を効率的に理解できるように、手助けをする目的で使われます。
例えば、上の図のようにサイト全体で5つのページがある場合で、現在見ているページがDesertの場合を考えてみます。
現在見ているDesertのページの上位のページはTopとServiceの2つ存在します。
その場合のページの関係性は、Top>Service>Desertの順番で、階層化されたページ構成だと分かります。
このように、現在見ているページから、上位のページに簡単にアクセスが出来るため、目的のページを探しやすくなるというメリットがあります。
- パンくずリストの種類
-
パンくずリストには、利用者側と検索エンジン側の2種類の方法があります。
利用者側では、HTMLとCSSでデザインを作ってそのページの階層を表現します。
また、HTMLとCSSで表現されたパンくずリストは、検索エンジンは認識が出来ません。
そのため、検索エンジン側では別でJSON-LDと呼ばれる記載方法でページの階層構造を伝えます。
サイト内のページ数が多くなるほど、利用者は目的のページを探すのが大変になります。
ページが階層化されていれば、簡単にページをさかのぼることができるようになります。
パンくずリストの作成
パンくずリストを実際に作っていきましょう。
利用者側と検索エンジン側の2つに分けて、パンくずリストを作成していきます。
リストデザインの作成
<li><a href="/service/">サービス</a></li>
<li><a href="/service/desert/">デザート</a></li>
.breadcrumblist ul {
align-items: center;
gap: 10px;
list-style: none;
padding: 8px 12px;
margin: 0;
color: white;
background: #00263f;
.breadcrumblist li {
align-items: center;
.breadcrumblist li::after {
margin-left: 10px;
.breadcrumblist li:last-child:after {
.breadcrumblist a {
利用者が見れるパンくずリストを作成します。
作成方法はHTMLとCSSのみで、ページのリンクを含めたリストを作成していきます。
- ファイル構造とパンくずリスト
-
今回は、上の図のように3つのHTMLファイルを構造化して、パンくずリストを作成していきます。
トップページが最上位のページになり、下層ページとしてサービスやデザートのページに階層が分かれている構造を想定します。
- トップページのリスト
-
トップページは最上位のページになるので、トップページのリンクをリストで表示します。
また、トップページの場合はパンくずリストを表示するメリットはあまりない場合もあるかと思います。
その場合は、トップページのみパンくずリストを表示しないという選択も可能です。
<div class="breadcrumblist"><ul></div><li><a href="/">トップ</a></li></ul> - 下層ページのリスト
-
下層ページのサービスページは、トップページから見て1つ下のページになります。
この場合のパンくずリストは、階層順の「トップ」「サービス」の順番になるように、2つのリンクをリストで表示します。
<div class="breadcrumblist"><ul></div><li><a href="/">トップ</a></li></ul>
<li><a href="/service/">サービス</a></li> - 深い下層ページのリスト
-
深い下層ページのデザートページは、トップページから見て2つ下のページになります。
この場合のパンくずリストは、階層順の「トップ」「サービス」「デザート」の順番になるように、3つのリンクをリストで表示します。
<div class="breadcrumblist"><ul></div><li><a href="/">トップ</a></li></ul>
<li><a href="/service/">サービス</a></li>
<li><a href="/service/desert/">デザート</a></li>
- パンくずリストのデザイン
-
パンくずリストの基本的なデザインは、要素を横並びにしてリストの間に「>」を挿入します。
リストの間の「>」は、擬似要素のAfter要素で作成します。
最後のリストの直後は「>」はいらないので、最後のリストの場合は擬似要素を表示しないようにします。
.breadcrumblist ul {display: flex;}
align-items: center;
gap: 10px;
list-style: none;
.breadcrumblist li {display: flex;}
align-items: center;
.breadcrumblist li::after {content: '>';}
margin-left: 10px;
.breadcrumblist li:last-child:after {display: none;}
これで、利用者側のパンくずリストの作成が完了しました。
パンくずリストのデザインは自由に決めても大丈夫です。
続いては、検索エンジンに伝えるための構造化データも作成してみましょう。
構造化データの作成
検索エンジンに階層構造を伝えるためのパンくずリストを作成します。
作成方法はHTMLファイルのheadタグの中に、上の図のようなJavaScriptを使用した「JSON-LD」のコードを記述します。
参考ページ: Google 検索セントラル パンくずリスト
- 検索結果での見え方
-
パンくずリストの構造化データが作成されている場合は、検索結果では上の画像のように表示されます。
本サイトのWebデザインの教科書の「CSS 基本編」のページのでは、下記の構造化データが適切に認識されているため、検索結果にもパンくずリストが表示されています。
こういったように、検索エンジンにパンくずリストを適切に伝えることで、検索結果でもページ構造を利用者に知らせることが可能です。
ただし、正しくパンくずリストを作成していても、検索結果に表示されない事もあります。
検索結果にパンくずリストを表示するかは、検索エンジンに判断を任せることになるので、反映に時間がかかったり表示されない場合があります。
<head><script type="application/ld+json"></head>{</script>}"@context": "https://schema.org","@type": "BreadcrumbList","itemListElement": [{},{"@type": "ListItem","position": 1,"name": "Webデザインの教科書","item": "https://web-design-textbook.com/"}]"@type": "ListItem","position": 2,"name": "CSS 基本編","item": "https://web-design-textbook.com/css-basic/" - パンくずリストの基本構造
-
構造化データの作成は、HTMLファイルのheadタグの中に記述します。
HTMLのscriptタグを使用して、JSON-LDで構造化データを記述するのが基本的な書き方です。
- JSON-LD
-
構造化データの記述方法はいくつかありますが、その中で一番シンプルに記述ができるのが「JSON-LD」という記述方法です。
JavaScriptを使用して記述ができて、比較的少ない記述量で作成が可能です。
JSON-LDで記述する場合は、上の図のようにHTMLのscriptタグに「type="application/ld+json"」を追加します。
- schema.org
-
構造化データを作成する上で、必要になるのが「schema.org」です。
この「schema.org」が構造化をしてくれるので必ず記述しましょう。
- 構造化タイプ
-
構造化できるデータにはいくつか種類があるので、構造化させたいデータの種類を選択します。
- 今回はパンくずリストを作成したいので「BreadcrumbList」を選択します。
- ページの階層化
-
Webサイト全体でページの位置付けを設定するため、ページの階層化を行います。
トップページから特定のページまでに位置づけを決めて、トップページから辿り着くまでの経路を「itemListElement」の中に記述していきます。
上の図のように3つのHTMLファイルを構造化して、パンくずリストを作成していきます。
各ページのHTMLファイルの中に、ページの位置づけを示すための階層構造のデータを作成します。
- トップページの階層化
-
トップページは最上位のページになるので、階層構造の1番目に位置づけをします。
トップページの場合は「name」の値にサイト名を記述して、「item」の値はhttpsから始まるサイトのURLを記述します。
<script type="application/ld+json">{</script>}"@context": "https://schema.org","@type": "BreadcrumbList","itemListElement": [{}]"@type": "ListItem","position": 1,"name": "ヒツジのサイト","item": "https://sheep.com/" - 下層ページの階層化
-
下層ページの場合は、トップページから見た位置づけを設定します。
上のようなサービスページの場合は、トップページから1つ下の階層に位置するので、階層構造は2番目に位置づけをします。
下層ページの場合は「name」の値はそのページの項目名やカテゴリ名を記述して、「item」の値はそのページのhttpsから始まるURLを記述します。
<script type="application/ld+json">{</script>}"@context": "https://schema.org","@type": "BreadcrumbList","itemListElement": [{},{"@type": "ListItem","position": 1,"name": "ヒツジのサイト","item": "https://sheep.com/"}]"@type": "ListItem","position": 2,"name": "サービス","item": "https://sheep.com/service/" - 深い下層ページの階層化
-
深い下層ページの場合も、トップページから見た位置付けを設定します。
そのページに辿り着くまでの経路を示すように、ページの階層化を行います。
上のデザートページの場合は、トップページからサービスまでの経路の先に位置するので、階層構造は3番目に位置づけをします。
<script type="application/ld+json">{</script>}"@context": "https://schema.org","@type": "BreadcrumbList","itemListElement": [{},{"@type": "ListItem","position": 1,"name": "ヒツジのサイト","item": "https://sheep.com/"},{"@type": "ListItem","position": 2,"name": "サービス","item": "https://sheep.com/service/"}]"@type": "ListItem","position": 3,"name": "デザート","item": "https://sheep.com/service/desert/"
これで利用者側と検索エンジン側の2つのパンくずリストの作成が完了しました。
最後に、作成した構造化データが正しく認識可能か確認してみましょう。
パンくずリストの確認
パンくずリストの作成後、ぜひこちらの方法を試してみてください。
簡単にパンくずリストの確認できるのでおすすめです。
<li><a href="/service/">サービス</a></li>
<li><a href="/service/desert/">デザート</a></li>
.breadcrumblist ul {
align-items: center;
gap: 10px;
list-style: none;
padding: 8px 12px;
margin: 0;
color: white;
background: #00263f;
.breadcrumblist li {
align-items: center;
.breadcrumblist li::after {
margin-left: 10px;
.breadcrumblist li:last-child:after {
.breadcrumblist a {
- リッチリザルトテスト
-
パンくずリストを作成後は、Googleが提供するリッチリザルトテストを行いましょう。
構造化データがどのように認識されるのか、もしくは正しく認識できるかを簡単に確認が出来ます。
画面内の「<> コード」の中に、作成したHTMLコードを貼り付けをして「コードをテスト」を押します。
正しく記述されている場合は、認識可能なパンくずリストが表示されます。
以上でパンくずリストの作成及び確認方法の解説は終了です。
慣れるまでは難しいと思いますが、ぜひ挑戦してみてください。
パンくずリストについて紹介します。
パンの残りものについてのお話ではなく、ちゃんとしたWebのお話です。
それではいってみましょう！