Knowledge Diary

よくある質問(FAQ)に構造化データを設定してSEO向上を目指そう!

Published: Updated:

よくある質問(FAQ)に構造化データを設定してSEO向上を目指そう!

こんにちは、Webデザイナーの 夢拓(MUHIRO)です。

よくある質問(FAQ)ページに構造化データを導入したいけど、プログラミングがわからなくて断念してしまったことはありませんか?
このような悩みを抱える方も多いのではないでしょうか。私もそうでした。技術的なハードルが高いと感じていました。

この記事では、そんな疑問を解決できるよう、初心者でも簡単によくあるご質問ページに構造化データを導入できる方法をご紹介します。

この記事はこんな方におすすめ!

  • よくある質問ページに構造化データを導入したいWeb制作者

構造化データを正しく設定することで、検索エンジンでの表示改善され、ユーザーにもわかりやすい情報を発信することができます。
Web制作会社の実務で行なった方法と、その時でた疑問点も合わせて解説をします。

この記事を読んで、よくある質問ページに適切に構造化データを導入してSEO対策を試してみてください!

それでは、どうぞ!

Index

CloseOpen

そもそもなぜよくあるご質問ページを作成するの?

よくあるご質問は、エクスペリエンスの向上やカスタマーサポートの負担軽減、SEO対策、ブランドの信頼向上など、さまざまな面で有益な情報を提供できるページです。
詳しくは以下の記事で紹介をしています!

よくある質問に構造化データを導入する3つのメリット

検索エンジンでの可視性向上

構造化マークアップを使用することで、検索エンジンは「よくあるご質問」ページの内容をより正確に理解し、特定できるようになります。これにより、検索結果において、よくあるご質問の質問と回答がリッチリザルトとして表示されることが増えます。

リッチリザルトとは、通常の検索結果よりも目立つ形式で表示される情報で、これによりユーザーは検索結果ページで必要な情報をすばやく確認できるようになります。

特に、ユーザーが特定の質問を入力した際、その質問がよくあるご質問ページに含まれている場合は、検索結果にその回答が直接表示されるため、サイトにアクセスする前に疑問を解決することができ、ユーザーにとって大きな利便性を提供します。

クリック率(CTR)の向上

構造化データを導入することで、検索結果に表示されるリッチスニペットの形で、よくあるご質問が目立つようになります。

リッチスニペットは、ユーザーがクリックしたくなる要素を視覚的に強調するため、検索結果ページにおいて他のサイトとの差別化を図ることが可能です。この視覚的なアピールにより、検索結果からのクリック率(CTR)が向上し、より多くのユーザーがあなたのサイトを訪れる可能性が高まります。

また、よくある質問がリッチリザルトとして表示されることで、ユーザーが他の検索結果よりもあなたのサイトを選ぶ確率が上がり、結果としてサイト全体のトラフィックの増加につながります。

ユーザーエクスペリエンス(UX)の向上

ユーザーが検索エンジンを通じて求める情報を迅速に見つけることができるようになることで、サイト全体のユーザー体験が大きく向上します。

リッチリザルトとして表示されるよくある質問の回答は、ユーザーが探している情報にすぐにアクセスできることを意味し、ページを複数開いて情報を探す手間を省くことができます。

特に、モバイルユーザーにとっては、手間をかけずに回答を得られることが重要であり、その場で解決策を見つけられることで、ユーザーの満足度が向上します。

さらに、よくある質問がしっかりと構造化され、検索エンジン上で容易にアクセスできるようになることで、ユーザーはあなたのサイトに対して信頼感を持ち、繰り返し訪問する可能性が高くなります。

構造化データ(構造化マークアップ)のマークアップ

実際の構造化データ(構造化マークアップ)をマークアップしましょう!
この記事では「JSON-LD」、「Microdata」、「RDFa」の3パターンの解説をします。
私は、「JSON-LD」をよく使います。

JSON-LD

よくある質問の構造化マークアップには、Schema.orgの「FAQPage」タイプが使用されることが多いです。
各質問とその回答を「Question」と「Answer」のペアとしてマークアップします。

<script type="application/ld+json">
{
    "@context":"http://schema.org",
    "@type":"FAQPage",
    "mainEntity":[
        {
            "@type":"Question",
            "name":"1問目の質問",
            "acceptedAnswer": {
                "@type":"Answer",
                "text":"1問目の解答"
            }
        },
        {
            "@type":"Question",
            "name":"2問目の質問",
            "acceptedAnswer": {
                "@type":"Answer",
                "text":"2問目の解答"
            }
        }
    ]
}
</script>

注意点
"name"プロパティと"text”プロパティはプレーンテキストの入力が推奨されています。"text”プロパティはHTMLを含めることができますが、データを正しく処理することができない場合ごあります。

Microdata

<dl itemscope itemtype="https://schema.org/FAQPage">
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <dt itemprop="name">1問目の質問</dt>
        <dd itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">1問目の解答</p>
        </dd>
    </div>
    <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
        <dt itemprop="name">2問目の質問</dt>
        <dd itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
            <p itemprop="text">2問目の解答</p>
        </dd>
    </div>
</dl>

RDFa(Resource Description Framework in Attributes)

<dl vocab="https://schema.org/" typeof="FAQPage">
    <div property="mainEntity" typeof="Question">
        <dt property="name">1問目の質問</dt>
        <dd property="acceptedAnswer" typeof="Answer">
            <p property="text">1問目の解答</p>
        </dd>
    </div>
    <div property="mainEntity" typeof="Question">
        <dt property="name">1問目の質問</dt>
        <dd property="acceptedAnswer" typeof="Answer">
            <p property="text">1問目の解答</p>
        </dd>
    </div>
</dl>

マークアップ後はリッチリザルトテストで確認しましょう!

導入後は必ずリッチリザルトテストでチェックをしましょう。

まとめ

いかでしたでしょうか?
今回の記事では、構造化データをよくある質問ページに導入してSEO向上させる方法について解説しました。

今回の記事のまとめ

  • よくある質問に構造化データを導入する3つのメリット
  • 構造化データ(構造化マークアップ)のマークアップ方法

ソースコードの編集が必要になるため、制作者向けにはなりますが、構造化データする機会がありましたらぜひ参考にしてください!

最後までお読みいただきありがとうございました!

免責事項

  • 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
  • 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
  • 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
  • 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。