商用利用可能な音楽を公開しているサイトで実装している「よくある質問」のリッチリザルトについて

Google検索結果のリッチリザルト化、最初の一歩は「よくある質問」が良さそう。

Google の検索結果で時折見られる、検索結果にFAQの内容が表示されているやつ。
あれはリッチリザルトと呼ばれ、よくある質問的なページに適切なマークアップを設定することで、Googleの検索結果内でFAQの内容を表示させることができる。

実際、最近毎日のように更新を続けている商用利用可能な音楽を載せているこちらのサイトでも設定しており、既に Google検索結果上ではこのようにリッチリザルト表示がなされている。

f:id:shinshin86:20210213161245p:plain — 検索結果のキャプチャ。よくある質問の内容が表示されているのが分かる。

なくても特に問題があるわけではないが、ユーザ的には検索結果内ですぐにFAQ見れたほうが少しだけ便利な気がするし、なによりこれがあるとそれなりにきちんとサイト作成している感がでる気がする。
それほど手間もかからないので、もし個人開発でサイト作成しているような方は、設定しといて損はないかと思われる。

設定方法については下記に記載がある。
実際にページを見てもらえれば分かるが、それほど難しい作業というわけでもないので、リッチリザルトはじめてみたいけど、どこから手を付けようかー？と悩んでいる人にはおすすめの最初の一歩である。

developers.google.com

実際に実装しているページがこちら。
こちらのページのheadタグ内に記述がある。
(実際の実装内容を見るにはChromeの開発者ツールなどからHTMLを見る必要がある)

無料で使える、商用利用可能な効果音や音楽 | よくあるご質問

ちなみにこちらのサイトはGatsbyで実装している。
Gatsbyでリッチリザルトを実装する方法について、インターネットで検索をかけてみると良さそうな情報が出てくるようだったので、ここでは割愛する。
というか、私の実装は愚直な実装なので、あまり説明するほどでもない。

一応サクッと書いておくと、

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: '無料で利用可能ですか？',
        acceptedAnswer: {
          '@type': 'Answer',
          text: 'はい、無料で利用が可能です。',
        },
      },
      .
      .
      .
    ]
  }
  .
  .
  .
  return (
    .
    .
    <Helmet>
      .
      .
      .
      <script type="application/ld+json">{JSON.stringify(jsonLd)}</script>
      .
      .
      .
    </Helmet>
    .
    .
  )