Yoast SEOによるJSON-LD階層構造化マークアップの方法

ダイブツ

この記事は約 13 分で読めます

構造化データには microdata, RDF, JSON-LD の3形式があります。 Google は JSON-LD を推奨しているため、 POCO も JSON-LD を採用しています。

このページでは POCO で実装されている JSON-LD 構造化マークアップについて解説します。直近で Yoast SEO による階層構造化マークアップの発表があり、急遽 POCO でも実装を変更しました。

Yoast SEO が発表した階層構造化マークアップについても解説します。上級者向けの内容ですが図を使って説明したいと思います。

外部リンク:Schema.org is hard; we’re making it easy • Yoast (このページの元ネタ)

Yoast SEO 式 JSON-LD 階層構造化マークアップとは

まずは Yoast SEO の記事が指摘した問題点と改善策を整理しましょう。具体的なコードではなく、概念として理解してください。

Yoast SEOが指摘した問題点

Yoast SEO が指摘したのは、 JSON-LD でマークアップした項目同士の関連性をクローラーが理解できるのか?という問題提起です。

上の図をご覧ください。 POCO の開発初期に実装した JSON-LD コードをGoogle の「構造化データテストツール」で検査した結果です。

この例は投稿ページで、 BlogPosting (投稿ページ本体)と BreadcrumbList (パンくずリスト)という2つの項目が別々に表示されています。

Yoast SEO が指摘したのは、これまでのマークアップ方法ではこの2つ(サイトによってはもっと多くの項目)が独立して存在しているという点です。

別々に出力した項目は検索エンジンのクローラーが理解できない(混乱する)のでは?という問題提起をしました。

改善案は @graph と @id による連結

この問題提起に対して提案された対策、それは @graph の使用と @id による項目同士の連結でした。イメージとして説明します。

上の図をご覧ください。1つの投稿ページに対して以下の項目 (@type) を用意します。

  1. WebSite (ウェブサイト本体)
  2. WebPage (ウェブサイト内のあるページ、記事を入れるフレーム)
  3. Article (あるウェブページ内にある記事)
  4. BreadcrumbList (パンくずリスト)
  5. Person (記事の執筆者)
  6. Organization (サイトを運営している組織)

上記6項目が @graph の配列要素として横並びになっています(上の図ではスペースの関係上、横一列ではなく @graph の要素というイメージになっています)。

このスタイルで書かれた JSON-LD コードを構造化データテストツールにかけると、 Article という1つの大きな階層構造になります。6項目を別々に認識しません。

どうして各項目が連結するのでしょうか?

ここで @id が登場します。 @graph 内の項目同士に同じ @id が存在していたら、クローラーは関連性があるものとみなしてリンクするのです。このリンクを Yoast SEO の記事では接着 (glue) と呼んでいます。

Schema.org では膨大な量の属性を用意しています。私も含めて、あの資料を見た人はうんざりしたのではないでしょうか? Yoast SEO はその中から厳選して、以下の属性値と @id を使って連結化に成功したのでした。

  • isPartOf: ウェブサイト (WebSite) がウェブページ (WebPage) を包むために使い、またウェブページが記事 (Article) を包み込むために使用
  • breadcrumb: パンくずリスト (BreadcrumbList) の指定に使用
  • author: 記事の執筆者 (Person) を指定するために使用
  • publisher: 記事のリリース元 (Organization) を指定するために使用

ちなみに、この @graph と @id による連結方法は W3C による JSON-LD 形式の仕様として書かれています(ただし、非規範的としていますが)。トリッキーな方法ではないのです。

外部リンク:Named Graphs | JSON-LD 1.1

POCO で独自に実装した Yoast SEO 式 JSON-LD コード

POCO では最初 BlogPosting と BreadcrumbList の2項目による JSON-LD 構造化マークアップをしていました。

しかし POCO のリリース後間もなく Yoast SEO から今回の発表がありました。記事を読んだところ、ロジカルで説得力のあるマークアップ方法でした。

そこで、自分自身の研究(勉強)を兼ねて POCO でも同様の実装をしました。解説します。

POCO で対応しているページタイプ

POCO では以下の4タイプのページで JSON-LD の階層構造マークアップを生成します。

  • 投稿ページ
  • 固定ページ
  • ホームページ(固定ページの場合)
  • ホームページ(最新記事一覧の場合)

投稿ページのイメージはすでに紹介した「Yoast SEO式JSON-LD構造化マークアップのしくみ」と同じです。残りの3つについては下のイメージになります。いずれも投稿ページを簡略化させた形になります。

POCOでは原則投稿ページと固定ページしか構造化マークアップはやりません。しかしYoast SEO のワードプレスプラグインを使うとアーカイブページなども対応します。

