パンくずリストの作り方～microdata サンプル

Web サイトに「パンくずリスト」（英語 : BreadcrumbList）を SEO 対策／構造化データとして追加する方法について、HTML, CSS サンプルコードを極力シンプルな形式（microdata）でご紹介いたします。

※参考サイトは最下部にまとめております。

パンくずリストとは？

パンくずリストとは、Web サイト内の特定のページが Web サイト全体の階層構造のうち、どの階層にあるか？を指し示すリスト形式のインデックスのことです。

英語で BreadcrumbList と言います。

例.

「趣味 > スポーツ > ジョギング」
「葛西 > グルメ > イタリアン」など

SEO 対策として

なぜパンくずリストを設置するのか？というと、大きく２つの理由がある…と言われています。

１つ目は、ユーザーが今 Web サイトの全体像を把握しやすいように、また今閲覧しているページが全体の中のどこに位置するのか？を視覚的に理解できるようにするため。２つ目は、Google 検索エンジンに対する SEO 対策として。

なぜ SEO 対策になるかと言うと、Google が「パンくずリスト」を構造化データとして明確に定義し推奨しているからです。つまり対応することで SEO 対策になる と考えられます。

パンくずリスト｜Google 検索セントラル
https://developers.google.com/search/docs/advanced/structured-data/breadcrumb?hl=ja

構造化データとは？

そもそも HTML 自体が構造化されているので、混乱しやすいのですが、HTML による「デザイン性」の定義（h1、ul、p、select…）に加えて HTML5 でのテキストの「意味あい」までもより明確に定義したものを差します。

HTML5 の section タグや article タグがそれにあたります。

microdata 形式でシンプルに導入する

JSON-LD を使用した書き方、RDFa を使用した書き方、microdata を使用した書き方…等いくつかの方法がありますが、最も一般的で馴染みの良いのは microdata を使用した書き方 です。この手法は HTML5 に沿ってコーディングできるため導入・運用が最もシンプルであると言えます。

HTML サンプル

パンくず “リスト” というくらいですから、<ol> を使って作ります。こんな感じです…

※なぜ <ul> じゃないのか？と思う方もいらっしゃると思いますが、Google 検索セントラルのサンプルには <ol> が使われており、おそらく一つ一つのリストに番号が付けられているため…と考えられます。

<ol>
	<li>趣味</li>
	<li>スポーツ</li>
	<li>ジョギング</li>
</ol>

CSS サンプル

上記を表示すると、そのまま縦に並んでしまうのですが、パンくずリストは一般的に横並びで「大なり記号（＞）」でつないでいくので … CSS はこんな感じになります…

ol li {
	display: inline;
}
ol li:after {
	color: hsl(0, 0%, 62%); 
	content: " > ";
}
ol li:last-child:after {
	content: ""; 
}

HTML サンプル (microdata)

上記のままでもユーザーにとっては立派な「パンくずリスト」になりますが、Google 検索エンジンでは Google の指定するプロパティを上記 HTML に追加指定することで、Google 検索結果にもそのパンくずリストが反映される…美しい Web ページ連携を実現させることができます。

以下のように <li> タグごとにプロパティ等を追記していきます…

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href=''>
			<span itemprop="name">趣味</span>
		</a>
		<meta itemprop="position" content="1" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<a itemprop="item" href=''>
			<span itemprop="name">スポーツ</span>
		</a>
		<meta itemprop="position" content="2" />
	</li>
	<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
		<span itemprop="name">ジョギング</span>
		<meta itemprop="position" content="3" />
	</li>
</ol>

※このコードは Google 検索セントラルのページを見ながら作ったのですが、meta タグの最後に “/” が書いてあるのですね…

Google Search Console – URL 検査

ページを改修したら Google Search Console – [URL 検査] で当該 URL を検査し [公開 URL をテスト] をクリックしてテストします。
問題なく「URL は Google に登録できます」と表示されたら [インデックス登録をリクエスト] をクリックします。