Written by Manabu Bannai

schema.org(構造化マークアップ)の書き方・例の総まとめ【WordPress版】

PROGRAMMING

schema.org(構造化データとしてのマークアップ)をわりと適当にマークアップしていたのですが、汚いコードはダメですねってことで勉強しなおしました。記事では、schema.orgの書き方・例をまとめまていきます。

ちなみにですが、schema.org以外にも、Microdata、RDFa、JSON-LDなどがあるようですが、現時点での主流はschema.orgだと思います。以下にGoogleドレンドデータを貼っておきます。

Screen Shot 2015-03-17 at 6.33.42 PM

今後はJSON-LDとWeb Componentsが伸びるって見方もあるようですね。個人的にはJSON-LDは書きやすそうなので、主流になると良いな〜と思っています。
参考:SEOで今注目の2つの技術はJSON-LDとWeb Components

では、本題にもどります。
今回のまとめでは、以下の環境を想定します。

想定している環境

  • WordPress
  • ブログ or メディア
  • コーポレートサイト

記事のもくじ

  • 『ヘッダー』のマークアップ
  • 『ナビバー』のマークアップ
  • 『パンくずリスト』のマークアップ
  • 『ブログ記事部分』のマークアップ
  • 『サイドバー』のマークアップ
  • 『フッター』のマークアップ
  • 『コーポレートサイト用』のマークアップ
  • 構造化マークアップの動作確認

では、さっそく書いていきます。

スポンサードサーチ


schema.orgで『ヘッダー』をマークアップする

次のとおりとなります。

<header itemscope="itemscope" itemtype="http://schema.org/WPHeader" >

schema.orgで『ナビバー』をマークアップする

次のとおりとなります。

<ul>
	<li itemprop="url"><a href="#" itemprop="name">デモ1</a></li>
	<li itemprop="url"><a href="#" itemprop="name">デモ2</a></li>
	<li itemprop="url"><a href="#" itemprop="name">デモ3</a></li>
	<li itemprop="url"><a href="#" itemprop="name">デモ4</a></li>
	<li itemprop="url"><a href="#" itemprop="name">デモ5</a></li>
</ul>

schema.orgで『パンくずリスト』をマークアップする

過去記事にまとめました。以下からご覧ください。

schema.orgで『ブログ記事部分』をマークアップする

ちょっと長いですが、次のとおり。WordPressの関数を知らない人は適意ぐぐってください。

<!-- Blogのメインコンテンツエリア -->
<main id="main" itemprop="mainContentOfPage" itemscope="itemscope" itemtype="http://schema.org/Blog">

	<!-- articleタグのマークアップ -->
	<article itemscope="itemscope" itemtype="http://schema.org/BlogPosting" itemprop="blogPost">

	<!-- 記事の概要を表示(関数はAll in One SEO Packの関数を利用しています) -->
	<meta itemprop="about" content="<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>">

		<section>
			<!-- タイトル表示 -->
			<h1 class="entry-title" itemprop="name headline">
				<a href="<?php the_permalink(); ?>" title="<?php printf(the_title_attribute('echo=0') ); ?>" itemprop="url"><?php the_title(); ?></a>
			</h1>

			<!-- サムネイルの表示 -->
			<figure>
				<span itemscope itemtype='http://schema.org/ImageObject' itemprop="image" >
					<a href="<?php echo get_permalink(); ?>" itemprop='contentUrl'><?php if ( has_post_thumbnail() ) { the_post_thumbnail( 'post-thumbnail',array('itemprop'=>'image') ); } ?></a>
				</span>
			</figure>

			<!-- 本文の表示 -->
			<div  itemprop="articleBody">
				<?php the_content(); ?>
			</div>

		</section>

		<p itemprop="keywords"><i class="fa fa-tags"></i> <?php the_tags(); ?></p>

	</article>
</main><!-- end main -->

schema.orgで『サイドバー』をマークアップする

<div id="sidebar"  role="complementary" itemscope="itemscope" itemtype="http://schema.org/WPSideBar">

schema.orgで『フッター』をマークアップする

<footer id="footer" role="contentinfo" itemscope="itemscope" itemtype="http://schema.org/WPFooter">

schema.orgで『コーポレートサイト』をマークアップする

head内に以下を記述してください。

<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"  itemscope itemtype="http://schema.org/Organization">

<meta itemprop="name" content="会社名">
<meta itemprop="url" content="会社のURL">
<meta itemprop="about" content="コーポレートサイトトップページのDescription">
<meta itemprop="telephone" content="電話番号">

構造化マークアップの動作確認

以下のサイトで動作確認ができます。ミスがなければ『問題ありません』と表示されるはずです。画像はこのブログの例です。
Testing Tool — Google Developers

Screen Shot 2015-03-18 at 12.12.58 AM

余談ですが、構造化マークアップを確認するにはChromeの拡張機能が便利です。

# 拡張機能
» Semantic inspector

# 使い方
» 閲覧しているページの構造化データ情報を丸見えにするGoogle Chromeの4つの拡張機能 | 海外SEO情報ブログ

以上となります。
間違いなどありましたらTwitterお問い合わせでご指摘頂けたらと思います<(_ _)>

以下に参考にしたサイトを掲載しておきます。

» 構造化データのエラーが出てたのでschema.orgでマークアップしてみた | SIMいろいろiphoneでできること
» Marking Up with Microdata
» Markup your blog using schema.org by Jeremy Walker
» Free games for kids and children 2, 3, 4, 5 through 10 years old

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社