POCO の機能ではなく Yoast SEO プラグインを使う場合はコードの修正が必要です。このページの後半「Yoast SEO プラグインで構造化マークアップ対応したい」をご覧ください。

外部リンク:Yoast SEO 11.0: Structured data awesomeness • Yoast

投稿ページの例による JSON-LD コード

先ほどの4タイプのページのうち、投稿ページは他の3タイプをカバーしている最も詳細なマークアップとなっています。

下の図は投稿ページのマークアップ結果です。構造化データテストツールで解析すると、これだけ細かくなるのです。

コードの総量は増えました。ただし、最初に紹介した6項目はすべて含まれていますし、Google が要求する全項目を1つのArticle 項目として階層構造化することができました。構造化テストツールの検査の結果、エラーも警告もありません。

下記のリンクからこのマークアップ結果と JSON-LD コードを見ることができます。またコードを編集してどのように階層構造が変わるのか試すこともできます。参考になれば幸いです。

外部リンク:Google構造化データテストツール (POCOのある投稿ページを検証した結果)

投稿ページは Yoast SEO の生成コードと一部の項目で異なる

生成された JSON-LD コードをすべて解説するには項目が多すぎます。上級者向けの内容と思われるため、詳しい解説は省略します。

POCO が生成するマークアップは Yoast SEO のコードと一部違います。どこがどのように違うのか、相違点の部分だけに絞って解説します。

