リッチリザルト「FAQ」Google検索結果で質問と回答を表示させる方法(ワードプレス)

アフィリエイターやwebメディア運営者が使いやすいリッチリザルトのFAQPageを、ワードプレスで表示する方法を解説します。

もしリッチリザルトについて概要を知りたい人は先にこちらの記事を読んでみてください。
https://lp.atus.jp/rich-results

リッチリザルトのFAQとはGoogle検索結果に↓の画像のように表示されるものです。
SEO観点でいうと、1つ順位が下のライバルサイトの表示位置を押し下げて自サイトのCTRを高める効果があるのです。

引用元: Google デベロッパーズガイド


主にアフィリエイター向けとして、今回はワードプレスを使った方法を紹介します。(もちろんGutenberg対応)

またこの記事の知見を応用すればワードプレス以外のメディア、サイトでも十分に活用できます。
なのでワードプレス以外を使っている方も参考にしてみてください。

リッチリザルトの概要から説明しますが、具体的な手順だけを知りたいならこちら。
ワードプレスにリッチリザルトのJSON-LD構造化データを組み込む具体的な手順

リッチリザルト「FAQ」を検索結果に表示する方法(ワードプレス)

まず、リッチリザルトのFAQを表示するためには下記の2点をやればいいだけです。

  • 構造化データ化したよくある質問と回答をheadタグに表示
  • 記事にもheadタグと同様のよくある質問と答えを記載

構造化データってなに?と思った方、安心してください。説明します。

ここまではwordpresだろうと、他のCMSだろうと変わりません。

意外とシンプル。
この2つをやればいいだけです、簡単ですね。

構造化データ化とは

ここはHTMLが分かる方向けに説明します。

もしHTMLが分からない人は読み飛ばしてください。
また手順だけ知れればいい、という人も読み飛ばしてください。

構造化データとは、Googleにデータの種類を伝えるためデータです。
検索結果に表示される食べログやRettyにはよくお店ごとに⭐マークの評価が付きますね。

あれもリッチリザルトの1つで、記事内に★★★と星を3つ書いても、Googleにとっては星が3つ並んだ文字としてしか認識できません。レビューの値が3だと認識できないのです。

そこを構造化データ、という方法でHTMLに書くことで店の評価としての星が3つだよ、と記事からGoogleに伝えることができます。

構造化データの参考例です。
飲食店のサイトとしてFAQを作ってみました。

  <head>
    <title>記事のタイトル</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "FAQPage",
      "mainEntity": [{
        "@type": "Question",
        "name": "おすすめのメニューは?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "当店のおすすめはハンバーガーです。ジューシーな和牛を使用した、100%ビーフが特徴です。"
        }
      }, {
        "@type": "Question",
        "name": "営業時間は?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "平日は11時〜22時、休日・祝日は11時〜21時となっています。なお定休日は水曜日です。"
        }
      }, {
        "@type": "Question",
        "name": "アクセス方法",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "JR新宿駅の東口から徒歩3分です。ドン・キホーテのすぐ近くにあります。"
        }
      }]
    }
    </script>
  </head>

<script>タグ内の記述が構造化データにあたります。

また、エンジニアの方などは知っているかと思いますが、webデザイナーさんだと見たこと無い書式かもしれません。

{“key”:”value”}で表すこの書き方をJSONといいます。これから構造化データを扱うなら何度も出てくるのでこちらを見ておくといいです。

JSONとは(外部サイト)


上記はJSON-LD構造化データといいます。
ちなみに、なぜ-LDが付くのかはよく分かりません。

Googleの公式資料

これから説明する、ワードプレスにFAQを組み込む手順はすべて下記のGoogle公式資料に沿った内容です。

公式資料だと分かりにくい&ワードプレスにどう適用すればいいか分からない、という人のために具体的な手順を説明します。

また、より詳しくFAQの構造化データの仕様を知りたい場合には、下記の公式資料を確認してください。

