パンくずリストの価値と位置 SEOに役立つ構造化データ

パンくずリストの価値と位置 SEOに役立つ構造化データ

構造化データで作るパンくずリストとSEO

#119 構造化データとパンくずリスト

WEB制作

構造化データという重要でややこしい仕組みの話とそれがSEOにどう関わるかを解説。 パンくずリストの価値とブログでのカテゴリ名の重要性など、ちょっとしたひと手間でSEOの評価が変わるポイントを解説しています。 ユーザーに何を伝えるかが重要

公開日:
最終更新日:

商品リンクにアフィリエイト広告を利用しています

サイトマップサイトマップ

パンくずリストの構造化データの作り方

パンくずリストの構造化は検索結果に表示されるので意外と重要です。

検索結果に表示されるパンくずリストから、なんとなくそこに書かれている内容が推測できるので、CTR(クリック率)に与える影響が考えられます。

パンくずリストのサンプル />
検索結果に表示されるパンくずリスト

カテゴリの階層が見えるので、自分の目的にあっているかが検索ユーザーに伝わると。

構造化データで書かれていないパンくずリストの場合、ここの表記がURLになって、日本語表記になりません。

パンくずリストの構造化データの作り方

検索結果にパンくずリストを表示させるには、構造化した情報をGoogleに渡す必要があります。
JSONで書くパターンと、Microdataで書くパターンの2種類があります。

Googleの推奨はJSONで書く方なのですが、Microdataの方が書きやすいので、私はMicrodataで書いています。
PHPでパンくずリスト作っていますが、マイクロデータの方がコーディングしやすいため。パンくずリストについては。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a href="https://www.start-point.net/" itemprop="item"><span itemprop="name">start-point</span></a><meta itemprop="position" content="1"></li>
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a href="https://www.start-point.net/syakai/" itemprop="item"><span itemprop="name">歴史・社会</span></a><meta itemprop="position" content="2"></li>
<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a href="https://www.start-point.net/syakai/ryouseikoku_list/" itemprop="item"><span itemprop="name">令制国一覧</span></a><meta itemprop="position" content="3"></li>
</ol>

使うタグは<ol>タグです。
OLタグは「Ordered List」の略で順序のあるリストを定義するタグのため、パンくずリストのように階層構造を伝えるにはこのタグが最適です。

GoogleのパンくずリストのタグサンプルもOLタグで作られています。

パンくずリストである宣言をする

OLタグに itemtype="http://schema.org/BreadcrumbList" と属性を指定します。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

itemscope という通常のHTMLコーディングでは使うことのない属性は、構造化データを作るために使う属性です。
次の itemtype="http://schema.org/BreadcrumbList" で、パンくずである宣言をします。

パンくずリストの階層構造を明記する

<ol>の次に<li>を記述して、パンくずリスト作っていきます。

<li itemscope itemprop="itemListElement" itemtype="http://schema.org/ListItem">
<a href="https://www.start-point.net/" itemprop="item">
<span itemprop="name">start-point</span>
</a>
<meta itemprop="position" content="1">
</li>

<li>の中身を改行して複数行に分けて書いてます。

パンくずの要素には「itemprop="itemListElement"」と記述します。
itemtypeは親要素のOLの時にitemtype="http://schema.org/BreadcrumbList"と書きましたが、<li>には「itemtype="http://schema.org/ListItem"」と記述します。

<li>の中にはリンク設定の<a>タグとパンくずの名称を伝えるための<span>を使っています。

aタグの設定

aタグの中は通常通りに記述し、「itemprop="item"」を付ければOKです。

spanタグで名前を設定する

<span>タグはHTMLの構造上は不要なんですが、名称を構造化するために必要なので、意味を持たないインライン要素であるspanタグを使います。

<span itemprop="name">パンくずとして表示する名前</span>とすることで、パンくずリストに表示する名前を定義しています。

metaタグで階層構造を伝える

<meta itemprop="position" content="1">でパンくずの階層構造を記述します。

一番左(root)から1、2、3と増やしていきます。

この要素を自分のいる階層と合わせて記述していけばパンくずリストの完了です。

パンくずリストができたら間違いないかチェック

構造化データを作ったら、間違いがないか、Googleの構造化データテストツールを使ってチェックします。

ページにいったら該当のURLを入力して、エラーなし、警告なしが確認できて、内容に問題がなければ完成です。

構造化テストツール
問題なしのキャプチャ

ユーザー目線でのパンくずリストの価値

パンくずリストの構造化はGoogleのSERPs(Search Engine Result Pages 検索結果の表示ページ)上の設定の話でした。