この図の上の表は、 Yoast SEO が生成した JSON-LD コードに含まれる全項目・全属性です。空欄部分は属性が実装されていない/生成されていません。またシャープ (#) のついた属性は @id による連結処理に関連する属性です(連結に使っていない属性もある)。

下の表は POCO の制作で私が実装したマークアップです。 Yoast SEO のマークアップをベースに、赤枠部分が変更点です。赤枠内はこのような変更を意味します。

  • 太字:追加もしくは修正した属性(または属性値)
  • 取り消し線:POCOでは生成しない属性

もちろんこの変更が SEO 的に正解かどうかはわかりません。あくまでも私が技術者としてブログ運営をしてきた経験に基づくものです。もう一度書きますが、 POCO が生成する JSON-LD コードでも構造化データテストツールでエラーも警告もありません。

以降は各項目の変更点を解説します。

WebSite

WebSite はサイト(ブログ)全体の情報なので、属性は多くありません。ただし気になったこともあります。属性の image と description が Yoast SEO では出力していなかったことです。そのため POCO ではこの2つを追加しました。

image はサイトのイメージ画像を指定すべきです。ただひと口にイメージといっても、正方形アイコンなのか、横長ロゴ画像なのか、テーマ画像なのか、複数候補があります。

ここでは正方形のアイコンを指定しました。根拠はあります。ブラウザでブログにアクセスすると、ブラウザ左上に出るイメージは正方形アイコンです。またスマホのホーム画面で表示される画像も正方形アイコンだからです。

description はサイトの説明です。ワードプレスでは bloginfo(‘description’) 関数でサイトの説明文を取得することができます。せっかくある項目を省略するのはもったいないため、 POCO では description 属性を追加しました。

WebPage

WebPage はとても混乱しました。調べると似たような項目がたくさんあります。

  • WebPage
  • Article
  • BlogPosting
  • NewsArticle

NewsArticle は一部の情報によると検索結果でカルーセル表示されやすいとも言われています。しかしブログはニュースではありません(ニュースの解説記事に NewsArticle を使っても良い)。

何を使うべきでしょうか? BlogPosting にすべきでしょうか?

検討の結果、私はこのように判断しました。

  • WebPage は記事を部品として含むウェブページのフレームと解釈する。なぜなら WebPage 項目でも投稿ページならをパンくずリスト入れ、固定ページの場合は入れないなど分けて処理している。
  • Article を記事本文と位置付ける。 パンくずリストと同じで WebPage を構成する部品とする。ただし記事の URL (パーマリンク)は Yoast SEO にならって Article ではなく WebPage に記載する。
  • BlogPosting は使わずに記事本文は Article で統一する。

そのほか、 Yoast SEO との変更点はこのようになっています。

  • image 属性は削除、なぜなら WebPage だけ primaryImageOfPage という専用属性があるから。両方あってもエラーではないが、冗長ではないか?
  • datePublished, dateModified は Article と重複しているので削除。ただし WebPage 内に複数の記事を表示させるのであれば、最終更新日などの情報を WebPage が持っても良いという考え。
  • description は記事の概要という解釈。そのため WebPage ではなく Article で記載すべきとして削除。複数の記事があったり、まとめページやアーカイブ(記事一覧)ページであれば WebPage でも持っても良いという考え。

Article

Article は記事本文なのでマークアップの最も重要な部分です。そのため抱えている属性も一番多いです。

Yoast SEO では description を Article ではなく WebPage の属性としていました。私には違和感だったので Article に移動しました。少なくとも個人ブログなら Article に記載すべき属性です。

keywords は記事の内容を簡潔に表す SEO 的には本来必要な項目です。しかし W3C によると、スパム攻撃に使われてきた経緯があり現在は利用を推奨していません。この考え方にならい POCO でも削除しました。

commentCount は記事に対するコメント数です。通常のワードプレスブログならコメント欄があるのが普通です。しかし POCO ではスパム対策のためコメント欄はありません。したがってこの属性も削除しました。

Organization

Organization はサイト運営組織の情報を記載します。法人向けの属性であり個人ブログでは本来は不要なはずです。しかしそれではもったいないので、 WebSite と同じサイト情報を Organization でも持たせています。

image と logo はともに #logo という属性値でした。法人であれば会社のロゴが別にあり、 #logo でもいいでしょう。しかし個人ブログでは基本的に運営者ロゴとサイトロゴは同じなはずです。そのため属性値をそれぞれ #siteimage, #sitelogo に変更しました。もちろん他の名前に変更可能です。

そして、 image は正方形アイコン、 logo は横長のアイコンを別々に指定しています。 POCO は元々正方形アイコンと横長のロゴを両方実装しているためです。アイコンしかない場合は logo もアイコン画像を指定すれば良いでしょう。

Person

Person は特に変更した属性はないのですが、 POCO 独自の設定(定数)を使っているので簡単に説明します。

image (#personlogo) の値は定数の URL_PORTRAIT_IMAGE を出力します。必ず自画像を用意してください。

url はプロフィールページです。 POCO の定数である URL_AUTOBIOGRAPHY_PAGEを使います。できれば SNS ページではなくブログ内の詳細なプロフィールページを指定することをお勧めします。

sameAs は SNS サービスのアカウント (URL) を指定します。 POCO では標準でツイッターのアカウントを作ることになっています。そのため定数の TWITTER_ID がここで使われます。

他にも facebook や他の SNS のアカウントがあれば追加しましょう(コード修正が必要)。

おまけ:Schema.org による画像属性の違い

ちなみに、画像系の属性として image, logo, primaryImageOfPage, ImageObject の4つがあります。 Shema.org によると以下の違いがあることが分かりました。補足情報としてシェアさせていただきます。

  • image: 項目の画像。 URL を指定するか、もしくは詳しい情報がある ImageObject を指定する。
  • logo: image のサブ属性。
  • primaryImageOfPage: ページ内のメイン画像、 WebPage 属性内で使い、 ImageObject を属性値に持つべき。
  • ImageObject: 画像ファイルの情報。

この情報によると、画像関係でまず使うべき属性は image 、属性値は ImageObject です。

logo はサブ属性なので、 image をまず指定して追加情報として必要な場合に logo を使うと考えられます。確かに logo は Organization でしか使っていない属性ですね。

image の属性値を URL で指定するなら @id を使うのではなくて url を使うべきです。しかし Yoast SEO では URL 表記に @id としています。正しいのでしょうか?

試しに @id の中身をただの英数字だけにしてみたところ、構造化データテストツールは @id の中身を URL 形式に強制変換しました。したがって Yoast SEO のコードは正しかったです。 url ではなく @id を使いましょう。

Yoast SEO プラグインで構造化マークアップ対応したい

Yoast SEO ワードプレスプラグインの Ver. 11.0 から、上記の形式による構造化マークアップに対応となりました。このプラグインを POCO で使って構造化マークアップを出力する場合、以下のコード修正が必要です。

POCO の header.php 内にてメタディスクリプションを出力するコードがあります。この中で the_json_ld_graph が呼ばれている部分を削除してください(テーマエディターを使うこと)。

削除した後コードを保存し、 Yoast SEO プラグインをインストール・有効化してください。

Yoast SEO プラグインの一般的な使い方については解説を省略します。他のテーマで Yoast SEO プラグインを使う場合は他のサイトにある解説を参照してください。

まとめ

構造化マークアップについては何が正解なのか、私もわかりません。しかし大切なことはクローラーに必要な情報を誤解がないように届け、きちんと自分の記事をインデックスに登録してもらうことです。

このページで書かれている内容は今後数か月かけて検証していきます。修正や追加事項があれば反映させていきます。

この記事のカテゴリ:POCOで学ぶWordPress
この記事のタグ: なし

シェアする

POCOを作った人

ダイブツ

WordPressでブログをはじめてみたものの、既存のテーマでは満足できなくてPOCOを制作しました。親サイトのコンセプト「自分の知識やノウハウをすべて公開する」にならって、POCOを通じて得たWordPressの知識はこのサイトで紹介します。

親サイトにある私の紹介:プロフィール

フォローする