【SEO】FAQのリッチリザルト

FAQのリッチリザルトというのを知ったので調査した

developers.google.com

リッチリザルトとはGoogleの検索結果を、通常とは違うインタラクティブな状態で表示させること

例えば、よくある質問の質問と回答を以下のようなアコーディオンに表示させることをさす

構造化データというのを用意すると上図のようなユーザーにリーチしやすい状態にしてくれる

構造化データは以下のようなscriptタグで、これをサイトのhead内に配置するだけでリッチリザルトになる

<script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "質問１",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "回答１"
        }
      }, {
        "@type": "Question",
        "name": "質問２",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "回答２"
        }
      }
    </script>

ちなみにtextには以下のhtmlタグが利用できる

<h1> から <h6>、<br>、<ol>、<ul>、<li>、<a>、<p>、<div>、<b>、<strong>、<i>、<em

また、構造化データは以下のようにクライアントサイドのレンダリング時にfetchしたデータを使って作ることもできる

fetch('https://api.example.com/recipes/123')
.then(response => response.text())
.then(structuredDataText => {
  const script = document.createElement('script');
  script.setAttribute('type', 'application/ld+json');
  script.textContent = structuredDataText;
  document.head.appendChild(script);
});

Generate Structured Data with JavaScript | Google Search Central  |  Documentation  |  Google Developers

リッチリザルトのタイプは「よくある質問」以外にもあるので、適したものがあれば試してみたい
Structured Data Markup that Google Search Supports | Google Search Central  |  Documentation  |  Google Developers

テストは以下のサイトでできる
Rich Results Test - Google Search Console