WordPressの構造化データエラー対策。schema.orgを利用したマークアップ方法

構造化データエラー対策。WordPressでschema.orgを利用したマークアップ

構造化データは、Googleなどの検索エンジンがブログなどの記事をクロールする際に、ページ毎にどのような情報があるのかを構造的に知らせるためのもの。

このデータがあることにより、検索結果の表示内容に追加情報を表示させることができるようになります。一般的にはパンくずリストの表示などですね。

しかし、この構造化データを受け渡すためのタグの記述を間違えるとエラーとなり、うまく情報を受け渡すことができなくなります。

そこで今回は、Googleに構造化データを受け渡すためのschema.orgを利用したマークアップ方法についてご紹介していきます。WordPress無料テーマFirstUpに合わせた内容になりますので、その他の方は自分のブログに合わせてお読みください。

WordPressで構造化データエラーになる原因

WordPressのテーマ内で以下のタグを記述している場合に、エラーになるようです。

  1. <div <?php post_class(); ?>>

post_class(); で記事IDを取得し、記事毎にクラス属性をつけることができるのですが、これがhentryのエラーを引き起こすとのことでした。

その対策方法もあるようなのですが、ここではpost_class();を使用せず、schema.orgを利用して直接テーマに追加する方法をご紹介します。

schema.orgとは?なぜ構造化データが必要なの?

schema.orgとは、schema.orgが定義しているHTMLで記述する事により、リッチスニペットの表示や、検索エンジンにコンテンツの情報を伝える事ができます。つまり構造化データを受け渡すために必要なHTMLタグのことなのです。

このschema.orgは、Google、Yahoo!、Microsoftの3社が共同で開発。

検索結果に詳細情報を反映させるために必要な構造化データについてフォーマットや形式を標準化し、この記述があることにより、大手検索サイトにどのような情報があるのか認識されやすくなります。

また、この構造化データは検索結果の内容に追加され、質の高い検索結果を表示させることができるようになるので、schema.orgによるHTMLマークアップが必要となってくるのです。

schema.orgを利用したマークアップ例

schema.orgについての概要が分かったところで、実際にどのようなHTMLタグを記述すればいいのかをご紹介します。

※ここでは、ブログの記事ページへの記述方法をご紹介しますので、WordPressのsingle.phpを対象としたマークアップについての内容となります。

以下のHTMLを例として、schema.orgの解説をしていきますね。

例文

  1. <div class="post">
  2. <h1>ブログ記事タイトル</h1>
  3. <time>2014年1月1日</time>
  4. <div class="post-contents">
  5. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  6. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  7. </div><!-- post-contents -->
  8. </div><!-- post -->

schema.orgでは、以下の3つの専用のタグを記述するようになります。

  • itemscope
  • itemtype
  • itemprop

itemscope

itemscopeを記述することにより、ある特定の情報が掲載されていることを伝えられるようになります。

  1. <div class="post" itemscope>
  2. <h1>ブログ記事タイトル</h1>
  3. <time>2014年1月1日</time>
  4. <div class="post-contents">
  5. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  6. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  7. </div><!-- post-contents -->
  8. </div><!-- post -->

これではどのような情報なのかまでは分かりませんので、次に、itemtypeで何のカテゴリに属している情報なのかを伝えます。

itemtype

itemtypeを記述することにより、どのような内容が記載されているページなのかをお知らせすることができます。

  1. <div class="post" itemscope itemtype="http://schema.org/Article">
  2. <h1>ブログ記事タイトル</h1>
  3. <time>2014年1月1日</time>
  4. <div class="post-contents">
  5. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  6. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  7. </div><!-- post-contents -->
  8. </div><!-- post -->

上記の1行目、

  1. itemtype="http://schema.org/Article"

のArticleで、ブログ記事であることを伝えております。

当記事では、ブログ記事のマークアップ方法についてご紹介しているのでArticleとしましたが、他にも本のサイトであれば『Book』、映画のサイトであれば『Movie』、レビューサイトであれば『Review』など、さまざまなものを指定できます。

指定できるものは、こちらのサイトに記載されております。
全ての階層 – schema.org 日本語訳

さらに詳細を伝えるために、次は、itempropを記述します。

itemprop

