WordPressで記事別に構造化データを挿入する方法【Advanced Custom Fields プラグイン導入時】
WordPressにて、特定の記事に対して任意の構造化データを挿入したい。
ずいぶんな数の記事が見つかるものの、あちこちで異なる情報だったりで困惑したのでこちらでまとめた。
まず、実装環境には、advanced custom field プラグインとYoast SEO プラグインが導入されている。
そこで下記を試みたが
・デフォルトのカスタムフィールドで実装しようと試みたが、advanced custom fieldsが影響してカスタムフィールドが表示できなかった。
・Yoast SEOで実装を試みたが、旧エディタには未対応（classicEditor使用中の為）
advanced custom fieldsでカスタムフィールドにjson-ldを実装を試みたところ、支障なさそうだった。
【管理画面にFAQSchemaの記述部分を追加する方法】
advanced custom fieldsにてフィールドグループの新規追加
フィールドグループにて
・タイトル：JSON-LD（FAQPage）
・フィールドラベル：FAQSchema
・フィールド名：faq_schema
・フィールドタイプ：テキストエリア
※フィールド名はheader.phpのget_fieldと統一しないとheader内に生成できない
【ヘッダー内にget_fieldでFAQPage構造化の記述部分を生成する方法】
header.php
</header>直前に下記を記述
<?php if( get_field( ‘faq_schema’ ) ) { the_field( ‘faq_schema’ ); } ?>
【seoryでFAQPage構造化データを生成する方法】
下記のリンクから構造化ジェネレータへ飛べる。
構造化ジェネレータではプレースホルダーを見本にして、必要事項を入力していくだけで構造化データが作成できる。
構造化データの作成が完了したら、記事下部にある「クリックして構造化データをコピー」を押す。
構造化データテストツールへ飛ぶので、先ほど作成した構造化データのエラーチェックを行う。
下記リンクの構造化データテストツールで検証
https://developers.google.com/search/docs/advanced/structured-data
- Schema Markup Validatorを選択
- コードスニペットを選択
- 既にクリップボードにコピーされているのでそのままCtrl+Vでペースト
- テストを実行
- エラーなし・警告なしを確認
※注意※ <script type=”application/ld+json”>*</script>を生成したコードの前後に追加する必要がある。
生成後の「見やすい構造化データ」
縦に長くなるので一部のみ抜粋
{
“@context”: “http://schema.org”,
“@type”: “FAQPage”,
“description”: ”
職務記述書についてのページで、よくある質問を紹介しています。
“,
“mainEntity”:
[
{
“@type”: “Question”,
“name”: ”職務記述書（ジョブディスクリプション）とは？
“,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: ”Job Description：ジョブディスクリプションとも呼ばれ、ポジション・職務内容・必要資格・スキルなどが記載されたものです。職務内容が明確化されることによって様々なメリットがあります。 特に求人・人事評価の時に効力を発揮するため、昨今の日本では大企業を中心に多くの企業が導入を進めています。業務の曖昧さを回避し、業務上の無駄や非効率的な部分を排除できるため、専門スキルを持った人材採用においては非常に重要な雇用管理文書です。
“,
“url”: ”
”
}
},
{
“@type”: “Question”,
“name”: “
【FAQPage構造化データにおいて不要な記述を削除する方法】
構造化ジェネレータで作成した構造化データは、改行コードやスペースを多量に挿入し、「見やすく」表示されている。
JSON-LDのメリットはHTMLを汚さない事だが、「見やすい状態の構造化データ」では改行やスペースが多く、HTMLが無駄に長くなってしまう。
この「見やすい状態の構造化データ」を「最小の構造化データ」へ改修することをお勧めする。
下記リンクから改行・スペース・タブの削除が行える。
https://html-css-javascript.com/n-space-tab/
使い方は簡単
- 左のテキストエリアに先ほど生成した「見やすい状態の構造化データ」をペーストする。
- 「改行」「タブ」「行頭・行末のスペース」の３つにチェックを入れる。
- 右側に自動で「最小の構造化データ」が生成される。
※注意※ すべてのスペースにチェックを入れない事。ここにチェックを入れるとコード内のスペースまで削除されて、生成後の構造化データが正常に動作しなくなる。
生成後の「最小の構造化データ」
<script type=”application/ld+json”>{“@context”: “http://schema.org”,”@type”: “FAQPage”,”description”: “職務記述書についてのページで、よくある質問を紹介しています。”,”mainEntity”:[{“@type”: “Question”,”name”: “職務記述書（ジョブディスクリプション）とは？”,”acceptedAnswer”: {“@type”: “Answer”,”text”: “Job Description：ジョブディスクリプションとも呼ばれ、ポジション・職務内容・必要資格・スキルなどが記載されたものです。職務内容が明確化されることによって様々なメリットがあります。 特に求人・人事評価の時に効力を発揮するため、昨今の日本では大企業を中心に多くの企業が導入を進めています。業務の曖昧さを回避し、業務上の無駄や非効率的な部分を排除できるため、専門スキルを持った人材採用においては非常に重要な雇用管理文書です。”,”url”: “https://motifyhr.jp/blog/base/job_description_make/”}},{“@type”: “Question”,”name”: “最近日本で注目されるようになった理由は？”,”acceptedAnswer”: {“@type”: “Answer”,”text”: “テレワークなどの導入によって会社に出社しない従業員が増えました。職務遂行能力や成果で人事評価を行う必要があるだけでなく、職務記述書のような明確化された雇用管理文書の利便性が増したため、注目されています。 また、日本全体の問題として少子高齢化が進み、人材不足が加速していることも理由の一つです。職務記述書を作成することで、より職務や職位、スキルに合った雇用が実現しやすいため、注目されています。”,”url”: “https://motifyhr.jp/blog/base/job_description_make/”}},{“@type”: “Question”,”name”: “ジョブ型雇用とは？”,”acceptedAnswer”: {“@type”: “Answer”,”text”: “職務内容を明確化し、労働時間や年功序列ではなく成果で評価する雇用制度のことです。 職務記述書には複数の項目があり、従業員に求めるものが記載されています。そのため、お互いに何を求めているのかが明確になっているため、雇用後の応募の段階で、適正な職務範囲が把握可能です。”,”url”: “https://motifyhr.jp/blog/base/job_description_make/”}},{“@type”: “Question”,”name”: “作成するメリット”,”acceptedAnswer”: {“@type”: “Answer”,”text”: “生産性の向上、人事評価の公平化、雇用時の人材マッチ度の向上、などが挙げられます。”,”url”: “https://motifyhr.jp/blog/base/job_description_make/”}},{“@type”: “Question”,”name”: “作成するデメリット”,”acceptedAnswer”: {“@type”: “Answer”,”text”: “業務範囲の拡大が難しい、ジョブローテーションができない、業務の属人化、などが挙げられます。”,”url”: “https://motifyhr.jp/blog/base/job_description_make/”}}]}</script>
【管理画面にてFAQPagの構造化データを記述】
WordPressの管理画面にて、記事投稿画面下部にカスタムフィールドが追加されている。
追加されたカスタムフィールドのテキストエリアに、先ほど生成した「最小の構造化データ」をペーストする
【プレビュー画面で構造化データの生成を確認】
ctrl+uでソースコードを表示
ctrl+fで「faqpage」と入力して検索
ソースコード内に構造化データが生成されていることを確認できたらOK
ここまでで、特定の記事内に構造化データを挿入する為に行った事
- 管理画面にFAQSchemaの記述部分を追加
- ヘッダー内にget_fieldでFAQPage構造化の記述部分を生成
- seoryでFAQPage構造化データを生成
- FAQPage構造化データにおいて不要な記述を削除
- 管理画面にてFAQPagの構造化データを記述
- プレビュー画面で構造化データの生成を確認
あとは、
- プレビューで挿入された構造化データが正しいか
- 本番環境での反映、構造化データチェック
- 当該ページでのレイアウト・ソースコードチェック
- 当該ページ以外のページレイアウト・ソースコードチェック
【構造化データのテスト】
ソースコードからFAQPage構造化のコード部分である<script>*</script>をコピー
構造化データテストツールで検証
https://developers.google.com/search/docs/advanced/structured-data
- Schema Markup Validatorを選択
- コードスニペットを選択
- ソースコードからコピーしたFAQPage構造化のコード部分をペースト
- テストを実行
- エラーなし、警告なしを確認
【更新】
更新後も同様の検証を行う
他の構造化データと競合・重複していないか、追加でURLでの検証も行う
構造化データテストツールで検証
https://developers.google.com/search/docs/advanced/structured-data
Schema Markup Validatorを選択
URLを選択
当該ページのURLを入力
当該ページのレイアウトとソースコードを確認
同様のテンプレートを使っているページのレイアウトとソースコードを確認
ここまでで問題なければ実装完了。
お疲れさまでした。
今回はFAQPage構造化を例に挙げたが、どのような構造化データでも同様の方法で任意のページへ挿入できる。
下記の記事からそれぞれの構造化データが作成できるので是非。
- FAQ【FAQPage】構造化データ作成 https://seory.info/faqpage/
- HowTo【HowTo】構造化データ作成 https://seory.info/howto/
- Q&A【QAPage】構造化データ作成 https://seory.info/qapage/
- ウェブサイト情報【WebSite】構造化データ作成 https://seory.info/website/
- 求人情報【JobPosting】構造化データ作成 https://seory.info/jobposting/
- サイトナビゲーション【SiteNavigationElement】構造化データ作成 https://seory.info/sitenavigationelement/
- ニュース記事情報【NewsArticle】構造化データ作成 https://seory.info/newsarticle/
- 記事情報【Article】構造化データ作成 https://seory.info/article/
- 企業情報【Organization】構造化データ作成 https://seory.info/organization/
- 動画【VideoObject】構造化データ作成 https://seory.info/videoobject/
- 商品情報【Product】構造化データ作成 https://seory.info/product/