来訪してくれたユーザー目線で考えたときに、パンくずリストの役割ってなんだろうと考えると、似たようなカテゴリの記事をもっと読みたい、と思ったときに有効じゃないかと思うんですよね。

パンくずリストは上か下か 私は下にしてます

私の考えではページ上部にあるものは、来訪ユーザーにとってあまりリンクされないものと考えます。
目的の記事があって訪れてくれたのであれば、記事が始まる前のリンクなんてクリックしないだろうと。

そういう考えがあって、私は昔からパンくずリストはページの下部、フッターの上に設置しています。
記事を読み終わって、なんとなく下まで来たときにTOPページや、上の階層に遷移できるようにと。

これは個人の考えなので、「それが正解」という類のものではありません。

ただ、ページ制作者の考え通りにユーザは動いてくれませんからね。
もっとほかのページを見てほしいと思ってもすぐ帰ってしまうユーザーがほとんどです。

SEO上 カテゴリーの名称が重要

構造化データに表記される名称はそのカテゴリーの名称が当たることがほとんどです。
手書きで作っている場合は自由に変更できますが、手間を考えると大体の方がCMSが吐き出すパンくずリストを利用していると思います。

構造化データのパンくずリストの名称も、ユーザーの目に触れるパンくずリストの名称もこのカテゴリ名になるわけで、実は非常に重要な要素になっています。

また、最近のSEOの傾向として、同一テーマによるページ評価の高まりを感じています。

そのカテゴリ名で大丈夫?

ブログ記事の場合、大抵 「TOP > カテゴリ > 記事名称」 という作りになっていると思いますので、カテゴリ名称は登場機会が多く、そのテーマの子要素として扱われます。

このカテゴリ名が「未分類」「ノンジャンル」「ブログ」などのふわふわ系の名称だとしたら、非常にもったいないわけですね。
Googleの評価基準にモロに影響を与えるます。

カテゴリ名のつけ方は難しい

細分化しすぎるとカテゴリが増えすぎて記事が分散しますし、大きすぎると抽象度が高くなって、テーマがぶれやすい。
ほんと悩ましい要素です。

とりあえず適当なカテゴリに振っておいて、後からカテゴリを移動しようとすると、URLが変更になる場合もありますし、URLの変更になるとリダイレクトを掛けたり、サーチコンソールからクロールのリクエストをしないといけません。

なので、記事を書く前に、カテゴリの所属とカテゴリ名称、そのカテゴリの扱うテーマを明確にすることが非常に重要です。

以上、正しい情報を正しく伝えるための構造化データとパンくずリストの作り方でした!

記事内で紹介している商品リスト
(価格はAmazon参考価格)

これからのSEO内部対策 本格講座

1,870円(税込)

これからのSEO内部対策 本格講座

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

3,278円(税込)

現場のプロから学ぶ SEO技術バイブル(特典PDF付き)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

2,585円(税込)

UP-BLOG 申込みが止まらないブログの作り方 (マーチャントブックス)

Webプロジェクトを成功に導く 戦略的SEO思考

1,920円(税込)

Webプロジェクトを成功に導く 戦略的SEO思考

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

1,738円(税込)

いちばんやさしい新しいSEOの教本 第2版 人気講師が教える検索に強いサイトの作り方[MFI対応] (「いちばんやさしい教本」シリーズ)

10年つかえるSEOの基本

1,628円(税込)

10年つかえるSEOの基本

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

1,540円(税込)

文芸オタクの私が教える バズる文章教室 (サンクチュアリ出版)

構造化データとパンくずリストの関連ページ

SEO titleとh

SEOで重要なtitleタグとhタグの使い方

SEOの内部構造の基本であるTitleタグとHタグの使い方と自分の考えを書きました。 基本だからこそ重要な要素

SEOキーワード選定

SEO キーワード選定の方法を考察してみた

SEOは結構頑張っていますが、キーワード選定という手法をあまり深く考えたことがなかったので深く考えてみました。

カノニカルとリダイレクト

SEOの必須項目 カノニカル設定とリダイレクト設定

URLの正規化というややこしい話なんですが、SEO上正規化をしておくことは必須項目というべき大事な設定です

GTMの導入

グーグルタグマネージャーの導入手順とメリットについて

Google Tag Manager 通称「GTM」と呼ばれる無料で使えるタグを管理するツールの説明と導入手順の解説

OGP設定

OGP設定をしてSNSからの流入とCTRを改善する

シェアするとき、シェアしてもらうときに最適な形で紹介したいとなるとOGP設定をしっかり設定することが重要です

GTM イベントトラッキング

GTMを使ってイベント計測を簡単に行う方法

