WordPress で schema.org の FAQPage を実装し、FAQ リッチリザルトを表示させる方法を解説します。
プラグインを使わず、JSON-LD でマークアップした構造化データをカスタムフィールドで出力する方法です。
最初に簡単な準備をしておけば、あとはコピペしていくだけで検索結果に FAQ が表示されます。
Headline
FAQリッチリザルトとは
FAQPage の構造化データマークアップをすると、検索結果に以下のような FAQ が表示されます。
各質問をクリックすると答えが展開され、そこにリンクを入れることも可能です。
表示する内容によっては、検索ユーザーが記事を読まずとも問題を解決できるかもしれませんね。
そのぶん記事へのアクセス数は低下する可能性がありますから、全記事で実装するなど極端なことはやめたほうがよいかと思います。
FAQリッチリザルト表示条件
FAQ リッチリザルトを表示させるためには、いくつかの条件を満たす必要があります。
- ウェブマスター向けガイドライン（品質に関するガイドライン） に沿っていること
- ページ内に FAQ があること（検索結果だけに FAQ を表示させることはできない）
- ユーザーが回答を送信できるタイプではないこと
その他、リッチリザルトならびに構造化データマークアップの詳細は公式サイトをご覧ください。
FAQPage実装方法
以下、WordPress で FAQPage 構造化データを実装する手順です。
- カスタムフィールド出力用のコードを header.php に入れる
- FAQ を含む記事を作成
- ジェネレーターで構造化データを生成
- 投稿ページでカスタムフィールドに構造化データをコピペ
STEP1
カスタムフィールド出力用コードを追加
以下のコードを header.php にコピペしてください。
</head> の上あたりで大丈夫です。
<?php
$schema = get_post_meta( get_the_ID(), 'schema', true );
if( !empty( $schema ) ) {
echo $schema;
}
?>
※ Advanced Custom Fields での実装方法は後述します
STEP2
記事にFAQを書く
FAQ リッチリザルトを表示させたい記事を用意し、そのなかに必ず FAQ コンテンツを入れてください。
「記事内に FAQ コンテンツを用意せず、検索結果だけに FAQ を表示させる」ということはできません。FAQ コンテンツをアコーディオン（クリックしたら回答が表示される）などで表示するのは問題ないようです。
記事ができたら、編集画面を開いておいてジェネレーターに移動しましょう。
STEP3
ジェネレーターで構造化データを生成
Schema Markup Generator (JSON-LD) | TechnicalSEO.com で構造化データを生成します。
最初に「FAQ Page」を選択。
あとは「Question」に質問を、「Answer」に回答を入力していくだけです。記事内の質問と答えをそのままコピペしていけば、リアルタイムでコードが生成されていきます。
項目を追加するときは「+ ADD QUESTION」ボタンを押下してください。
回答内にアンカーテキストを入れるときは、ダブルクォーテーションではなく、シングルクォーテーションを使いましょう。
<!-- NG --> <a href="https://example.com">Sample</a> <!-- OK --> <a href='https://example.com'>Sample</a>
入力後、右上の「G」アイコンをクリックすると 構造化データ テストツール と リッチリザルトテスト の両方でテストできます。
問題なければその横のアイコンをクリックしてコードをコピーしておきましょう。
STEP4
カスタムフィールドに構造化データをコピペ
投稿ページに戻ったら、「表示オプション」で「カスタムフィールド」を表示させます。
エディターの下にカスタムフィールドが表示されるので、名前と値を入力します。
| 名前 | schema |
|---|---|
| 値 | Schema Markup Generator (JSON-LD) で生成したコードを貼り付け |
そのまま記事を公開して完了！
STEP5
Search Console で URL 検査
（3）の段階でテストしておけば問題ないと思いますが、念のため記事公開後に Search Console で URL 検査しておきましょう。
「拡張」欄に「よくある質問」が表示されれば大丈夫です。
実装テストでは、インデックス直後に FAQ リッチリザルトが表示されました。
今後の仕様変更でどうなるかわかりませんが、すぐ反映されるならいろいろテストしやすいですね。
番外編（1）：Advanced Custom Fieldsの実装方法
Advanced Custom Fields を使っている場合の実装例も掲載しておきます。
ACF設定画面
タイトルやラベルなどはお好みでつけてください。
| タイトル | FAQ Schema |
|---|---|
| フィールドラベル | FAQSchema |
| フィールド名 | faq_schema |
| フィールドタイプ | テキストエリア |
その他、デフォルトのままで OK です。
header.phpに追加するコード
header.php に追加するコードはこちら。
<?php if( get_field( 'faq_schema' ) ) { the_field( 'faq_schema' ); } ?>
先ほど設定したフィールド名と合わせてください。
投稿編集画面の専用エリアにコードをコピー
投稿編集画面に入ると、エディターの下に「FAQ Schema」という欄が追加されています。
ここにジェネレーターで生成した JSON-LD コードを貼り付ければ、<head> 内に出力されます。
番外編（2）：Yoast SEO専用ブロック
カスタムフィールドおよび Advanced Custom Fields での実装方法を解説してきましたが、実はプラグイン「Yoast SEO」を使っていると専用ブロックが使えます。
質問と答えを入力していくだけのお手軽さで、もちろん構造化データも JSON-LD できちんと出力されます。
今のところ最も簡単な方法だと思いますが、残念ながら旧エディターには対応していません。
まとめ
以上、WordPress での FAQPage 実装方法でした。
FAQPage に限定して解説しましたが、カスタムフィールドの値に「HowTo」や「Product」など他の構造化データを入れればそれも反映されます。
よいコンテンツを作成したのであれば、できるだけ多くの方に見てもらえるようにしておきたいですね。FAQ リッチリザルトはわりと簡単ですが、CTR は下がる可能性があるのでまずは数記事でテストしてみるのがおすすめです。
それでは、また。