リッチリザルトのFAQPageを、ワードプレスで表示する方法を解説します。
（ブロックエディタ・Gutenberg対応）
「自分ではワードプレスをカスタマイズをできない..」という人でもコピペで実装できるように解説します。
もし、リッチリザルトがそもそもよくわかってない…という人は先にこちらの記事を読んでみてください。
リッチリザルトのFAQとはGoogle検索結果に↓の画像のように表示されるものです。
自社サイトの掲載位置より１つ順位が下のライバルサイトの表示位置を押し下げることができ、自社サイトのCTRを高める効果があります。
まずFAQリッチリザルトの概要から説明しますが、具体的な手順だけを知りたいなら下記リンクからお読みください。
ワードプレスにリッチリザルトのJSON-LD構造化データを組み込む具体的な手順
リッチリザルト「FAQ」を検索結果に表示する方法（ワードプレス）
端的にいうと、リッチリザルトのFAQを表示するためには下記の２点をワードプレスに組み込めればOKです。
- 構造化データ化したよくある質問と回答をheadタグに表示
- 記事にもheadタグと同様のよくある質問と答えを記載
構造化データってなに？と思った方、安心してください。説明します。
これはwordpresだろうと、他のブログツールだろうと変わりません。
意外とシンプル。
この２つをやればいいだけです。
構造化データ化とは
ここはHTMLが分かる方向けの説明です。
もしHTMLが分からない人は読み飛ばすか、理解しなくてもいいので雰囲気だけ掴んでください。
また手順だけ知れればいい、という人も読み飛ばしてください。
飲食店の口コミサイトのRettyを参考例に説明します。
まずGoogleの検索で「つじ半」と検索すると次のような検索結果がでてきます。
まさにFAQリッチリザルトが表示されていますよね。
このページのHTMLを解析すると以下の部分がheadタグ内にあります。
<head>
<title>記事のタイトル</title>
~
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [
{
"@type": "Question",
"name": "このお店の営業時間は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "[全日]\r\nランチ:11:00〜15:00\r\nディナー:17:00〜21:00\r\n : <a href=https://retty.me/area/PRE13/ARE15/SUB1501/100000729115/#restaurant-info>つじ半</a>"
}
},
{
"@type": "Question",
"name": "このお店への行き方は？",
"acceptedAnswer": {
"@type": "Answer",
"text": "東京メトロ銀座線 ／ 日本橋駅(B3) 徒歩2分（150m） : <a href=https://retty.me/area/PRE13/ARE15/SUB1501/100000729115/map/>ここを押すと地図を見ることができます</a>"
}
},
{
"@type": "Question",
"name": "このお店の口コミは？",
"acceptedAnswer": {
"@type": "Answer",
"text": "海鮮丼の有名店つじ半に訪問。\n11：30で店外待ち7番目。並んでいる間に注文を取ってくれる。贅沢丼特上、松竹梅の4グレードから、とりあえず梅1100円を注文。\n先ずてっぺん盛りの刺身がインパクトあり。\n味ももちろん良い。梅でこれだけ満足度高いからウニやカニがのってくる上位はより舞い上がってしまうことだろう。\n小さめにカットされた海苔と大葉が一口一口にアクセントを与えてくれる。よく煎った胡麻も風味豊か。\n更にお好みの時間で鯛出汁を入れてくれて鯛茶漬も楽しませてくれる。\n名脇役の刺身と生姜のお新香がついて最後まで美味しく楽しくいただけました。\nこの立地にこの値段で、遥かに超えてくる質、行列納得。\n : <a href='https://retty.me/area/PRE13/ARE15/SUB1501/100000729115/reports/'>詳しい口コミを見てみる</a>"
}
}
]
}
</script>
~
</head>この日本語と、@typeやQuestion、Answerといった文字が混じっている部分がまさに「構造化データ」です。
「見たこと無い書き方してるし気持ち悪い。。」
「え、この書き方を理解・学習しないとリッチリザルトを表示できないの？」って不安になりましたか？
大丈夫です、この辺は理解しなくても問題ありません。あくまで例としてご説明したまでです。
ちなみに上記のような書き方をJSONといいます。理解したい方はこちらを読むといいですよ
JSONとは（外部サイト）
上記はJSON-LD構造化データという名前らしいです。
Googleの公式資料
念のためGoogle公式資料へのリンクを置いておきます。
こちらも読まなくてもリッチリザルトは実装できるようにこの記事で説明するので、深く詳しく知りたい人だけ読んでください。
また、より詳しくFAQの構造化データの仕様を知りたい場合には、下記の公式資料を確認してください。
こんな細かい資料なんてどうだっていいから、ワードプレスにリッチリザルトを付ける方法を知りたいんだ！
という方、おまたせしました。
次から具体的な方法を説明します。
ワードプレスにリッチリザルトのJSON-LD構造化データを組み込む具体的な手順
具体的なワードプレスへの組み込みの手順を説明します。
まず全体の流れから。
- プラグインを２つインストール
- FAQを作る
- 記事にFAQを書く
- 構造化データを作成する
- 構造化データを記事に紐付ける
ステップ１：プラグインを２つインストール
２つのプラグインをインストールしていきます。
このプラグインにより記事ごとに別々の構造化データをheadタグに出力できます。
1. 独自プラグインをインストールする
atusが独自開発をしたプラグインをインストールします。
↓をクリックしてダウンロード
それでは独自プラグインをインストールの仕方を解説します。
ダウンロードできたらワードプレスの管理画面を開いてください。
ワードプレスのメニューから 「プラグイン」の「新規追加」をクリックしましょう。
すると下記の画面になりますので、「プラグインのアップロード」をクリックします。
するとアップロードするためのボタンを表示できます。
「ファイルを選択」をクリックして、ダウンロードした「atus-rich-result.zip」のファイルをアップロードしてください。
※zipファイルは解凍せずにzipファイルのままアップロードします。
2. advanced custom fieldプラグインをインストールする
またプラグインの新規登録ページにいきます。
そして検索窓に「advanced custom field」と入力しましょう。
「今すぐインストール」をクリック、そして「有効化」をクリックしてください。
有効すると、ワードプレスの左側のメニューに「カスタムフィールド」が追加されます。
そこで「新規登録」をクリックします。
するとカスタムフィールドの登録画面にいきます。
「フィールドを追加」をクリックします。
そうしたら、下記のように書きましょう。
「フィールド名」を「faq_rich_result」にするのがとくに大切です。
入力できたら保存をしましょう。
ここまでできたら準備OKです。
ステップ２：FAQを作る
単純によくある質問と回答を作ります。
ここではメモ帳とかを使って作るだけです。
・定期購入の回数の縛りはありますか？
初回のお試し１回と、次の１回の合計２回までの縛りとなります。金額にすると◯◯円が最低でもかかる計算になります。
・解約で引き止めはありますか？
引き止めはありません。ただし、解約には次回商品の発送の７日前までに管理画面から申請する必要があります。
このようなFAQを４つ以上作りましょう。
Googleの検索結果に表示されるFAQは最大で４つ。
そのため最低でも４つ作るといいです。
また注意点として、これは記事ごとに作成する必要があります。
リッチリザルトはサイト全体に適用するものではなく、記事ごとに適用するものだからです。
ステップ３：記事にFAQを書く
リッチリザルトのFAQのルールとして、検索結果に表示するFAQと同じ内容のFAQを記事内にも記載する、というものがあります。
そのため、ステップ２で作成したFAQを記事に記載しましょう。
いつもどおり普通に記事を書いて、そこにFAQを付け足すだけです。
見出しで「よくある質問と回答」を作り、そこにFAQを書くのばよくある方法ですね。
もし、すでに記事があって、その記事にリッチリザルトを付けたい方は、やはり記事にFAQのコンテンツを追加してください。
ステップ４：構造化データを作成する
ここからが少しテクニカル。
まずこちらのサイトを使って構造化データを作ります。
使い方は動画で説明してみました。
（※音声でます！）
ステップ５：構造化データをワードプレスの記事に紐付ける
ちょっと手順が多いですが、ついてきてください。
まず、ワードプレスの記事投稿の画面を開いてください。
gutenbergなら右上がこうなってますよね
この︙の部分をクリックしてください。
右下に「オプション」が出てきます。
「オプション」をクリックします。
そうするとポップアップが表示されるので、詳細パネルを見てください。
「カスタムフィールド」にチェックを入れて、「有効化してリロード」ボタンをクリックしてください。
するとエディタの下に「カスタムフィールド」が表示されます。
次に値のところにジェネレーターで作った構造化データを入力します。
これでOKです。
記事を保存しましょう。
正しく構造化データが入っているか確認する方法
ページを公開してから、Googleの公式チェックツールでチェックできます。
よくある質問のリッチリザルト構造化データが正しく組み込めている場合、このような表示になります。
