III-B8 実装方法をCMS別に確認する

III-B2からIII-B7で学んできたJSON-LD(III-B2〜III-B7参照)を、実際に自社サイトへ実装するには、使っているCMSに応じたやり方を選ぶ必要があります。同じOrganizationやArticleのコードでも、WordPressか、ECプラットフォームか、フルスクラッチのサイトかで実装ルートはまるで変わってきます。このレッスンでは、その違いを整理し、担当者や外注先への指示に落とし込めるところまで具体化します。

実装ルートは大きく3つ

構造化データの実装方法は、大きく3つのルートに分けられます。

どのルートを選ぶにせよ、まず自社の環境が何を自動生成し、何を自動生成しないかを仕分けるところから始まります。

WordPressでの選択肢

WordPressでは、多くのSEOプラグインがOrganizationやArticleといった基本的なJSON-LDを自動生成する機能を持っています。ただし、Product・FAQPage・Reviewのような型は自動生成の対象外になっていることも多く、その場合はテーマのfunctions.phpにコードを書き足すなどして、動的に出力する必要があります。

add_action('wp_head', function () {
  if (is_singular('product')) {
    echo '<script type="application/ld+json">' . json_encode([
      '@context' => 'https://schema.org',
      '@type' => 'Product',
      'name' => get_the_title(),
    ]) . '</script>';
  }
});

要するに、プラグイン任せにできる範囲と、手を動かす必要がある範囲を、導入前に線引きしておくことが肝心です。

ECプラットフォーム・ヘッドレスCMSでの注意点

Shopifyのような主要ECプラットフォームは、商品ページ向けの基本的なProductスキーマ(III-B6参照)をテーマ側であらかじめ出力していることが多い一方、AggregateRatingやReviewは別途レビュー機能との連携が必要になるケースがあります。テーマを変更した際に、構造化データの出力が消えていないかを必ず確認してください。Next.jsなどのヘッドレスな環境では、プラグインに頼れない代わりに、コンポーネント側で自由にJSON-LDを生成できます。GTM経由で配信する方法もありますが、JavaScriptの実行後にコードが挿入される仕組みのため、AIクローラーがJavaScriptを実行しない場合は認識されないリスクがあります(編III-D参照)。可能な限り、初期HTMLの中に直接埋め込む方法を優先しましょう。

実践ステップ

1. 1
   自社サイトのCMS(WordPress・ECプラットフォーム・ヘッドレス等)を確認する
2. 2
   使用中のテーマ・プラグインが自動生成する構造化データの型を洗い出す
3. 3
   自動生成の対象外になっている型(Product・FAQ・Reviewなど)をリストアップする
4. 4
   対象外の型について、手動コード埋め込みかカスタムフィールド連携かを選ぶ
5. 5
   GTMを使う場合は、JavaScriptレンダリングに依存しない実装で問題ないか確認する
6. 6
   テーマ変更やリニューアル時に既存の構造化データが引き継がれているかを、運用チェックリストに追加する

このレッスンはテキストとスライドで学べます。スライドは上のビューアからご覧ください。