ブログ記事ページでは、記事タイトルと更新した日時、本文などの記載があります。それらをitempropを利用することにより、「ここに記述がありますよ。」と分かりやすく伝えることができます。

  1. <div class="post" itemscope itemtype="http://schema.org/Article">
  2. <h1 itemprop="headline">ブログ記事タイトル</h1>
  3. <time itemprop="datePublished">2014年1月1日</time>
  4. <div class="post-contents" itemprop="articleBody">
  5. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  6. <p>ブログ記事本文です。これは、schema.orgを説明するための例文です。ブログ記事本文です。これは、schema.orgを説明するための例文です。</p>
  7. </div><!-- post-contents -->
  8. </div><!-- post -->
  • 2行目のitemprop=”headline”は、記事タイトル
  • 3行目のitemprop=”datePublished”は、記事更新日
  • 4行目のitemprop=”articleBody”は、記事本文

このようなHTMLタグをマークアップすることにより、情報をうまく伝えられるようになります。

schema.orgをWordPress用にマークアップする

では、schema.orgを実際にWordPressテンプレートタグに合わせてマークアップしていきます。

WordPressのsingle.phpに、先述したitemscopeitemtypeitempropを使用し、さらにmetaタグを使用して記事説明文と画像も構造化データとして伝えられるようにマークアップしていきます。

  1. <div id="main" itemscope itemtype="http://schema.org/Article">
  2. <meta itemprop="description" content="<?php $myExcerpt = get_the_excerpt(); if ($myExcerpt != '') {} echo $myExcerpt; ?>"/>
  3. <meta itemprop="image" content="<?php echo wp_get_attachment_url( get_post_thumbnail_id() ); ?>">
  4. <header>
  5. <h1 itemprop="headline"><?php the_title(); ?></h1>
  6. <time itemprop="datePublished" datetime="<?php the_time('c'); ?>"><?php the_time('Y年m月d日'); ?></time>
  7. </header>
  8. <div class="post_content" itemprop="articleBody">
  9. .......
  10. </div><!-- post_content -->
  11. </div><!-- main -->

記事概要文を伝える

2行目では、記事概要文(メタディスクリプション)を伝えます。
ここは、記事投稿時の『抜粋』に記述したものを取得してます。

抜粋に記述しなければ、記事本文から抜粋文章を自動で取得されますので未記入という状態にはなりません。しかし、的確な文章で記事内容を表現した方が検索エンジンには良いかと思いますので、抜粋に記述することをおすすめします。

All in One SEO Packを利用している方は…

All in One SEO Packを利用しているのであれば、2行目を以下のものに変更すると、記事投稿時で設定したメタディスクリプションが記述されます。お好みでご利用ください。

  1. <meta itemprop="description" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>">

WordPress SEO by Yoastを利用している方は…

WordPress SEO by Yoastを利用しているのであれば、2行目を以下のものに変更すると、記事投稿時で設定したメタディスクリプションが記述されます。こちらもお好みでご利用ください。

  1. <meta itemprop="description" content="<?php echo get_post_meta($post->ID, _yoast_wpseo_metadesc, true); ?>">

記事画像を伝える

3行目は、記事画像を伝えるメタタグです。
記事投稿時に設定したアイキャッチ画像のURLを取得するようにしてあります。もし、アイキャッチ画像の設定をおこなっていない場合は、3行目を削除してください(設定していないと未記入の状態になります)。

と、上記のようなタグをsingle.phpに記述することにより、構造化したデータを検索エンジンに伝えることができるようになります。

構造化データを受け渡すschema.orgタグを利用した結果

このブログとWordPress無料テーマのFirstUpでは、このschema.orgを利用した構造化データを出力する設定をしております。

ちなみに、当ブログの記事をGoogleのウェブマスターツールの構造化データテストツールで調べてみると、以下の画像のようになります。
構造化データテストツール

構造化データエラー対策。WordPressでschema.orgを利用したマークアップ

構造化データをうまく伝えられておりますね。

※更新日を伝える『datepublished』ですが、日付のオフセットが+00:00になってます…。
以下のコードをfunctions.phpに追加して対応しました。

  1. // タイムフォーマット(c)のオフセット対応
  2. date_default_timezone_set('Asia/Tokyo');

これでOK!

ただ、これがどのくらいブログの検索順位に影響が出るかは、まだ分かっておりません。

この構造化データがエラーだったとしてもアクセス数に影響は与えないとの記事も見かけました。
構造化データエラーはアクセス数に影響を及ぼさない

逆に、構造化データをうまく出力してもアクセス数には影響がないのかな。
この辺は、これから検証していきたいと思います。

まぁ、検索エンジンに情報をしっかり提供できる状態を作っておくことは、今後何らかの影響を与えることができると思います。こういった対策は早めに対応しておきたいものですので、ぜひ皆さんのブログにもschema.orgタグを記述し、対策しておいてみてください。

参考ページ:
schema.orgを使いましょう
WordPressの構造化データエラー対策。schema.orgを利用したマークアップ方法 by

コメントを残す