schema.org(構造化マークアップ)の書き方・例の総まとめ【WordPress版】
schema.org（構造化データとしてのマークアップ）をわりと適当にマークアップしていたのですが、汚いコードはダメですねってことで勉強しなおしました。記事では、schema.orgの書き方・例をまとめまていきます。
ちなみにですが、schema.org以外にも、Microdata、RDFa、JSON-LDなどがあるようですが、現時点での主流はschema.orgだと思います。以下にGoogleトレンドデータを貼っておきます。
今後は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="name"><a href="#" itemprop="url">デモ１</a></li>
<li itemprop="name"><a href="#" itemprop="url">デモ２</a></li>
<li itemprop="name"><a href="#" itemprop="url">デモ３</a></li>
<li itemprop="name"><a href="#" itemprop="url">デモ４</a></li>
<li itemprop="name"><a href="#" itemprop="url">デモ５</a></li>
</ul>schema.orgで『パンくずリスト』をマークアップする
過去記事にまとめました。以下からご覧ください。
構造化マークアップが完了しているWordPressのパンくずリスト【無料配布】
構造化マークアップしてあるパンくずリスト用のコードを書きました。コピペですぐに導入できます。
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
余談ですが、構造化マークアップを確認するには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