グーグルタグマネージャーを使ってイベントトラッキングを計測する方法の手順を解説。何がクリックされたかを知ることは大事です

GA4カスタムイベント

GA4 GTMを使ったカスタムイベントの設定方法

GA4のカスタムイベントをGTMを使い設定する方法です。 イベント、パラメータ、カスタムディメンションの解説記事です。

Googleアップデート対策

Googleコアアップデートで順位が下がったときにやるべきこと

Googleのアルゴリズム変更によるGoogleコアアップデートでSERPsの順位変動が起きたときにやったこと

リンク構造

ブログのアクセスアップに欠かせないSEO的リンク構造の考え方

SEOのリンク構造を効果的に作るための情報をまとめました。 可能な限り情報の出どころのリンクも用意しております。

SNSでこの記事をシェアできます

ブログ デイリーアクセスランキング

PHPで作るカレンダー
1位

PHPで作るカレンダー

forとifとforeachがメインのPHPによるカレンダーの作り方です。 祝日設定がちょっとめんどくさいんですよね。

ノートPCスタンド
2位

ノートPCスタンド

ノートパソコンを横にしまうと結構な専有面積があるのですが、立てて収納できればわずか数cmで使えるので本当に快適です!

jquery-match-height.js
3位

jquery-match-height.js

簡単に要素の高さを揃える「jquery-match-height.js実際の使用例をわかりやすく画像付きで解説しています。

MusicBeeのレイアウト変更方法
4位

MusicBeeのレイアウト変更方法

MusicBee 3.1のレイアウトをデフォルトの状態から、自分好みのレイアウト設定に変更する方法を写真付きで紹介しています。

α7Ⅲで夜景
5位

α7Ⅲで夜景

去年はPENTAX Q7で撮影してきた東京タワーと浅草に今年も夜桜撮影に行ってきました。買ったばかりのソニー α7Ⅲを片手に。

α7Ⅲ 夜桜撮影
6位

α7Ⅲ 夜桜撮影

α7Ⅲを片手に東京の夜桜スポットに行ってきました。中目黒と千鳥ヶ淵の夜桜を紹介しながらα7Ⅲのレビューです。

SEL50F18F
7位

SEL50F18F

ソニーの単焦点レンズSEL50F18Fを愛用しています。コスパに優れた単焦点レンズで、F値の開放が1.8と明るく撮れるレンズです。

bookblock
8位

bookblock

本をめくるようなモーションを実現するbookblock.jsを改造してレスポンシブ対応にしてみました。

Kazakiri 1枚刃のカミソリ
9位

Kazakiri 1枚刃のカミソリ

カミソリの替刃の価格が高すぎるので1枚当たり11円で使える片刃のカミソリを購入しました! 切れ味抜群でヒゲソリが楽しい!

東京駅夜景
10位

東京駅夜景

ソニーのミラーレス一眼α7Ⅲで東京駅周辺のイルミネーションを撮影してきました。久しぶりの夜景撮影でカメラの設定を大失敗。

カテゴリ一覧

オススメ商品レビュー

オススメ商品レビュー

世の中にある比較サイトや、いかがでしたか系サイトが嫌いなんです。使ってないのにえらそうなこと言うなと。なので体験談です。

WEB制作

WEB制作

WEBサイトを作れますと一言に言っても色々な技術があるわけですよ。アウトプットの形は一緒でもいろいろこだわりがあるんです。

カメラ

カメラ

2018年4月に購入したソニーのミラーレス一眼「α7Ⅲ」に関連する記事一覧ページです。 作例集やカメラグッズレビューなど。

美味しいもの

美味しいもの

食に関してはあまりこだわりがないんですけどね、こだわりがない分美味しいと思ったものは本当においしいと思ったものなんですよ

Amazonプライム動画

Amazonプライム動画

Amazonプライム会員なら無料で利用できるAmazonプライム動画から、いろいろな動画をみたレビュー記事のまとめページ

旅LOG

旅LOG

家族旅行やおでかけした際の旅ブログです。夏休みの家族旅行(4人家族)で訪れた観光名所の感想などを記しています。

プロフィール

プロフィール

Start-Point.netの管理人のプロフィール紹介を兼ねた、自分の中のルールや決め事やエピソードなでお書いていきます

日記

日記

日記と言っても色々な日記があるわけで、記録的な日記や心理描写を色濃く描いた日記などをまとめたページです。

thanks

thanks

自分を表現することって意外と難しいんですよね。照れがあったり、間違ったこといってないかとよくわからない何かと戦ったりして。

記事内で紹介している商品

これからのSEO内部対策 本格講座

1,870
(税込)