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