![パンくずリストとは?HTMLの書き方も解説!のアイキャッチ画像](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/3f7cc240a2a54783a8d18dff8262384b/Group%20241%20(1).png?w=1200&fm=webp)
SEO
更新日: 2023/11/27
パンくずリストとは?HTMLの書き方も解説!
![character_balloon](/media/character/yellow_sigh_left.png)
ねえねえ
?
![character_balloon](/media/character/blue_question_right.png)
![character_balloon](/media/character/yellow_question_left.png)
パンくずリストを構造化マークアップしないといけないって聞いたことあるんだけど、どういうことなの?
![character_balloon](/media/character/yellow_question_left.png)
そもそもパンくずリストってなに??
あー。。。
![character_balloon](/media/character/blue_worry_right.png)
それじゃあ今回は、パンくずリストとはなにかを紹介するね
![character_balloon](/media/character/blue_sigh_right.png)
パンくずリストとは?
![character_balloon](/media/character/blue_confidence_left.png)
パンくずリストとは、ウェブサイト上での現在地を表すものだよ
![character_balloon](/media/character/blue_normal_left.png)
例えば、このサイトだと、
![パンくずリストとは?HTMLの書き方も解説!の画像_3枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/cfaed02f877c4230803bfc8f67a8b7da/Group%20241%20(2).png?w=1200&fm=webp)
![character_balloon](/media/character/blue_confidence_left.png)
上画像の青枠で囲ってある箇所を、パンくずリストって呼ぶよ!
![character_balloon](/media/character/blue_confidence_left.png)
パンくずリストがあることで、ユーザーにとって「このページの上位に当たるページは◯◯で、さらに上位に当たるページは△△で、、、」って伝えることができるんだよ
ってことは、上画像の青枠だと「HOME」が一番上位で、その下に「SEO」があって、その下に「ランディングページとは?改善方法も丁寧に解説!」がついてるってこと??
![character_balloon](/media/character/yellow_question_right.png)
![character_balloon](/media/character/blue_smile_left.png)
そうそう、そういうことだよ!
パンくずリストはSEOに効果がある?
![character_balloon](/media/character/blue_normal_left.png)
パンくずリストは、SEOにとってかなり重要なんだよ
![character_balloon](/media/character/blue_smile_left.png)
今回は2つのSEOへのプラスの効果を紹介するね
SEOのメリット1.内部リンクでページを見つけやすい
![パンくずリストとは?HTMLの書き方も解説!の画像_7枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/411541ddfea4407e886f3e3fbbac8ac8/%E8%A8%98%E4%BA%8B17_001.jpg?w=1200&fm=webp)
![character_balloon](/media/character/blue_confidence_left.png)
パンくずリストによるSEO効果の1つ目は、内部リンクがあることでGoogleがページを見つけやすくなることだね
![character_balloon](/media/character/blue_confidence_left.png)
Googleは、ページ同士のリンクによって、新しいページを見つけることができるんだよ
![character_balloon](/media/character/blue_happy_left.png)
パンくずリストにはリンクが付くから、Googleにとって、新しいURLを見つけられるんだよねー
SEOのメリット2.サイトの構造を把握できる
![パンくずリストとは?HTMLの書き方も解説!の画像_9枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/5013fe13287741988052b35f2f2edf65/%E8%A8%98%E4%BA%8B17_002.jpg?w=1200&fm=webp)
![character_balloon](/media/character/blue_smile_left.png)
パンくずリストによるSEO効果の2つ目は、Googleがサイトの構造を把握できることだね
![character_balloon](/media/character/blue_confidence_left.png)
どのページがどのページを親として紐づいているのかは、Googleがそのサイトにおけるページの重要度を理解するのに重要なんだ
![character_balloon](/media/character/blue_happy_left.png)
だから、サイトの構造を伝えることができるパンくずリストは、SEOにとってかなり重要なんだよ
![character_balloon](/media/character/blue_smile_left.png)
それ以外にも、内部リンクで評価がリンク先に行くっていう観点でも重要だね!
パンくずリストをGoogleに伝えるには?HTMLではどう書けば良い?
![character_balloon](/media/character/blue_smile_left.png)
次に、パンくずリストの実装方法を紹介するね
![character_balloon](/media/character/blue_happy_left.png)
パンくずリストをHTMLで書いて、Googleに伝えるには2つの実装方法があるんだ
パンくずリストの伝え方1.JSON-LD
![character_balloon](/media/character/blue_confidence_left.png)
パンくずリストをGoogleに伝える1つ目の方法は、JSON-LD方式だよ
![character_balloon](/media/character/blue_normal_left.png)
JSON-LD方式だと、ページに表示されずに、構造化データをGoogleに伝えることができるんだ
![character_balloon](/media/character/blue_normal_left.png)
例えば、このサイトで言うと、
![パンくずリストとは?HTMLの書き方も解説!の画像_14枚目](https://images.microcms-assets.io/assets/849933361e3447368c1f885948b087dc/64be43e77cba4159a404da654731b263/Group%20241%20(2).png?w=1200&fm=webp)
![character_balloon](/media/character/blue_question_left.png)
青枠で囲まれているようなパンくずリストがあるとするでしょ?
![character_balloon](/media/character/blue_normal_left.png)
これをJSON-LD方式で構造化マークアップしてあげると、、、
{
"@context": "http://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"item": {
"@type": "Thing",
"@id": "https://www.msta.co.jp/",
"name": "トップページ"
}
},
{
"@type": "ListItem",
"position": 2,
"item": {
"@type": "Thing",
"@id": "https://www.msta.co.jp/media",
"name": "記事一覧"
}
},
{
"@type": "ListItem",
"position": 3,
"item": {
"@type": "Thing",
"@id": "https://www.msta.co.jp/media/landing-page",
"name": "ランディングページとは?改善方法も丁寧に解説!"
}
}
]
}
</script>
![character_balloon](/media/character/blue_confidence_left.png)
っていうコードを、HTMLのheadタグに入れればマークアップ完了だよ
![character_balloon](/media/character/blue_happy_left.png)
itemListElementの中に、パンくずリストの数だけListItemを入れるんだよねー
パンくずリストの伝え方2.microdata
![character_balloon](/media/character/blue_confidence_left.png)
パンくずリストをGoogleに伝える2つ目の方法は、microdata方式だよ
![character_balloon](/media/character/blue_confidence_left.png)
microdata方式だと、ページに表示されるパンくずリストに手を加えて、構造化データをGoogleに伝えることができるんだよ
![character_balloon](/media/character/blue_normal_left.png)
microdata方式で、直接このコードに構造化データを盛り込むと、
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="https://www.msta.co.jp/" itemprop="item">
<span itemprop="name">トップページ</span>
</a>
<meta itemprop="position" content="1" />
</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="https://www.msta.co.jp/media" itemprop="item">
<span itemprop="name">記事一覧</span>
</a>
<meta itemprop="position" content="2" />
</span>
<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a href="https://www.msta.co.jp/media/landing-page" itemprop="item">
<span itemprop="name">ランディングページとは?改善方法も丁寧に解説!</span>
</a>
<meta itemprop="position" content="3" />
</span>
</div>
![character_balloon](/media/character/blue_confidence_left.png)
こんな感じになるんだよ
![character_balloon](/media/character/blue_sigh_left.png)
完全に私の意見だけど、見やすさ的に、JSON-LD方式の方が好きかなぁ。。。
![character_balloon](/media/character/blue_normal_left.png)
それじゃあパンくずリストについてまとめると、、、
まとめ
◆パンくずリストとは、ウェブサイト上での現在地を表すもの
◆パンくずリストがあることで、SEO的に「Googleがページを見つけやすくなる」「サイトの構造を把握できて、どのページが重要なのかを把握できる」という2つのメリットがある
◆パンくずリストは、JSON-LDかmicrodataで構造化マークアップして、Googleに伝えることができる
![character_balloon](/media/character/blue_happy_left.png)
うん、こんな感じだね!
パンくずリストってSEOに重要な要素なんだね〜
![character_balloon](/media/character/yellow_inspiration_right.png)
パンくずリストの構造化マークアップの書き方も分かったし、実装してみるね!
![character_balloon](/media/character/yellow_smile_right.png)
![character_balloon](/media/character/blue_smile_left.png)
はーい、がんばってね〜
![character_balloon](/media/character/blue_writer.png)
ブルー
SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業収入が5万円以下の人は8割越え!?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!?テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業収入が5万円以下の人は8割越え!?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!?テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
広報戦略とは?必要な理由や策定方法、フレームワークを解説!
広報・PR
マテハンとは?初心者向けに意味を解説!マテハン機器の種類も紹介
ビジネス
デザイン経営とは?概要やメリット、取り組み方法を徹底解説
ビジネス
ミラーリング効果とは?ビジネスで信頼を深めるための方法を紹介
ビジネス
Z世代マーケティングの手法を紹介!Z世代の名前の由来や特徴も解説
マーケティング
サンクコスト効果の例は?意味やマーケティングへの活用例も解説
ビジネス