SEOに関する実験やデータ分析などを公開します

SEOの疑問を実験で解明しブログ配信【SEOラボ】

パンくずリストの作り方を覚えよう

2018/05/15 2018/09/28

パンくずリストの作り方を覚えて、ユーザーの利便性を高めながら、SEOを意識したサイト運用をすることが大切です。

今回は、パンくずリストの作り方をHTML5とCSSのデザインサンプルを用いて、パターン別に解説したいと思います。

パンくずリストの作り方(※HTML5とCSSのデザインサンプル有)

パンくずリストの作り方(※HTML5とCSSのデザインサンプル例)

パンくずリストの作り方は、主にHTML5とCSSを使って記述し、以下のようにデザインします。

※このデザインでは、Webアイコンフォントを表示するため「Font Awesome」のCSSコードを別途HTMLファイルのheadタグ内に設置してます。

一般的な記述

一般的な記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストの一般的な記述のデザイン表示例

このように、リストタグ「ul」「ol」「li」でマークアップし、HTMLを記述することがGoogle公式でも以下のように定義されてます。

※引用元:Breadcrumb | Search | Google Developers

構造化データを用いた記述

構造化データを用いた記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストの構造化データを用いた記述のデザイン表示例

このように、構造化データを用いたマークアップは推奨されており、Google公式で以下のように言及してます。

パンくずリストを表示する場合は、パンくずリストの構造化データ マークアップを使用することをおすすめします。

※引用元:検索エンジン最適化(SEO)スターター ガイド – Search Console ヘルプ

また、構造化データは、シンタックスと呼ばれる以下の記述方法から選択でき、それぞれ公式にパンくずリストの記述例が紹介されます。

JSON-LD

「JSON-LD」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

JSON-LDは、最も推奨される構造化データであることが以下のように公式に言及されてます。

Google recommends using JSON-LD for structured data whenever possible.

※引用元:Introduction to Structured Data | Search | Google Developers

翻訳すると、

可能であれば、JSON-LDを構造化データとして使用することをおすすめします。

このことから、サイトの運用上支障がなければ、JSON-LDによる構造化データを用いたパンくずリストを作成し、デザインするとよいでしょう。

microdata

「microdata」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

このように、HTMLの要素に直接記述できる「microdata」は、構造化データを用いたパンくずリストとして導入しやすいです。

また、当ブログ「SEOラボ」でも、microdataの構造化データでパンくずリストをマークアップし、デザインしてます。
※参考:構造化データを用いた記述

RDFa (RDFa Lite)

「RDFa (RDFa Lite)」の構造化データを用いると、以下のようなパンくずリストの記述となります。

※引用元:Breadcrumb | Search | Google Developers

このように、HTMLの要素に直接記述できる「RDFa (RDFa Lite)」は、「microdata」と同様、構造化データを用いたパンくずリストとして導入しやすいです。

構造化データを用いたパンくずリスト記述のポイント Google公式の構造化データを用いて正しくマークアップし、ユーザーや検索エンジンによりわかりやすくサイト構造を明示しながら、パンくずリストを使いましょう。

スマホサイト向けの記述

スマホ向けに記述をすると、以下のようなパンくずリストとなります。

HTML記述例

CSS記述例

デザイン表示例

パンくずリストのスマホサイト向けの記述のデザイン表示例

このように、横スクロール型で表示させ、1行分のスペースに収めて、スマホ向けのパンくずリストを表示させてます。
カテゴリが増えて長くなっても、1行分のスペースで収まりかつ、スクロールすることですべて閲覧できるので、利便性を考慮したパンくずリストが提供できます。

スマホ向けにCSSを記述するには、以下関連記事をご参照ください。

今回紹介したようなパンくずリストの作り方を意識し、利便性を考慮しながら実装しましょう。

ただ作るのではなく、検索エンジンに認識されやすく、ユーザーにとって使いやすいパンくずリストにしながら、利便性の高いサイトに仕上げましょう。

関連記事SEOにおけるパンくずリストとは?

SEOラボのおすすめ記事がLINEに届く!「SEOラボを友だち追加する」

カテゴリから記事を探す

SEO対策無料ご提案はこちら