検索結果が豊かになる、構造化マークアップについて調べてみた

構造化マークアップとは

Googleのクローラーにテキスト情報やコンテンツ内容を適切に理解してもらう記述方法のことで、検索結果画面上でユーザーに情報を届けるためにGoogleが提供しているもので、検索結果に表示される情報が増やせます。（リッチリザルトといいます）

検索結果の順位が上がるわけではない

調べたところ、検索結果が上位になるわけではないみたいです。
ただ表示される情報が増えるのでクリックされることが多くなるかもしれません。

種類

なんでもかんでも表示できるようになるわけではなく、設定できるコンテンツの種類があります。

サイトの検索結果機能を有効にする | ドキュメント | Google Developers

構造化マークアップの記述方法は4種類

記述方法は3種類あります。

Microdata
RDFa
JSON-LD（Google推奨）

MicrodataとRDFaはHTMLのタグに直接記述していく方法で、JSON-LDはそのページのscriptタグないに情報をまとめて記述します。

基本的にどれを使用しても大丈夫ですが、MicrodataとRDFaはHTMLのタグに直接書くので記述しに行くのが少し大変かもしれません。ただ更新があった場合に修正漏れが発生しづらそうです。

逆にJSON-LDは記述箇所がまとまっているので修正は楽ですが、HTMLを修正した際にJSON-LDを修正し忘れるといったことがあるかもしれません。

構造化マークアップの記述例

構造化マークアップの例を記載します。今回の例はどこのサイトでも比較的使いそうなパンくずとQ＆Aです。MicrodataとJSON-LDのコードをそれぞれ記載します。

パンくず

Microdata

<ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://webdrawer.net/">
            <span itemprop="name">TOP</span></a>
        <meta itemprop="position" content="1" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="https://webdrawer.net/css" href="https://webdrawer.net/css">
          <span itemprop="name">CSS</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://webdrawer.net/css/customproperties.html">
          <span itemprop="name">CSSのカスタムプロパティ（CSS変数）を使ってみよう</span></a>
        <meta itemprop="position" content="3" />
      </li>
</ol>

JSON-LD

<script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "TOP",
        "item": "https://webdrawer.net/"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "CSS",
        "item": "https://webdrawer.net/css"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "CSSのカスタムプロパティ（CSS変数）を使ってみよう"
      }]
    }]
    </script>

パンくずリストのマークアップを追加する方法 | Google 検索セントラル | ドキュメント | Google Developers

Q&A

Microdata

<div itemprop="mainEntity" itemscope itemtype="https://schema.org/Question">
   <h2 itemprop="name">質問</h2>
   <div itemprop="text">質問内容</div>
<div>
    <div itemprop="acceptedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="text">
       回答のテキスト（ベストアンサー）
       </div>
      </div>
    <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="text">
       回答のテキスト（ベストアンサーではないが考えられる回答）
       </div>
     </div>
     <div itemprop="suggestedAnswer" itemscope itemtype="https://schema.org/Answer">
       <div itemprop="text">
       回答のテキスト（ベストアンサーではないが考えられる回答）
       </div>
    </div>
</div>
</div>

JSON-LD

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "QAPage",
      "mainEntity": {
        "@type": "Question",
        "name": "質問1",
　　　　"text": "質問内容",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "回答のテキスト（ベストアンサー）",
          },
        "suggestedAnswer": [
          {
            "@type": "Answer",
            "text": "回答のテキスト（ベストアンサーではないが考えられる回答）",
          }, {
            "@type": "Answer",
            "text": "回答のテキスト（ベストアンサーではないが考えられる回答）",
          }
        ]
      }
    }
    </script>

Q&A ページのスキーマ | Google 検索セントラル | ドキュメント | Google Developers