【WordPress】テーマにJSON-LD形式の構造化データを追加する方法

【WordPress】テーマにJSON-LD形式の構造化データを追加する方法 WordPress

SEO対策として欠かせないのが構造化データです。中でもJSON-LD(JavaScript Object Notation for Linked Data)は、Googleが推奨している記述形式で、検索エンジンにコンテンツの意味を正しく伝えるために非常に効果的です。

この記事では、WordPressテーマにJSON-LD形式の構造化データを追加する方法を具体的に解説します。

スポンサーリンク

JSON-LDとは

JSON-LDは、構造化データをHTML内に埋め込むためのJavaScript形式の記述方法です。検索エンジンはこのデータを解析し、検索結果にリッチリザルト(レビュー評価やイベント情報など)として反映させることができます。

構造化データの基本テンプレート(記事用)

まず、WordPressの記事ページに表示する構造化データの基本的なJSON-LDコードを紹介します。これはGoogleが推奨するArticleタイプです。

Article構造化データのテンプレート
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "記事タイトル",
  "image": "アイキャッチ画像のURL",
  "author": {
    "@type": "Person",
    "name": "著者名"
  },
  "datePublished": "公開日",
  "dateModified": "更新日",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "記事のURL"
  }
}
</script>
imageプロパティを忘れずに
Google公式ドキュメントによると、Article構造化データではheadlineimagedatePublishedauthorの4つが最もリッチリザルト表示への影響が大きい項目とされています。imageを省略するとリッチリザルトとして表示される可能性が大きく下がるため、必ず含めましょう。

WordPressに動的なJSON-LDを追加する

WordPressのテーマでこの構造化データを出力するには、header.phpやfunctions.phpで条件を分けて出力します。

以下のコードは、記事ページ(is_single())のみに動的なJSON-LDを挿入する例です。

functions.php:JSON-LDの動的出力
function add_json_ld_article() {
  if (is_single()) {
    global $post;
    $title = get_the_title($post);
    $url = get_permalink($post);
    $author = get_the_author_meta('display_name', $post->post_author);
    $published = get_the_date('c', $post);
    $modified = get_the_modified_date('c', $post);
    $image = get_the_post_thumbnail_url($post->ID, 'full');

    $data = array(
      "@context" => "https://schema.org",
      "@type" => "Article",
      "headline" => $title,
      "author" => array(
        "@type" => "Person",
        "name" => $author
      ),
      "datePublished" => $published,
      "dateModified" => $modified,
      "mainEntityOfPage" => array(
        "@type" => "WebPage",
        "@id" => $url
      )
    );

    // アイキャッチ画像がある場合のみimageプロパティを追加
    if ($image) {
      $data["image"] = $image;
    }

    echo '<script type="application/ld+json">' . PHP_EOL;
    // JSON_UNESCAPED_SLASHESは付けない(scriptタグの抜け出し対策のため / は \/ にエスケープする)
    echo json_encode($data, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);
    echo PHP_EOL . '</script>' . PHP_EOL;
  }
}
add_action('wp_head', 'add_json_ld_article');
JSON_UNESCAPED_SLASHESは使わない
json_encode()JSON_UNESCAPED_SLASHESフラグを付けると、PHPが標準で行う/\/のエスケープが無効になります。この保護がないと、記事タイトルや著者の表示名に</script>という文字列が含まれた場合、<script type="application/ld+json">タグがそこで終了したとブラウザに解釈され、続く内容が通常のHTMLとして実行されてしまうscriptタグ抜け出し(XSS)のリスクがあります。著者の表示名はユーザー自身がプロフィール画面から自由に編集できるため、低権限ユーザーでも悪用できてしまう点に注意してください。JSON_UNESCAPED_SLASHESは付けず、PHP標準のエスケープを有効にしておきましょう。

出力結果の確認方法

構造化データを出力したら、以下のGoogle公式ツールで検証できます。

該当のURLを入力すると、構造化データが正しく読み込まれているかチェックできます。

補足:他の構造化データとの組み合わせ

以下のような用途でもJSON-LDを活用できます。

  • Webサイト全体の情報(WebSite)
  • パンくずリスト(BreadcrumbList)
  • イベント情報(Event)
  • 製品ページ(Product)

特定の目的に応じてJSON-LDの内容を変更し、検索エンジンにより多くの情報を伝えることが可能です。パンくずリストの実装方法はプラグインなしでパンくずリストを実装する方法|階層対応・構造化データの注意までで解説しています。

よくある質問(FAQ)

QWordPressのheadタグにJSON-LDの構造化データを出力するには?
Awp_headアクションフックでJSONをscript type=”application/ld+json”タグ内に出力します。構造化データの値は$post->post_title等のWordPressデータを使って動的に生成します。json_encode()にJSON_UNESCAPED_SLASHESは付けず、scriptタグ抜け出しを防ぎましょう。
Q記事ページにArticleスキーマを追加するJSON-LDの例を教えてください
A@type:Article、headline(タイトル)、image(OGP画像)、datePublished(公開日)、dateModified(更新日)、author(著者)を含むJSONをwp_headフックで出力します。SEOに効果的です。
QBreadcrumbのJSON-LD構造化データを自動生成するには?
A現在のページのパンくずリスト(カテゴリー階層)を取得し、BreadcrumbListスキーマのitemListElementとして出力します。YoastやRankMathのパンくず機能と連携することも可能です。

まとめ

WordPressテーマにJSON-LD形式の構造化データを追加することで、検索エンジンにページの内容を正確に伝え、リッチリザルトによる表示改善が期待できます。特に記事や製品、レビューなどは構造化データとの相性が良いため、積極的に導入するとSEO面で効果を得られます。

テーマに直接記述するのが難しい場合は、専用のプラグインを使う方法もありますが、今回のように自前で実装することで、柔軟な制御が可能になります。出力するデータのエスケープには十分注意しましょう。