![パンくずリストとは?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万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR
最新の記事一覧
7割の人にとって味が最も重要!?エナジードリンクのアンケート調査結果をご紹介!
アンケート・調査結果
副業で5万円以上稼ぐ人は15%しかいない?副業の実態について調査しました!
アンケート・調査結果
53%の人は最後に浴衣を着てから5年以上経った?!浴衣の実態を徹底調査!
アンケート・調査結果
約82%の人が部屋着のズボンを履いてテレワークをしている!テレワークの現状を調査しました!
アンケート・調査結果
「1杯目はビール!」は約6割しかいない!?お酒についてアンケート調査しました!
アンケート・調査結果
企画書とは?目的や作り方、おすすめのテンプレートを紹介
マーケティング
取引や計算で使われるグロスとは?使用例や注意点を徹底解説!
マーケティング
「スーパーフレックス制度」とは?導入に向けて注意する点を解説!
マーケティング
ペルソナ設定とは?目的と作り方、注意点について徹底解説!
マーケティング
視聴者を魅了し続ける冠番組とは?成功している冠番組の特徴を解説
ビジネス
有名企業のペルソナマーケティング事例5選!何に活用できるか解説
マーケティング
破ると法律違反になるステマとは?過去のステマ事件や対策を紹介
マーケティング
多くの市場で危惧されるコモディティ化とは?コモディティ化対策5選
マーケティング
社会に影響を与えるマスメディアとは?影響力やリスクについて解説
マーケティング
カーボンニュートラルとは?実現のための取り組みや課題も解説
ビジネス
ネゴシエーションとは?ビジネスにおける意味と成功のポイントを解説
ビジネス
音声SNSとは?注目される理由やメリットを解説【アプリも紹介】
ディスプレイ広告
オーガニックサーチとは?広告なしで質の高い集客を実現できる!
SEO
問題解決フレームワークの活用法は?使用するメリットや注意点も解説
ビジネス
ブランドロイヤリティとは?顧客ロイヤリティとの違いを解説
広報・PR