【構造化データ】見た目だけじゃない「よくある質問（FAQ）」の作り方

Webコーディング

2022.11.06

2024.03.04

構造化データの実装とともにアコーディオン型のよくある質問（FAQ）の作り方を紹介します。

まずは見た目から

早速ですがよくある質問の作り方を紹介します。

よくあるアコーディオン型のFAQです。summaryやdetailsタグを使用した実装方法もありますが、CSSやJavaScriptで装飾、操作のカスタマイズが面倒なのでdivタグで作っております。

実装するなら構造化データも一緒に

どうせFAQを実装するならSEOに有利な構造化データも一緒に実装しましょう。

<html itemscope itemtype="https://schema.org/FAQPage">
  <div class="faq-item">
    <div class="question on"　itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
      <p itemprop="name">よくある質問の実装はできますか？</p>
    </div>
    <div class="answer"　itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <p  itemprop="text">はい、可能です。</p>
    </div>
  </div>
</html>

基本的に

HTMLタグに「itemscope itemtype=”https://schema.org/FAQPage”」
質問を囲む要素に「itemscope itemprop=”mainEntity” itemtype=”https://schema.org/Question”」
質問のテキストに「itemprop=”name”」
回答を囲む要素に「itemscope itemprop=”acceptedAnswer” itemtype=”https://schema.org/Answer”」
回答のテキストに「itemprop=”text”」

という形でFAQページを実装することができます。

HTMLタグに属性を記述することを忘れがちなのでお忘れなきように。

今回は静的コーディングでしたが、クライアントが自ら更新できるようにするためには、WordPressの機能を使う必要があります。そちらを説明している記事もございますので、ぜひご覧くださいませ！