WordPressのFAQPage構造化データマークアップ-FAQリッチリザルトを表示させる方法

FAQPage 構造化データマークアップ

WordPress で schema.org の FAQPage を実装し、FAQ リッチリザルトを表示させる方法を解説します。

プラグインを使わず、JSON-LD でマークアップした構造化データをカスタムフィールドで出力する方法です。

最初に簡単な準備をしておけば、あとはコピペしていくだけで検索結果に FAQ が表示されます。

FAQリッチリザルトとは

FAQPage の構造化データマークアップをすると、検索結果に以下のような FAQ が表示されます。

FAQリッチリザルトサンプル

各質問をクリックすると答えが展開され、そこにリンクを入れることも可能です。

FAQリッチリザルトの回答にリンクを入れる

表示する内容によっては、検索ユーザーが記事を読まずとも問題を解決できるかもしれませんね。

そのぶん記事へのアクセス数は低下する可能性がありますから、全記事で実装するなど極端なことはやめたほうがよいかと思います。

FAQリッチリザルト表示条件

FAQ リッチリザルトを表示させるためには、いくつかの条件を満たす必要があります。

その他、リッチリザルトならびに構造化データマークアップの詳細は公式サイトをご覧ください。

FAQPage実装方法

以下、WordPress で FAQPage 構造化データを実装する手順です。

  1. カスタムフィールド出力用のコードを header.php に入れる
  2. FAQ を含む記事を作成
  3. ジェネレーターで構造化データを生成
  4. 投稿ページでカスタムフィールドに構造化データをコピペ

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」を選択。

Schema Markup Generator

あとは「Question」に質問を、「Answer」に回答を入力していくだけです。記事内の質問と答えをそのままコピペしていけば、リアルタイムでコードが生成されていきます。

項目を追加するときは「+ ADD QUESTION」ボタンを押下してください。

Schema Markup Generator Question and Answer

回答内にアンカーテキストを入れるときは、ダブルクォーテーションではなく、シングルクォーテーションを使いましょう。

<!-- NG -->
<a href="https://example.com">Sample</a>

<!-- OK -->
<a href='https://example.com'>Sample</a>

入力後、右上の「G」アイコンをクリックすると 構造化データ テストツールリッチリザルトテスト の両方でテストできます。

問題なければその横のアイコンをクリックしてコードをコピーしておきましょう。

Schema Markup Generator テストとコードコピー

STEP4
カスタムフィールドに構造化データをコピペ

投稿ページに戻ったら、「表示オプション」で「カスタムフィールド」を表示させます。

カスタムフィールド表示

エディターの下にカスタムフィールドが表示されるので、名前と値を入力します。

名前schema
Schema Markup Generator (JSON-LD) で生成したコードを貼り付け
カスタムフィールド入力

そのまま記事を公開して完了!

STEP5
Search Console で URL 検査

(3)の段階でテストしておけば問題ないと思いますが、念のため記事公開後に Search Console で URL 検査しておきましょう。

「拡張」欄に「よくある質問」が表示されれば大丈夫です。

URL検査-拡張-よくある質問

実装テストでは、インデックス直後に FAQ リッチリザルトが表示されました。

今後の仕様変更でどうなるかわかりませんが、すぐ反映されるならいろいろテストしやすいですね。

番外編(1):Advanced Custom Fieldsの実装方法

Advanced Custom Fields を使っている場合の実装例も掲載しておきます。

ACF設定画面

タイトルやラベルなどはお好みでつけてください。

タイトルFAQ Schema
フィールドラベルFAQSchema
フィールド名faq_schema
フィールドタイプテキストエリア

その他、デフォルトのままで OK です。

ACFでFAQPageコード出力エリア作成

header.phpに追加するコード

header.php に追加するコードはこちら。

<?php if( get_field( 'faq_schema' ) ) { the_field( 'faq_schema' ); } ?>

先ほど設定したフィールド名と合わせてください。

投稿編集画面の専用エリアにコードをコピー

投稿編集画面に入ると、エディターの下に「FAQ Schema」という欄が追加されています。

FAQ Schema 専用欄

ここにジェネレーターで生成した JSON-LD コードを貼り付ければ、<head> 内に出力されます。

番外編(2):Yoast SEO専用ブロック

カスタムフィールドおよび Advanced Custom Fields での実装方法を解説してきましたが、実はプラグイン「Yoast SEO」を使っていると専用ブロックが使えます。

Yoast SEO 構造化データ用ブロック

質問と答えを入力していくだけのお手軽さで、もちろん構造化データも JSON-LD できちんと出力されます。

Yoast SEOのFAQブロック

今のところ最も簡単な方法だと思いますが、残念ながら旧エディターには対応していません。

まとめ

以上、WordPress での FAQPage 実装方法でした。

FAQPage に限定して解説しましたが、カスタムフィールドの値に「HowTo」や「Product」など他の構造化データを入れればそれも反映されます。

よいコンテンツを作成したのであれば、できるだけ多くの方に見てもらえるようにしておきたいですね。FAQ リッチリザルトはわりと簡単ですが、CTR は下がる可能性があるのでまずは数記事でテストしてみるのがおすすめです。

それでは、また。

Author

Naifix 編集部
Web コンサルティング業務を中心に、サイト制作・コンテンツ販売・メディア運営代行業務を行っております。当サイト(Naifix)では、おもにブログ初心者向けのノウハウを無料で配信しています。

執筆・監修 Direx Marketing, Inc.