.png?w=1200&fm=webp)
SEO
更新日: 2024/11/22
【イラスト付き】パンくずリストとは?HTMLの書き方も解説!

ねえねえ
?


パンくずリストを構造化マークアップしないといけないって聞いたことあるんだけど、どういうことなの?

そもそもパンくずリストってなに??
あー。。。

それじゃあ今回は、パンくずリストとはなにかを紹介するね

パンくずリストとは?

パンくずリストとは、ウェブサイト上での現在地を表すものだよ

例えば、このサイトだと、
.png?w=1200&fm=webp)

上画像の青枠で囲ってある箇所を、パンくずリストって呼ぶよ!

パンくずリストがあることで、ユーザーにとって「このページの上位に当たるページは◯◯で、さらに上位に当たるページは△△で、、、」って伝えることができるんだよ
ってことは、上画像の青枠だと「HOME」が一番上位で、その下に「SEO」があって、その下に「ランディングページとは?改善方法も丁寧に解説!」がついてるってこと??


そうそう、そういうことだよ!
パンくずリストはSEOに効果がある?

パンくずリストは、SEOにとってかなり重要なんだよ

今回は2つのSEOへのプラスの効果を紹介するね
SEOのメリット1.内部リンクでページを見つけやすい


パンくずリストによるSEO効果の1つ目は、内部リンクがあることでGoogleがページを見つけやすくなることだね

Googleは、ページ同士のリンクによって、新しいページを見つけることができるんだよ

パンくずリストにはリンクが付くから、Googleにとって、新しいURLを見つけられるんだよねー
SEOのメリット2.サイトの構造を把握できる


パンくずリストによるSEO効果の2つ目は、Googleがサイトの構造を把握できることだね

どのページがどのページを親として紐づいているのかは、Googleがそのサイトにおけるページの重要度を理解するのに重要なんだ

だから、サイトの構造を伝えることができるパンくずリストは、SEOにとってかなり重要なんだよ

それ以外にも、内部リンクで評価がリンク先に行くっていう観点でも重要だね!
パンくずリストをGoogleに伝えるには?HTMLではどう書けば良い?

次に、パンくずリストの実装方法を紹介するね

パンくずリストをHTMLで書いて、Googleに伝えるには2つの実装方法があるんだ
パンくずリストの伝え方1.JSON-LD

パンくずリストをGoogleに伝える1つ目の方法は、JSON-LD方式だよ

JSON-LD方式だと、ページに表示されずに、構造化データをGoogleに伝えることができるんだ

例えば、このサイトで言うと、
.png?w=1200&fm=webp)

青枠で囲まれているようなパンくずリストがあるとするでしょ?

これを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>

っていうコードを、HTMLのheadタグに入れればマークアップ完了だよ

itemListElementの中に、パンくずリストの数だけListItemを入れるんだよねー
パンくずリストの伝え方2.microdata

パンくずリストをGoogleに伝える2つ目の方法は、microdata方式だよ

microdata方式だと、ページに表示されるパンくずリストに手を加えて、構造化データをGoogleに伝えることができるんだよ

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>

こんな感じになるんだよ

完全に私の意見だけど、見やすさ的に、JSON-LD方式の方が好きかなぁ。。。
まとめ

それじゃあパンくずリストについてまとめると、、、
まとめ
◆パンくずリストとは、ウェブサイト上での現在地を表すもの
◆パンくずリストがあることで、SEO的に「Googleがページを見つけやすくなる」「サイトの構造を把握できて、どのページが重要なのかを把握できる」という2つのメリットがある
◆パンくずリストは、JSON-LDかmicrodataで構造化マークアップして、Googleに伝えることができる

うん、こんな感じだね!
パンくずリストってSEOに重要な要素なんだね〜

パンくずリストの構造化マークアップの書き方も分かったし、実装してみるね!


はーい、がんばってね〜
最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO



最新の記事一覧
マークアップとは?正しい意味を解説!基本的なHTMLタグも
SEO
サイトスピードの重要性は?おすすめの改善方法5選も紹介!
SEO
カーディナリティの意味や重要性は?初心者向けに分かりやすく解説
SEO
インバウンド集客のメリットは?効果的な施策やコツを紹介!
SEO
ページエクスペリエンスアップデートの内容は?変更点や影響を解説
SEO
ランキングファクターとは?検索順位をアップするためのポイント
SEO
Webマーケティングとは?種類と実践例をわかりやすく解説!
マーケティング
オウンドメディアの作り方とは?最初に決めるべきことを解説!
SEO
マーケティング分析とは?手法と成功のポイントを徹底解説
SEO
SEOタグとは何?種類や活用方法をわかりやすく解説!
SEO
トラフィックシェアとは?基本から活用法まで徹底解説!
SEO
ページ内リンクとは?必要性や設定方法も初心者向けに詳しく説明!
SEO
【歯医者のSEO対策】ホームページ制作で注意すべきポイントを紹介
SEO
学習塾のSEO対策まとめ!失敗しないための注意点も紹介
SEO
不動産のSEO対策は何をすべき?キーワード選びのポイントも解説
SEO
aタグとは?Webページを繋ぐ架け橋の使い方を徹底解説!
SEO
ページがフリーズする原因と対策とは?ブラウザ環境を快適にしよう!
SEO
要約とは?正しい意味や文章を要約する手順・コツを紹介
SEO
文章の書き方やコツを徹底解説!簡潔で分かりやすい文章とは?
SEO
検索エンジンのランキングは?世界と国内のシェア率を比較
SEO