パンくずリストとは?HTMLの書き方も解説!のアイキャッチ画像

SEO

更新日: 2023/11/27

パンくずリストとは?HTMLの書き方も解説!

character_balloon

ねえねえ

character_balloon
character_balloon

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

character_balloon

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

あー。。。

character_balloon

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

character_balloon

パンくずリストとは?

character_balloon

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

character_balloon

例えば、このサイトだと、

パンくずリストとは?HTMLの書き方も解説!の画像_3枚目
character_balloon

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

character_balloon

パンくずリストがあることで、ユーザーにとって「このページの上位に当たるページは◯◯で、さらに上位に当たるページは△△で、、、」って伝えることができるんだよ

ってことは、上画像の青枠だと「HOME」が一番上位で、その下に「SEO」があって、その下に「ランディングページとは?改善方法も丁寧に解説!」がついてるってこと??

character_balloon
character_balloon

そうそう、そういうことだよ!

パンくずリストはSEOに効果がある?

character_balloon

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

character_balloon

今回は2つのSEOへのプラスの効果を紹介するね

SEOのメリット1.内部リンクでページを見つけやすい

パンくずリストとは?HTMLの書き方も解説!の画像_7枚目
character_balloon

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

character_balloon

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

character_balloon

パンくずリストにはリンクが付くから、Googleにとって、新しいURLを見つけられるんだよねー

SEOのメリット2.サイトの構造を把握できる

パンくずリストとは?HTMLの書き方も解説!の画像_9枚目
character_balloon

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

character_balloon

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

character_balloon

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

character_balloon

それ以外にも、内部リンクで評価がリンク先に行くっていう観点でも重要だね!

パンくずリストをGoogleに伝えるには?HTMLではどう書けば良い?

character_balloon

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

character_balloon

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

パンくずリストの伝え方1.JSON-LD

character_balloon

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

character_balloon

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

character_balloon

例えば、このサイトで言うと、

パンくずリストとは?HTMLの書き方も解説!の画像_14枚目
character_balloon

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

character_balloon

これをJSON-LD方式で構造化マークアップしてあげると、、、

パンくずリストをJSON-LD方式で構造化マークアップする場合
<script type="application/ld+json">
{
"@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

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

character_balloon

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

パンくずリストの伝え方2.microdata

character_balloon

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

character_balloon

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

character_balloon

microdata方式で、直接このコードに構造化データを盛り込むと、

パンくずリストをmicrodata方式で構造化マークアップする場合
<div itemscope itemtype="http://schema.org/BreadcrumbList">
<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

こんな感じになるんだよ

character_balloon

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

まとめ

character_balloon

それじゃあパンくずリストについてまとめると、、、

まとめ

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


◆パンくずリストがあることで、SEO的に「Googleがページを見つけやすくなる」「サイトの構造を把握できて、どのページが重要なのかを把握できる」という2つのメリットがある


◆パンくずリストは、JSON-LDかmicrodataで構造化マークアップして、Googleに伝えることができる

character_balloon

うん、こんな感じだね!

パンくずリストってSEOに重要な要素なんだね〜

character_balloon

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

character_balloon
character_balloon

はーい、がんばってね〜

character_balloon

ブルー

SEO
マーケティングオートメーション(MA)
アフィリエイト
wordpress

SEOやエンジニアリングマーケティングが得意。非常にめんどくさがりで、動きたくないがために自分でコードを書いて自作のMAを組んだりする。自動化のためなら努力は惜しまない。

最新の記事一覧
最新の記事一覧