構造化マークアップのパンくずリストを実装しよう

構造化データ

Last updated at 2022-12-19Posted at 2022-12-08

こんにちは！
最近、SEO対策として構造化マークアップのパンくずリストを学んだので、ご共有したいと思います！

構造化マークアップとは？

構造化データとは、Googleの検索エンジンにHTMLで書かれた文字情報を認識させるためのデータのことです。構造化データをHTMLのタグを使って実装することをマークアップと言い、SEOの施策手段のひとつとして「構造化マークアップ」と呼ばれることもあります。
構造化データが必要な理由は、検索エンジンそのものは言葉を理解できないからです。検索エンジンが理解できる機械語に翻訳して伝えることで「これは会社名のことです」「これは人の名前のことです」などテキストの意味を認識させるようになります。
Googleの検索エンジンもクローラーと呼ばれるAIの機械を使ってWebページの情報を認識するため、構造化データを用意しておくことで文字情報を適切に読み取ってもらえるのです。

構造化マークアップのメリット

・検索エンジン(クローラー)がサイトの内容を理解しやすくなる
検索エンジン(クローラー)にサイトの内容を適切に伝えるられるため、SEO効果を見込めます。

・ユーザーにより有益な情報を検索結果に反映できる
通常のサイトに比べ、より詳細な情報をユーザーに届けられるようになります。直接的に表示順には影響はないですが、クリック率が上がったりして、結果的に表示順位を上げる効果が見込めます。

(りんごが好きなので、今回例としてあげました)

構造化マークアップのデメリット

設定するのに専門的な知識が必要だったり、すでに大量にページをアップしているサイトだと実装、確認に多くの時間がかかってしまいます。

構造化データマークアップの種類

Google検索では以下3つの形式の構造化データを使用できます。

・JSON-LD（Google推奨）
scriptタグを用いて一箇所に記述ができるという特徴があります。
そのため記述の内容がわかりやすく、他の2つ(Microdata・RDFa)のようにHTMLタグに直接記述する方式ではないため、既存のコードを書き換えてしまうといったミスも起こりにくいです。

・Microdata
直接HTMLのタグにitemscope、itemtype、itempropなどの属性を記述する実装方法です。
HTML5でのみ使用することができます。W3Cの勧告が2013年10月で止まってしまっているため、Googleの推奨ではなくなりました。

・RDFa
Micordataと同様でHTMLのタグに直接記述する方法に加え、XHTMLなども使用できます。

以上、3つの実装方法をご紹介しましたが、今回はJSON-LDでの実装例をご紹介したいと思います。

JSON-LDの実装方法(Google推奨)

それではJSON-LDでパンくずリストの作成方法についてご紹介します。
手順は以下になります。

1.パンくずリストをマークアップする
2.<head>内に記述する

1.パンくずリストをマークアップする

はじめに、HTMLでパンくずリストをマークアップします。
今回は下記のようなページを想定したものとします。

トップ > 企業情報 > 企業概要

<ol>
  <li>
    <a href="http://www.example.com/">トップ</a>
  </li>
  <li>
    <a href="http://www.example.com/corporate/">企業情報</a>
  </li>
  <li>
    <a href="http://www.example.com/corporate/profile/">企業概要</a>
  </li>
</ol>

2.<head>内に記述する

<body>内にも記述できますが、<head>内に記述するのがわかりやすいかと思います。
書き方は下記になります。

<script type="application/ld+json">
{
  "@context": "https://schema.org/",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "トップ",
    "item": "https://www.example.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "会社情報",
    "item": "https://www.example.com/corporate/"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "会社概要",
    "item": "https://www.example.com/corporate/profile/"
  }]
}
</script>