Webサイト・ブログ

パンくずリストを構造化データで書く方法を解説!

アイキャッチ画像

ブログや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に合った書き方をしておくようにしましょう!

ABOUT ME
みきてぃ東西線
20代大学卒業生です。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。
おすすめ記事