WordPressでプラグインなしで構造化データを出力
プラグインを使用せずに、構造化データとして一般的に利用される形式であるJSON-LD、Microdata、RDFaのいずれかでデータを出力します。
ここでは、最も広く利用され、ウェブページへの追加が容易なJSON-LD形式で、一般的なウェブサイトのホームページに関する構造化データの例を出力します。
JSON-LD形式の構造化データ例(ホームページ)
以下のコードブロックをHTMLの<head>
セクション内、または<body>
タグの直前に配置することで、検索エンジンに構造化データとして認識させることができます。
{
"@context": "https://schema.org",
"@type": "WebSite",
"name": "ウェブサイトの名称",
"url": "https://www.example.com/",
"potentialAction": {
"@type": "SearchAction",
"target": "https://www.example.com/search?q={search_term_string}",
"query-input": "required name=search_term_string"
}
}
構造化データの各要素の説明
要素 | 説明 |
@context | 構造化データで使用する語彙(ボキャブラリ)を指定します。通常は https://schema.org を使用します。 |
@type | データの種類(エンティティ)を指定します。これはWebSite (ウェブサイト全体)を表します。 |
name | ウェブサイトの正式名称を記述します。 |
url | ウェブサイトのトップページの完全なURLを記述します。 |
potentialAction | 検索窓(Sitelinks Search Box)機能を提供するために使用されます。この例では、サイト内検索の機能があることを示しています。 |
target | 検索結果ページへのURLのテンプレートを指定します。{search_term_string} の部分がユーザーの入力に置き換えられます。 |
query-input | 検索クエリのパラメータ名を指定します。 |
その他の種類の構造化データ
必要に応じて、以下のようなエンティティ(@type
)で具体的な情報を記述することもできます。
Organization
:企業や団体に関する情報(住所、連絡先など)Article
:ブログ記事やニュース記事Product
:商品情報(価格、レビューなど)BreadcrumbList
:パンくずリストFAQPage
:よくある質問とその回答
例えば、企業情報を示すOrganization
のJSON-LDは以下のようになります。
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "会社名",
"url": "https://www.example-company.com/",
"logo": "https://www.example-company.com/images/logo.png",
"contactPoint": {
"@type": "ContactPoint",
"telephone": "+81-3-xxxx-xxxx",
"contactType": "customer support"
}
}
なぜ構造化データを出力する必要があるのか
構造化データを出力する必要がある主な理由は、機械がコンテンツを理解しやすくするためです。これにより、検索エンジンやその他のアプリケーションが、あなたのウェブページの内容をより効果的に解釈し、活用できるようになります。
構造化データの主要な利点
構造化データを出力することで得られる具体的な利点は以下の通りです。
1. 検索結果のエンハンスメント (リッチリザルト)
検索エンジン、特にGoogleなどの検索結果に、通常のリンクと説明文以上の目立つ表示(リッチリザルトまたはスニペット)を提供できます。
- 例: 料理のレシピであれば、検索結果に星の評価、調理時間、写真などが直接表示されます。
- 効果: 視覚的に魅力的で情報量が増えるため、ユーザーのクリック率(CTR)向上に繋がります。
2. コンテンツの理解度向上
構造化データは、単なるテキストの羅列ではなく、コンテンツ内の特定の要素とその意味を明確に定義します。
- 例: 「田中太郎」というテキストを、構造化データでは「このページに記載されている人物の名前は田中太郎である」と明示できます。
- 効果: 検索エンジンは、ページの内容をより正確に、かつ文脈を理解してインデックス化でき、関連性の高い検索クエリで表示されやすくなります。
3. 特殊な機能への対応
特定の構造化データを使用することで、GoogleアシスタントやKnowledge Graphなどの高度な機能やプラットフォームでコンテンツが利用されるようになります。
- 例: FAQの構造化データを使用すると、Googleアシスタントがあなたのサイトの回答を音声で読み上げることが可能になります。
- 効果: 新しいチャネルでの露出が増え、ユーザーへのリーチが拡大します。
結論
構造化データは、ウェブコンテンツを人間だけでなく機械にも最適化するための重要な手段です。これにより、検索エンジンでの表示機会が増え、ユーザーにより良い体験を提供し、結果としてウェブサイトのトラフィックとエンゲージメントの向上が期待できます。
JSON-LD、Microdata、RDFaとは
JSON-LD、Microdata、RDFaは、ウェブページに構造化データを記述するための主要な構文(書き方)です。それぞれ記述形式や特徴が異なります。
以下の表に、これらの構造化データの記述形式をまとめます。
形式 | 記述方法 | 特徴 | Googleの推奨 |
JSON-LD | <script> タグ内にJSON形式で記述 | HTML本文とは独立して記述できるため、HTMLソースへの影響が少ない。データを一箇所に集約できるため、人間にとってもシステムにとっても読みやすい。 | 推奨 |
Microdata | 既存のHTMLタグの属性(itemscope , itemtype , itemprop など)として記述 | HTMLのコンテンツに直接埋め込む形で記述する。HTMLの各要素と構造化データを密接に結びつける。 | 利用可能 |
RDFa (Resource Description Framework in Attributes) | 既存のHTMLタグの属性(property , typeof , resource など)として記述 | Microdataと同様にHTMLのコンテンツに直接埋め込む形で記述する。名前空間の拡張など、より高度な記述が可能だが、複雑さもある。 | 利用可能 |
補足
- 構造化データとは、検索エンジンなどのクローラーがウェブページの内容をより正確に理解できるように、データの意味を明示するために追加される情報です。
- Googleは現在、JSON-LDでの記述を最も推奨しており、実装の容易さや保守性で優れているとされます。
- どの形式を選択しても、最終的に検索エンジンがデータを認識し利用できるという点では問題ありませんが、新規の実装ではJSON-LDが一般的に好まれます。
WordPressで構造化データを出力するコード
WordPressで構造化データを出力する一般的な方法は、JSON-LD形式のコードをテーマファイル(通常はfunctions.php
やテンプレートファイル)に記述し、<head>
タグ内に出力することです。GoogleもJSON-LDを推奨しています。
1. JSON-LDの基本構造
基本的な記事(Article)の構造化データ(JSON-LD)の例は以下の通りです。これは静的な例ですが、WordPressではPHPを使って記事のタイトル、URL、更新日などの情報を動的に取得して埋め込みます。
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "記事のタイトル",
"image": [
"https://example.com/images/main-image.jpg"
],
"datePublished": "2024-01-01T08:00:00+09:00",
"dateModified": "2024-10-21T15:50:00+09:00",
"author": {
"@type": "Person",
"name": "著者名"
},
"publisher": {
"@type": "Organization",
"name": "サイト名",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/logo.png"
}
},
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "記事のパーマリンク"
}
}
</script>
2. WordPressでの実装(PHPコード例)
functions.php
に記述して、wp_head
アクションフックを使って<head>
内に出力する方法が一般的で、管理しやすいです。
以下の例は、単一記事ページ(is_single()
)に、記事の情報を動的に取得してJSON-LD形式で出力するコードです。
function add_article_structured_data() {
// 投稿ページ(記事)でのみ実行
if ( is_single() ) {
// 記事の情報を取得
$post_id = get_the_ID();
$title = get_the_title();
$permalink = get_permalink();
$date_published = get_the_date( 'c' ); // ISO 8601形式で発行日
$date_modified = get_the_modified_date( 'c' ); // ISO 8601形式で更新日
$author_name = get_the_author_meta( 'display_name', get_post_field( 'post_author', $post_id ) );
// アイキャッチ画像の情報を取得
$image_info = '';
if ( has_post_thumbnail( $post_id ) ) {
$thumbnail_id = get_post_thumbnail_id( $post_id );
$image = wp_get_attachment_image_src( $thumbnail_id, 'full' );
if ( $image ) {
$image_info = esc_url( $image[0] );
}
}
// サイトのロゴ情報
// ※必要に応じて適切に設定してください
$site_name = get_bloginfo( 'name' );
$logo_url = 'https://example.com/logo.png'; // サイトのロゴURL
// JSON-LD配列を作成
$schema = array(
'@context' => 'https://schema.org',
'@type' => 'Article',
'headline' => esc_attr( $title ),
'mainEntityOfPage' => array(
'@type' => 'WebPage',
'@id' => esc_url( $permalink )
),
'author' => array(
'@type' => 'Person',
'name' => esc_attr( $author_name )
),
'publisher' => array(
'@type' => 'Organization',
'name' => esc_attr( $site_name ),
'logo' => array(
'@type' => 'ImageObject',
'url' => esc_url( $logo_url )
)
),
'datePublished' => $date_published,
'dateModified' => $date_modified,
);
// 画像情報があれば追加
if ( $image_info ) {
$schema['image'] = array( esc_url( $image_info ) );
}
// JSON-LDを<script>タグで出力
echo '<script type="application/ld+json">' . json_encode( $schema, JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES | JSON_PRETTY_PRINT ) . '</script>' . "\n";
}
}
// wp_headにフック
add_action( 'wp_head', 'add_article_structured_data' );
実装のポイント
wp_head
フック: WordPressのwp_head
アクションフックを使用することで、生成されたコードがHTMLの<head>
タグ内に出力されます。- 条件分岐:
is_single()
などの条件分岐タグを使って、特定のページタイプ(例: 記事ページ、固定ページ、特定のカスタム投稿タイプなど)でのみ構造化データが出力されるように制御します。 - 動的データ:
get_the_title()
,get_permalink()
,get_the_date()
,get_the_modified_date()
,wp_get_attachment_image_src()
などのWordPress関数を使用して、記事の情報を動的に取得しています。 - エスケープ:
esc_attr()
,esc_url()
などを使用して、出力前にデータをエスケープすることで、セキュリティを向上させています。
3. その他の方法
構造化データの実装には、自前でコードを書く以外にも以下のような方法があります。
- WordPressプラグイン:
- All in One SEO Pack、Yoast SEO、Schema ProなどのSEOプラグインには、自動的に構造化データを出力する機能が搭載されています。最も手軽で確実な方法です。
- カスタムフィールドとジェネレーター:
- カスタムフィールド(ACFなど)に構造化データ(JSON-LD)のコードを貼り付け、そのカスタムフィールドの内容をテンプレートファイルや
functions.php
で取得して出力する方法。特定のページタイプ(例: FAQページ、Reviewページ)のみに出力したい場合に、構造化データ生成ツールと併用して利用されることがあります。
- カスタムフィールド(ACFなど)に構造化データ(JSON-LD)のコードを貼り付け、そのカスタムフィールドの内容をテンプレートファイルや
構造化データ チェックの主要ツール
構造化データをチェックするには、主にGoogle の公式ツールやSchema.orgの検証ツールを使用するのが一般的で、強く推奨されます。
ツール名 | 主な機能 | Google固有の検証 |
リッチリザルト テスト | ページ上の構造化データがGoogle のリッチリザルトとして表示されるか、エラーがないかを確認。プレビュー機能あり。 | 行う (Google 検索結果に特化) |
スキーマ マークアップ検証ツール | ウェブページに埋め込まれたSchema.orgベースの構造化データの構文が正しいかを確認。 | 行わない (一般的なSchema.orgの検証) |
Google Search Console | サイト全体で検出された構造化データのエラーや警告のレポートを継続的に確認。 | 行う (サイトの監視) |
1. リッチリザルト テスト (Rich Results Test)
Googleが提供する公式ツールで、あなたのページのリッチリザルト(カルーセル、画像、FAQなどの特別な検索結果表示)が正しく生成されるかを確認できます。
- 何を確認するか:
- Google検索でサポートされている機能(リッチリザルト)が有効になっているか。
- 構造化データに構文上のエラーや警告がないか。
- 検索結果での表示がどのように見えるか(プレビュー)。
- 特徴: Google検索結果に特化した検証を行うため、Googleでの表示に最も重要です。
2. スキーマ マークアップ検証ツール (Schema Markup Validator)
Schema.orgコミュニティが提供するツールで、すべての種類のschema.org
マークアップをテストできます。
- 何を確認するか:
- Schema.orgの仕様に基づいた構造化データの一般的な構文の正しさ。
- 特徴: Google特有の機能に関する警告は表示されませんが、基本的なSchema.orgの整合性をチェックするのに役立ちます。
3. Google Search Console (サーチコンソール)
あなたのウェブサイト全体を対象に、Googleがクロールした際に検出された構造化データのエラーや警告を報告します。
- 何を確認するか:
- サイト全体の構造化データの実装状況。
- 特定の構造化データタイプ(例:パンくずリスト、商品、FAQなど)ごとのエラー件数や改善提案。
- 特徴: サイト全体の継続的な監視に適しており、エラーが発生した際に通知を受け取ることができます。
構造化データの実装後、まずリッチリザルト テストでGoogle検索結果での表示可能性を確認し、その後Search Consoleでサイト全体の状況を継続的に監視するのが効果的です。