非技術者のための Yoast SEO JSON-LD 構造化データ 超入門

Yoast SEO が Ver.11からJSON-LDを用いた構造化データの出力に対応しSEO対策がより簡単になりました。お使いのテーマが構造化データのマークアップに対応していなくても、基本的な事項を設定するだけで、テンプレートに手を加えることなく構造化データが自動で生成・出力されます。

それまでは、JSON-LDを使った構造化データを簡単に出力するには、有料のプラグインの力を借りるしかありませんでした。Yoast11の登場によって、個人でも簡単に実装できるようになったことは、おそらく凄いことだと思いますが、無料なだけに何となくそのまま使っている方も多いのではないでしょうか?

ただ、個人のサイトであっても、それなりにSEO対策を施したいなら、Yoast SEOのJSON-LDについて多少は理解を深めておきたいところです。

というわけで、この記事の前半では、Yoast SEOが出力する 構造化データの種類や仕組みを概観し、後半では簡単なカスタマイズ方法について解説したいと思います。

Yoastが出力する構造化データは何が違うのか

使用するテーマやプラグインによって、サイトのホームページ(最新の投稿)と投稿ページで出力される構造化データが、どのように変化するかを Googleの構造化データテストツールで比較しました。

WordPress公式のTwenty Twenty テーマ (microformat)

Twenty Twenty単体では、microformat のマークアップで hentry のみが出力されます。hentry はWeb上のエピソードや日付などを含むコンテンツの存在を検索エンジンに知らせるシンプルなマークアップ形式で、htmlタグ内に class 属性を使って記述されます。

構造化データのマークアップに対応しているテーマ(schema.org+microdata)

テーマ側で 構造化データを出力するタイプでは、schema.org と呼ばれる構造化データを定義する仕様に基づいて、対応するhtmlタグ内に各種属性を記述する microdata という方法で 構造化データをマークアップしています。※上記画像は Astra が出力する構造化データ

Yoastが出力する構造化データ(schema.org+JSON-LD)

上記画像でYoast SEOが出力しているのは、ホームページでは CollectionPage、投稿ページでは Article だけです。

hentryはWordPress標準で出力されるものでYoastが出力しているものではありません。

前述の構造化データを出力するテーマに比べて、一見少ないように見えますが、これは、Yoastが 構造化データを microdataのようなhtmlタグの属性ではなく、JSON-LDという JavaScript を用いた方法で schema.org による構造化データを出力しているためです。

構造化データテストツールで CollectionPage や Article をクリックしてみてください。schema.org+microdata で表現されていた多様な構造化データが 互いに関連付けられたうえで、CollectionPage や Article という1つの オブジェクト(≒型) にまとまって格納されていることがわかります。

Yoastの構造化データは、検索エンジンの理解を助けるための、コンテンツの内容、著者、Webサイトの内の他のコンテンツとの関係(タグやパンくずリスト)をターゲットにしています。ヘッダーやフッター、サイドバーなど、表示中のページのHTML構造に関するものは含まれません。

Yoast の JSON-LD を使った構造化データの仕組み

従来、Yoastの schema.org+JSON-LD の構造化データは、schema.org+microdata のように個別に出力されていました。

もちろん個別に出力された構造化データはそれぞれに意味を持っていますが、各構造化データ間の関連性をどのように表現するかは長年の課題だったようです。そして、Yoast SEO 11でその課題が克服され、現在も改良が施されています。

Yoastが示す 構造化データ(Article型)の例を見てみましょう。

上記の画像はごく一部です。ぜひ、Googleの構造化データテストツールでフルバージョンを確認してみてください。なお、サンプルはYoastの設定項目を残さず入力した場合のもので、個人のブログではそれほど長大になることはないでしょう。

テストツールの出力結果をざっと眺めてみてみると、あちこちに @id という項目や isPartOf と書かれてネスト(入れ子)された項目があるはずです。この部分が Yoast式JSON-LDの最大の特徴で、各構造化データの相互関連性や定義を明確に表現することを可能にしています。

