【イラスト付き】パンくずリストとは？HTMLの書き方も解説！

ねえねえ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

こんな感じになるんだよ

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

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

うん、こんな感じだね！

はーい、がんばってね〜