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

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

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

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

・ユーザーにより有益な情報を検索結果に反映できる
通常のサイトに比べ、より詳細な情報をユーザーに届けられるようになります。直接的に表示順には影響はないですが、クリック率が上がったりして、結果的に表示順位を上げる効果が見込めます。
![a.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/ae934d96-9e2e-13eb-5160-54083eb47820.png)
(りんごが好きなので、今回例としてあげました)

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

## 構造化データマークアップの種類
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でパンくずリストをマークアップします。
今回は下記のようなページを想定したものとします。
>トップ > 企業情報 > 企業概要

```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>内に記述するのがわかりやすいかと思います。
書き方は下記になります。
```html
<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>
```

## 正しく機能しているのか確認方法
構造化マークアップが正しく機能しているか確認する方法はいくつかあります。
今回はリッチリザルトテストで確認したいと思います。

手順は以下になります。
1.リッチリザルトテストと検索する
2.確認方法を選択する
3.選択した方法で検証する
4.result画面

### 1.リッチリザルトテストページを開く
検索ボックスに「リッチリザルトテスト」と入力して検索。
SEOトップに表示された[リンク](https://search.google.com/test/rich-results?utm_source=support.google.com/webmasters/&utm_medium=referral&utm_campaign=7445569)をクリック。
![検索.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/83ede81a-b903-b984-03e3-19bce80ccf49.png)

### 2.確認方法を選ぶ
リッチリザルトテストでは、テストしたページのURLを入力する。または、コードで確認する方法があります。今回はコードで確認していきたいと思います。
![確認の右方を選ぶ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/53f0d041-4b00-0bf0-f1f6-c3863e8fc321.png)

この時、対応するユーザーエージェントの切り替えをお忘れなく
![user.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/0943a7a9-b3f7-51fc-7899-fd30127d3d11.png)

### 3.選択した方法で検証する
URLからコードのタブに切り替え、ページ上のエディタに該当するページのHTMLをすべてコピペし、下のコードテストというボタンをクリック。
![コード.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/8091c13b-9369-bc0f-3139-6a4d0269f7b9.png)


4.result画面
正しく入力できていれば、画面右側にパンくずリストが検出されます。
 ![result.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2557738/ca0c888c-ac90-9db9-c649-76a5fea7b645.png)

## おわりに
はじめて構造化マークアップをしたので、学習に時間がかかり敷居が高く感じました。
しかし、SEO効果が見込めるため今回を通して新しい知識を得られてよかったです。
色々なことを吸収し、成長していきたいです。

## 参考
[https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja](https://developers.google.com/search/docs/appearance/structured-data/intro-structured-data?hl=ja)
[https://ferret-one.com/blog/structured-data](https://ferret-one.com/blog/structured-data)
[https://search.google.com/test/rich-results?hl=ja](https://search.google.com/test/rich-results?hl=ja)
[https://seopack.jp/seoblog/rich-results/](https://seopack.jp/seoblog/rich-results/)
[https://www.ones-quest.co.jp/labo/structured_markup01.php](https://www.ones-quest.co.jp/labo/structured_markup01.php)