「伊佐沼」野鳥観察 ～2024年4月中旬～
パンくずリストを構造化データで書く方法を解説！
みきてぃ
ブログやWebサイトを閲覧する時、よく目にするのが「パンくずリスト」。実は、パンくずリストを構造化データで書くことにより、SEO対策などの効果があります。
今回は、「パンくずリストを構造化データで書く方法」を解説していきます。
構造化データ：テキストにタグ付けをすること。
みきてぃ
そもそも「パンくずリストって何？」という方は、以下の記事を読んでね！
パンくずリストを構造化データで書く方法
既に設置されているパンくずリストを構造化データとして表す場合は、パンくずリストに「schema.org」を定義したボギャブラリーを入れる必要があります。
パンくずリストを構造化データとして書く方法は3つあります。
- JSON-LD※Googleが推奨している方法です！
- microdata
- RDFa Lite
1つ目の「JSON-LD」は、Googleが現在推奨されている構造化データですので、特別な理由がない場合は「JSON-LD」で書いていきましょう。
みきてぃ
ではでは、それぞれの書き方を解説していくよ～！
JSON-LDで書く方法
JSON-LDで書く場合、以下の方法で書いていきます。
1<script type="application/ld+json">
2{
3"@context": "http://schema.org",
4"@type": "BreadcrumbList",
5"itemListElement":
6[
7{
8"@type": "ListItem",
9"position": 1,
10"item":
11{
12"@id": "/",
13"name": "トップページ"
14}
15},
16{
17"@type": "ListItem",
18"position": 2,
19"item":
20{
21"@id": "/hiking/",
22"name": "ハイキング"
23}
24},
25{
26"@type": "ListItem",
27"position": 3,
28"item":
29{
30"@id": "/hiking/seisyun18kippu-hiking/",
31"name": "青春18きっぷでハイキング！"
32}
33}
34]
35}
36</script>idはURL、nameはページタイトルやキーワードを入れます。
headタグに囲まれている部分にJSON-LDを書くことにより、パンくずリストにタグを追加せず、シンプルな構造化データとして書くことができます。
microdataで書く方法
既存のパンくずリストにタグを加えて書きます。
1<div class="breadcrumbs" itemscope itemtype="http://schema.org/BreadcrumbList">
2<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
3<a itemprop="item" href=" /"><span itemprop="name">トップページ</span></a>
4<meta itemprop="position" content="1" /></span> > <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
5<a itemprop="item" href="/hiking/"><span itemprop="name">ハイキング</span></a>
6<meta itemprop="position" content="2"></span>
7<span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
8<span itemprop="name">青春18きっぷでハイキング！</span>
9<meta itemprop="position" content="3"></span>
10</div>この場合、aタグの入れ子にitemprop=”item”、タイトルの入れ子にitemprop=”name”を書く必要があります。
最後にmeta itemprop=”position” content=”1″でパンくずの順番を指定するのも忘れないでください。
RDFa Liteで書く方法
基本的にはmicrodataとほぼ同じです。
1<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
2<span property="itemListElement" typeof="ListItem">
3<a property="item" typeof="WebPage" href="/" class="home">
4<span property="name">トップページ</span></a><meta property="position" content="1"></span>
5<span property="itemListElement" typeof="ListItem">
6<a property="item" typeof="WebPage" title="ハイキングのカテゴリへ" href="/hiking/" class="taxonomy category">
7<span property="name">ハイキング</span></a><meta property="position" content="2"></span>
8<span property="itemListElement" typeof="ListItem">
9<span property="name">青春18きっぷでハイキング！</span>
10<meta property="position" content="3"></span>
11</div>WordPressの場合
WordPressで構造化データを設置する場合、プラグイン「Breadcrumb NavXT」を使うと、早く設置することができます。
その場合、以下のタグを追加する必要があります。
1<div class="breadcrumbs" vocab="http://schema.org/" typeof="BreadcrumbList">
2 <?php if(function_exists('bcn_display'))
3{ bcn_display(); }?>
4 </div>
構造化データを設置した後にやること
パンくずリストを構造化データとして書いた後は、Googleの「構造化データテストツール」を使って、パンくずリストが正しく設置されているかどうか確認しましょう。
まとめ
というわけで、今回は「パンくずリストを構造化データで書く方法」を解説しました。
パンくずリストを構造化データ化することにより、検索エンジンによる巡回がしやすくなります。
また、SEOによる効果もつながりますので、ユーザーやSEOに合った書き方をしておくようにしましょう！
スポンサーリンク