サンプルの構造化データでは、まずArticle(記事)型の宣言で始まり、記事のタイトル・発行日・更新日・タグ・カテゴリーなど記事の内容そのものについての情報 ※1が示されます。
isPartOf @type WebPage は、この記事が属しているWebページを示しています。この中には Yoastで設定した SEOタイトル・メタディスクリプション ※2に加えて、この記事を掲載しているWebページと他のページとの関連を示す、以下のような情報が含まれています。
  • isPartOf @type WebSite
    この記事を掲載しているWebページが属しているWebサイトが示され、そのWebサイトの公開者=publisher がどこの誰なのか、ロゴマークやイメージ画像、FacebookやTwitterアカウントのURL ※3などを関連付けて表現しています。また、検索ウィンドウなどサイトが実装している機能についても表現されます。

    なお、ひとりで運営している個人サイトの場合、publisherの値は、後述の「isPartOf @type Person」と同じになります。

  • primaryImageOfPage
    この記事を掲載しているWebページの アイキャッチ画像に関する情報が示されます。

  • breadcrumb
    お馴染みのパンくずリストで、この記事を掲載しているWebページのWebサイト内における位置関係を示します。階層構造は itemListElement によって表現されます。

author @type Person は、この記事の著者に関する情報を示します。著者がどこの誰なのか、プロフィール画像、FacebookやTwitterアカウントのURL ※3などを関連付けて表現されます。
mainEntityOfPage @type WebPage は、この記事の主要なトピックが掲載されているWebページを示します。前述の「isPartOf @type WebPage」で既に表現されていますが、GoogleはAMPページにおけるArticleの構造化データとして「mainEntityOfPage」を推奨プロパティとしていて ※4、記述がないとチェックツールで警告を表示します。
publisher は、そのWebサイトの公開者=publisher がどこの誰なのか、ロゴマークやイメージ画像、FacebookやTwitterアカウントのURL ※3などを関連付けて表現しています。こちらも、「isPartOf @type WebSite」で既に表現済みですが、GoogleはAMPページにおけるArticleの構造化データとして「publisher」を必須プロパティとしていて ※4、記述がないとチェクツールでエラーを表示します。
  1. 記事のタイトルは headline、発行日は datePublished、更新日は dateModified、タグは keywords、カテゴリーは articleSection の項目名で表現されます。
  2. SEOタイトルは name、メタディスクリプションは description の項目名で表現されます。
  3. sameAs と書かれているところを見てください。
  4. Googleが認識しているかどうかは別として、少なくとも 現状の 構造化データテストツールでは、isPartOf でネストされた情報を考慮したチェックができないのかもしれません。

構造化データの簡単なカスタマイズ

Yoast SEOでは、Webサイトの性質と表示するページの種類に合わせて、様々な構造化データが自動で出力され、お手軽である反面、汎用性が重視されているので、サイトにとって不要な構造化データがあるかもしれません。ところが、プラグインの設定画面から出力のON・OFFを任意に変更することは出来ません。

ナレッジベースでは、コードスニペットを使って制御する方法が紹介されているものの、本格的にカスタマイズするには、schema.org の仕様についての理解や PHPでの配列操作 などが必要で ちょっと手を出したくない(というより出せない)感じです。

今回は YoastのナレッジベースとGitHub で紹介されている中から、ほぼコピペでも使用できるコードを紹介します。コードは子テーマのfunctions.php に貼り付けるか Code Snippets プラグインなどを使って記述します。

サイト全体で出力を停止する

お使いのWordPressテーマ自体に、構造化データのマークアップがあり、YoastのJSON-LDによる構造化データは不要な場合がほとんどです。そんな時には、サイト全体でYoastのJSON-LDを無効化できます。

add_filter( 'wpseo_json_ld_output', '__return_false' );

特定の記事で出力を停止する

サイト内の特定のページで、独自にJSON-LDによる構造化データ(商品・レビュー・求人情報など)を実装している場合など、一部のページのみYoastのJSON-LDが不要な場合は、以下のコードを使います。

