構造化マークアップとは

クローラーがWebサイトに書いてある内容を理解できるようにすることです。
構造化マークアップをする事でリッチスニペットを検索結果に表示させることができます。
SEO対策として実装しますが、構造化マークアップによってSEOの順位が変動することはありません。
しかし、通常に検索結果に加えて追加で情報を記載できるので、順位は変わらずとも結果的にユーザーのクリック率を改善する可能性を秘めています。

Googleリッチスニペットをサポートしている主なコンテンツは
・パンくず
・価格
・評価
・レシピ
・動画
です。
下記画像の様なイメージです。

詳しくはこちら：Google Search Gallery

構造化マークアップを実現するために今回は「scheme.org」という方法を調べてみました。

schema.org

schema.orgでは定義されたフォーマットに沿ってHTMLタグのプロパティに設定をしていきます。
主なプロパティは以下の3つです。
・ itemscope
・ itemtype
・ itemprop

今回はパンくずリストを構造化マークアップしてみました。
まず基本的なHTMLの構造は以下の通り

<ol>
  <li>
    <a>パンくず1</a>
  </li>
  <li>
    <a>パンくず2</a>
  </li>
</ol>

こちらに構造化マークアップを加えたものがこちら

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/hoge">
      <span itemprop="name">パンくず1</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="/fuga">
      <span itemprop="name">パンくず2</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

参考：https://schema.org/BreadcrumbList
一見ごちゃごちゃしていますが、3つのプロパティが入れ子になって繰り返されているだけです。

1.itemscope

itemscopeをつけて対象の要素の範囲を設定します。

<ol itemscope>
  /* マークアップしたい要素が入る */
</ol>

2.itemtype

次に要素のタイプを設定します。
今回の場合はパンくずリストなので以下の通りになります。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">

どの様なタイプがあるかはschema.orgを参考にして設定します。
かなりの数があるので他のサイトをサイトを参考にしながら選ぶのが確実かなと思います。
構造化テストツールを使うことで確認できます。

3.itemprop

それぞれのタグがitemtypeの中のどの項目なのかを指定します。

 <li itemprop="itemListElement">

今回は「itemListElement」という項目を持っています。

ここまでがschema.orgがもつ3つのプロパティ
・ itemscope
・ itemtype
・ itemprop
を使った基本的な流れになります。

入れ子構造

先ほど基本的な構造化マークアップの流れを説明しました。
ソースを見ての通り、実際には先ほどの流れが入れ子構造になって組まれています。

上記画像の通り、今回のパンくずリストはitempropに「itemListElement」を持っています。
そして「itemListElement」が新しいitemscopeを持っており「ListItem」というitemtypeです。
下記ソースは「ListItem」の部分のみを抽出したものになります。

<li itemprop="itemListElement" itemscope
    itemtype="http://schema.org/ListItem">
  <a itemprop="item" href="/hoge">
    <span itemprop="name">パンくず1</span>
  </a>
  <meta itemprop="position" content="1" />
</li>

全体のソースを見ると分かりにくいですが、1つ1つ順番に絞り込んでいくとシンプルである事が分かります。

最後に

今回は知識ゼロの状態から構造化マークアップについて調べて見ました。
「構造化マークアップをすればSEO順位が改善する」という勘違いに気付くことができました。

実際にサイトに適応させていこうと思うと、多すぎるitemtype、itempropの中から組み合わせを考える必要があります。
業務においてこれらの構造を考えるのは自分の担当範囲ではありませんが、仕組みを理解しておくことで今後円滑に業務を進められればなと思います。