当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

当ブログ内の記事を探す

最近の投稿

カテゴリー

アーカイブ

RSS

プロフィール

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

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

アイキャッチ画像
みきてぃ東西線

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

この記事を書いた人

プロフィール用画像

みきてぃ東西線

みきてぃ東西線

20代のブロガーです。IT・インターネット関連や生活関連、趣味の1つである観賞魚などの記事を書いています。

≫詳しいプロフィールを見る

≫お問い合わせはこちら

当ブログ管理人からのお知らせ

当ブログのリニューアルが完了しました。

なお、個別記事内にて細かいデザインが崩れている場合がありますので、ご了承のほどお願いいたします。

詳しくは、以下のお知らせ記事をお読みください。

当ブログのリニューアルに伴うメンテナンスの作業完了のお知らせ

スポンサーリンク
記事URLをコピーしました