add_filter( 'wpseo_json_ld_output', 'yoast_seo_json_remove_partial' );
function yoast_seo_json_remove_partial() {
  if ( is_single ( 123456 ) ) {
    return false;
    }
}
  • 3行目の 123456 となっている部分を実際の投稿IDに置き換えます。
  • 複数の投稿IDを指定する場合は is_single ( array( 123456, 1234567, 12345678 ) ) の振合いで記述します。
  • 投稿ページ全体で無効化するには、カッコ内の数字を削除して is_single () とすればOKです。
  • 固定ページの場合は、is_single() を is_page() に置き換えて記述します。
  • カスタム投稿タイプの場合は、 is_single (‘cpt_slug’) のように、カッコ内にカスタム投稿タイプのスラグを記述します。

他の条件を追加したい場合は、以下のページを参考にカスタマイズしてください。

構造化データ内の特定の項目を取り除く

Yoastが出力するJSON-LDから特定の構造化データ項目(プロパティ)を取り除くこともできます。例えば、パンくずリスト(breadcrumb)を取り除くコードは以下のようになります。

add_filter( 'wpseo_schema_webpage', 'lmt_filter_schema_property' );
function lmt_filter_schema_property( $data ) {
  unset( $data['breadcrumb'] );
  return $data; 
}
  • 1行目 の wpseo_schema_webpage 部分で構造化データの項目(プロパティ)を含むオブジェクト名を半角小文字で指定します。breadcrumb は @type Article に直接属している項目ではなく isPartOf によって ネストされている @type WebPage に属する項目となっていることに注意してください。
  • 3行目の breadcrumb 部分で、取り除く項目名を指定します。複数の項目を取り除く場合は、 unset~ の行を適宜追加してください。
  • 必須プロパティや推奨プロパティを除去すると、テストツールでエラーや警告が出ます。プロパティを削除した時は、エラー等がないかテストツールで確認しておくことをお勧めします。詳しくは Google検索デベロッパー ガイド を参照してください。

おまけ

一応、以下のようなコードでオブジェクトを変更することも可能です。変更によってリッチリザルトに何らかの影響を及ぼす可能性があるので、使用に際しては注意する必要があります。

Articleオブジェクトを除去し WebPage として構造化データを出力する

add_filter( 'wpseo_schema_article', '__return_false');

/* 以下応用例 */
add_filter( 'wpseo_schema_webpage', 'lmt_filter_schema_property' );
function lmt_filter_schema_property( $data ) {
  unset( $data['datePublished'] );
  return $data; 
}
  • 1行目で Articleが削除されると、かわりに上位構造の 「WebPage 」から始まる構造化データが出力されます(箱の中身が出てくるイメージ)。
  • さらに4行目以降を追加して、WebPageから投稿日(datePublished)を削除することもできます。Googleは WebPageオブジェクトについて必須プロパティを定めていないので、エラーは出力されません。

ArticleオブジェクトをCreativeWork に変更する

このコードは、WP Last Modified Info プラグインが、最終更新日だけをGoogleに認識させる方法として、CreativeWork を利用するアプローチにヒントを得ました。

add_filter( 'wpseo_schema_article', 'change_filter_schema_object' );
function change_filter_schema_object( $data ) { 
  $data['@type'] = 'CreativeWork';
  unset( $data['datePublished'] );
  unset( $data['articleSection'] );
  return $data; 
}

上記のコードでは、Articleオブジェクトを 最も汎用性のある CreativeWork に変更し、公開日とカテゴリー を削除しています。

※タイプ CreativeWork のオブジェクトでは、公開日を示す datePublished は必須・推奨プロパティではありません。なお、もともとArticleオブジェクト で出力され、カテゴリーを示す articleSection プロパティは Google で認識されず、テストツールで警告が出るので削除しています。


いかがでしたか? 個人のサイトで Yoastが出力する構造化データをいじる必要はほとんどないと思いますが、使い慣れたテーマやプラグインが出力する構造化データと重複する場合には、この記事で紹介したコードで微調整するか、テーマやプラグイン側の構造化データを停止して、Yoastに一本化するのも良いと思います。

なお、Yoastの構造化データについてより高度なカスタマイズに挑戦したい方は、公式サイトの以下のページが参考になります。

ただ予備知識がない場合は(私もです)、上記のページ内容を理解するための労力と時間がかかる割に、得られる効果は少ないかもしれません。カスタマイズはほどほどにして、コンテンツ作成に力を入れた方が、きっと幸せになれます。