ワードプレスにリッチリザルトのJSON-LD構造化データを組み込む具体的な手順

具体的なワードプレスへの組み込みの手順を説明します。

まず全体の流れから。

  1. プラグインを2つインストール
  2. FAQを作る
  3. 記事にFAQを書く
  4. 構造化データを作成する
  5. 構造化データを記事に紐付ける

プラグインを2つインストール

2つのプラグインをインストールしていきます。

このプラグインにより記事ごとに別々の構造化データをheadタグに出力できます。

1. 独自プラグインをインストールする

atusが独自開発をしたプラグインをインストールします。
↓をクリックしてダウンロード

それでは独自プラグインをインストールの仕方を解説します。

ダウンロードできたらワードプレスの管理画面を開いてください。
ワードプレスのメニューから 「プラグイン」の「新規追加」をクリックしましょう。

すると下記の画面になりますので、「プラグインのアップロード」をクリックします。

するとアップロードするためのボタンを表示できます。

「ファイルを選択」をクリックして、ダウンロードした「atus-rich-result.zip」のファイルをアップロードしてください。

※zipファイルは解凍せずにzipファイルのままアップロードします。

2. advanced custom fieldプラグインをインストールする

またプラグインの新規登録ページにいきます。
そして検索窓に「advanced custom field」と入力しましょう。

「今すぐインストール」をクリック、そして「有効化」をクリックしてください。

有効すると、ワードプレスの左側のメニューに「カスタムフィールド」が追加されます。

そこで「新規登録」をクリックします。

するとカスタムフィールドの登録画面にいきます。

「フィールドを追加」をクリックします。

そうしたら、下記のように書きましょう。
「フィールド名」を「faq_rich_result」にするのがとくに大切です。
入力できたら保存をしましょう。

ここまでできたら準備OKです。

FAQを作る

単純によくある質問と回答を作ります。
ここではメモ帳とかを使って作るだけです。

FAQの参考例

・おすすめのハンバーガーはなんですか?
 当店のおすすめはハンバーガーです。ジューシーな和牛を使用した、100%ビーフが特徴です。

このようなFAQを4つ以上作りましょう。

Googleの検索結果に表示されるFAQは最大で4つ。
そのため最低でも4つ作るといいです。

記事にFAQを書く

まず記事のコンテンツとしてFAQを書きましょう。
ページ内のどこでも大丈夫です。

いつもどおり普通に記事を書いて、そこにFAQを付け足すだけです。

構造化データを作成する

こちらのサイトを使って構造化データを作ります。

構造化データをワードプレスの記事に紐付ける

ちょっと手順が多いですが、ついてきてください。

まず、ワードプレスの記事投稿の画面を開いてください。

gutenbergなら右上がこうなってますよね

この︙の部分をクリックしてください。

右下に「オプション」が出てきます。

「オプション」をクリックします。

そうするとポップアップが表示されるので、詳細パネルを見てください。

「カスタムフィールド」にチェックを入れて、「有効化してリロード」ボタンをクリックしてください。

するとエディタの下に「カスタムフィールド」が表示されます。

次に値のところにジェネレーターで作った構造化データを入力します。

これでOKです。

記事を保存しましょう。

正しく構造化データが入っているか確認する方法

ページを公開してから、Googleの公式チェックツールでチェックできます。

よくある質問のリッチリザルト構造化データが正しく組み込めている場合、このような表示になります。

もし自分でワードプレスに実装するのが難しい人は

こちらにメールアドレスを入力しておいてください。

現在、atusでは簡単にリッチリザルトをワードプレスに組み込めるプラグインを開発中です。

完成したらお知らせします。※2021年の早めの時期に完成予定

<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfmTaR-8c_tyN-cbk3_yPqy0gDMJOtd7ZWgKYdZ6IvA7cJc-A/viewform?embedded=true" width="640" height="581" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>