リッチリザルトの FAQ の書き方について

リッチリザルトが表示されるようにページを作成しておくと検索結果で目立つように表示される．
この記事ではFAQというリッチリザルトを表示させる書き方について説明する．

よくある質問のリッチリザルト

よくある質問，つまり FAQPage のリッチリザルトに関しては

構造化データを使用して「よくある質問」をマークアップする

を参照して作ればよい．

上の画像のページは [Chrome 拡張機能] HTML Outline 確認ツール のページだが，FAQPage 部分は以下のようなソースになっている．
今回はソースに埋め込む形の microdata 形式をとっている．

microdata 形式を採用する場合はデザインを整えるためにスタイルシート(CSS)も設定する必要があるが，実際にページにも表示されるので検索エンジンからくる閲覧者にとっては分かりやすいだろう．
JSON-LD 形式で書くと本文の文章やレイアウトとは独立して書けるので，その点は気を使わなくてよいが，同じ文章が二重に HTML の中に現れることになる．
途中で文章を変更しようと思った際に二箇所変更しなくてはならなくなる．

本文と違う文章であれば無駄はなくなるが，検索エンジンからの訪問者にとってはずばりそのものがなくなってしまうので戸惑いを生じさせてしまう可能性がある．

ちなみに上記の例では下のソースのように FAQ としては三つ用意しているが，二つだけが採用された状態になっている．
全てが採用されるわけではない．

<div class="FAQPage" itemscope itemtype="https://schema.org/FAQPage">
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <div class="Q" itemprop="name">この「HTMLアウトライン」拡張機能は有料ですか？</div>
    <div class="A" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <span itemprop="text">無料で使えます．</span>
    </div>
  </div>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <div class="Q" itemprop="name">似たようなツールがありますよね？</div>
    <div class="A" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <span itemprop="text">H1 などの数字が分かります．また，img タグの中の alt 属性の文字が表示されます．</span>
    </div>
  </div>
  <div itemscope itemprop="mainEntity" itemtype="https://schema.org/Question">
    <div class="Q" itemprop="name">閲覧データはどこかのサーバーで取得していますか？</div>
    <div class="A" itemscope itemprop="acceptedAnswer" itemtype="https://schema.org/Answer">
      <span itemprop="text">いいえ，一切データは取得していません．</span>
    </div>
  </div>
</div>

CSS は自由に変えればよいが，参考までに載せておくと

.FAQPage {
  border: black 1px dotted;
  padding: 6px;
}
.FAQPage .Q:before {
  content: "Q.";
}
.FAQPage .A:before {
  content: "A.";
  color: red;
}
.FAQPage .Q:before, .FAQPage .A:before {
  font-size: 1.25rem;
  padding: 4px 6px;
  margin-right: 6px;
  margin-left: -34px;
}
.FAQPage .A, .FAQPage .Q {
  padding: 4px 2px;
  margin-left: 34px;
}
.FAQPage .Q {
  background-color: #FEE;
}