今日から構造化マークアップ!! #HTML5

構造化マークアップについてSEO寄りの記事は多いですが、エンジニア寄りの記事が少なかったのでまとめました。

構造化マークアップとは

構造化マークアップを考える上でセマンティックWEBや構造化データについて少し知るといいかもしれません。

セマンティックWEB

セマンティックWEBはティム・バーナーズ＝リーによって提唱されたプロジェクトであり、コンセプトです。
現在主流のHTML5では文書構造や簡単な意味を表現できますが、詳細な情報を表現できません。
検索エンジンを含む機械に詳細な、より良い情報を提供しようという考えです。

構造化データ(structured data)

構造化データといっても明確に定義があるわけではないのですが、(ちなみにwikipediaもなかったです)
あえて(セマンティックWEBの文脈で)定義するなら
構造化データとは「事前に定義された構造(オントロジー)にしたがって、メタデータが付与されたデータ」を指します。
になると思います。
わかりにくいですよね。。。
サンプルコードを用いて説明してみます。
以下のコードは、HTMLにMicrodata(後述)を使って

パンくずである
Top Page > List Page > View Page と階層構造を持っている

という情報を表現する例です。


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemtype="http://schema.org/Thing" itemprop="item" href="https://sample.jp">
            <span itemprop="name">Top Page</span>
        </a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemtype="http://schema.org/Thing" itemprop="item" href="https://sample.jp/list">
            <span itemprop="name">List Page</span>
        </a>
        <meta itemprop="position" content="2" />
    </li>
    <li>
      <span itemprop="name">View Page</span>
    </li>
</ol>

単に<ol>タグを使用しているだけでは、機械はパンクズだと理解できません。
それを予め定義された構造に沿って、メタ情報をマークアップしています。
この文章、記事ではこれらを構造化データと指すこととします。

つまり構造化マークアップとは

セマンティックウェブを達成するために、構造化データをマークアップすることを言います。

構造化マークアップってなにそれ美味しいの？

SERPの表示をリッチにできる

機械に認識されやすいということは、Google botなど検索エンジンの評価する側に情報をより多く伝えられるということです。
実際に、Googleはリッチリザルトとして構造化マークアップされたものにはSERPにより多くの情報を載せると公表しています。

Google 検索がページのコンテンツを理解できる場合、結果ページに対して各種の機能を有効にすることができます。状況によっては、構造化データによってページコード内に追加情報が明示的に配置されている場合も、同様の機能を有効にすることができます。

