サイト運営・SEO対策

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

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

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

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

パンくずリストとは?

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

英語で BreadcrumbList と言います。

例.

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

SEO 対策として

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

1つ目は、ユーザーが 今 Web サイトの全体像を把握しやすいように、また 今閲覧しているページが全体の中のどこに位置するのか?を視覚的に理解できるようにするため。2つ目は、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 に登録できます」と表示されたら [インデックス登録をリクエスト] をクリックします。

参考サイト

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

COMMENT

メールアドレスが公開されることはありません。