「検索機能について」より引用(https://developers.google.com/search/docs/guides/search-features)

やらないよりかはやる方が良い

構造化データがたくさんあればあるほど、Google のコンテンツ理解の手助けになるからです。

「すべてのschema.orgをGoogleはサポートする、可能な限り多くの構造化データをマークアップするといい」より引用(https://www.suzukikenichi.com/blog/google-recommends-marking-up-as-many-structured-data-as-possible/)
引用元の記事では全体的に中立な立場をとっていますが、やらないよりかはやる方が良いと言っていいと思います。

構造化マークアップの書き方は？

①前提として、知っておきたい

語彙

構造化データの各項目(各メタデータ)を語彙と表します。
この語彙の定義はいくつかあるのですが、有名なのは以下の二つです。

data-vocabulary.org
schema.org

ただし、schema.orgの方が後発でdata-vocabulary.orgは開発が終了しているため、新規に導入するならschema.orgで間違いないでしょう。

構文

上記の語彙をどのように構造化するか。
いくつか構文があるのですが、主なものは3つです。

RDFa
microdata
JSON-LD

尚、どの構文がいいかは後述します。

②導入する単語の種類を選ぶ

SEO効果等を向上させるために構造化マークアップを導入することが多いと思うので、Google のドキュメントに従う形が良いかと思います。

検索ギャラリー

で導入したい単語の種類　を選びます。
このリンク先では構造化データを用いた場合、語彙毎にどういった効果があるのか、つまりSERPでどのようなリッチリザルトが生成されるかが記されています。　
詳細はリンク先を参照して欲しいのですが、主要なものだと

パンくずリスト
企業の連絡先
ロゴ
レビュー
レシピ

などが紹介されています。

③マークアップする

②でパンくずリストを選んだとして進めます。
パンくずリスト
実際に構造化データをマークアップする場合は、サンプルコードを参考にしましょう。

「マークアップを表示」を選択すると構造化データテストツールが表示されると思います。

初見の方は少しわかりにくいかもしれませんが、左のペインに初期表示されているのがサンプルコードです。
このページは構造化マークアップしたコードの文法をチェックするWEBページです。
真ん中下にある矢印をクリックすると文法チェックができます。
このサンプルコードを参考にして、構造化マークアップしましょう。
そして、参考にして作成した自身のコードはこのページで文法チェックをしましょう。

どの構文を使えばいいの？

上述した

RDFa
microdata
JSON-LD

の3つの構文のどれを選べばいいのでしょうか？

構文の比較

主要団体の支持

Schema.org

Focusing on microdata seemed like a pragmatic decision at the time. For some time now we have been supporting multiple syntaxes, specifically including RDFa and JSON-LD. There are certain things that are much harder in Microdata, like mixing vocabularies, or inverting the direction of a property relationship. We are also adding code examples in all of these formats.

About Schema.orgより引用

当初、Schema.orgが採用したのはmicrodataでした。
実際に他のプロダクトのコードを見ても、microdataの使用が多いと思います。

Google

Google では JSON-LD をおすすめしていますが、microdata を選択しても構いません。

構造化データマークアップ支援ツールより引用

JSON-LDを推奨しているようです。
一方、RDFaについては触れられてもいません。
ただし、GoogleサーチのドキュメントでRDFaのコードサンプルがあるので、試してはいないですが対応していないわけでもなさそうです。

コードを比較する

上記で例示したサンプルコードを用いて説明します。
こちらはmicrodataで書かれています。


<ol itemscope itemtype="http://schema.org/BreadcrumbList">
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemtype="http://schema.org/Thing" itemprop="item" href="https://sample.jp">
            <span itemprop="name">Top Page</span>
        </a>
        <meta itemprop="position" content="1" />
    </li>
    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemtype="http://schema.org/Thing" itemprop="item" href="https://sample.jp/list">
            <span itemprop="name">List Page</span>
        </a>
        <meta itemprop="position" content="2" />
    </li>
    <li>
      <span itemprop="name">View Page</span>
    </li>
</ol>

一方、JSON-LDだと


<ol>
    <li>
        <a href="https://sample.jp">
            <span>Top Page</span>
        </a>
    </li>
    <li>
        <a href="https://sample.jp/list">
            <span>List Page</span>
        </a>
    </li>
    <li>
      <span>View Page</span>
    </li>
</ol>
<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Top Page",
    "item": "https://sample.jp"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "List Page",
    "item": "https://sample.jp/list"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "View Page",
    "item": "https://sample.jp/view"
  }]
}
</script>

この比較でmicrodataはJSON-LDと比較すると

コードの可読性は低い
ただし、行数やファイル数は節約できそう
余計なDOMが増えている(<meta itemprop="position" content="1" />)
3階層めまでhrefを伝えらていない ※1

と言えそうです。
RDFaはmicrodataとシンタックスがインラインで似ているので、比較は同様に考えてください。

※1.通常パンくずリストをマークアップした際はクリックさせないために最後の要素にhrefを付与しないと思います。したがってmicrodataで実装すると最後の階層のhrefを機械に伝えることができません。また、この理由からかdata-vocabulary.orgでパンくずを書いているサイトもいくつかありました(もしかしたら、もっと良いやり方があるかもしれませんので、ご存知の方がいたら教えてくださいmm)

つまりどの構文を採用すればいいの？

主要団体の支持で考えると

JSON-LD > microdata > RDFa

ライトに導入したいなら

microdata, RDFa > JSON-LD

保守性を重視したいなら

JSON-LD > microdata, RDFa

といったところでしょうか。
ちなみに、実際に私が担当するプロダクトにはJSON-LDを導入しました。

さいごに

最後までお読みいただきありがとうございました。
ビジネスサイドの理解を得られなかったりと、様々な理由でアクセシビリティの向上を実際の運用するプロダクトに導入するのは、とても大変なものです。
しかし、構造化マークアップを導入することはSERPをリッチにさせることに繋がるため、これらの問題をクリアしやすい技術と言えると思います。
明日からでも、構造化マークアップを取り入れてみてはいかがでしょうか？←

参考

記事中のリンク以外にも以下の記事を参考にさせていただきました。
ありがとうございましたmm

https://ja.wikipedia.org/wiki/%E3%82%BB%E3%83%9E%E3%83%B3%E3%83%86%E3%82%A3%E3%83%83%E3%82%AF%E3%83%BB%E3%82%A6%E3%82%A7%E3%83%96
https://digital-marketing.jp/seo/structured-markup/
https://www.sakurasaku-labo.jp/blogs/structured-data
https://w3g.jp/blog/schema-org_and_json-ld