リッチスニペット施策schemaのmicrodataをWordPressブログに設定

リッチスニペットで検索結果に載ろう

schema.orgのmicrodataのマークアップでブログ記事もリッチスニペットが使える

以前から、リッチスニペットに対応した方が「検索ユーザーさんのクリック率が上がる」という記事を目にはしていました。

米国のSEOエキスパートたちが語る、最新SEO情報 総まとめ at #SMX Advanced Seattle 2012https://www.suzukikenichi.com/blog/a-lot-of-takeaways-from-smx-advanced-2012/

でも、リッチスニペットをサポートしているコンテンツが

レビュー、人物、商品、会社と組織、レシピ、イベント、音楽

というお話だったので、ブログ記事は関係ないのか~残念・・・と思っていたのです。

ところが、検索結果を見ていると、どう見てもブログ記事なのにリッチスニペットだよね、これ・・というものを目にするように。

怪訝に思ってGoogleの以下のページを見てみたところ、

Promote Your Content with Structured Data Markuphttps://developers.google.com/structured-data/?hl=ja

Enable Rich Snippets、つまりリッチスニペットでサポートするコンテンツの中に、Article:記事が・・ある、あるじゃないですかぁ~。
Enable Rich Snippets

という事で、実験も兼ねて、こちらのサイトではmicrodataでマークアップ(:記事やPHPファイルにHTMLを記述する)、トップサイトではJSON-LDで加筆してみました。

これは、schema.orgで使えるのは、JSON-LD、microdata、RDFAの3種類なのですが、

◆JSON-LDに関しては、

  • microdataとRDFAはリッチスニペットへ反映されるが、JSON-LDはそろそろ反映されそうだけれど、今はまだ反映されない
  • ただ、記述は断然、JSON-LDが簡単。なので普及しそう

ということで、HTMLって苦手(^_^;)という方向けにはJSON-LDの設置方法をまた別に書こうと思います。

書きました
WordPressブログ記事用schema.org JSON-LDをPHPで書いてみた
こちらの記事と、あわせてご覧ください(^^)

◆RDFAに関しては、

  • Breadcrumb NavXTプラグインで使用されており、このプラグインを使っている人はリッチスニペットにパンくずが表示されていることからも、リッチスニペットに反映される、という事がわかる

のですが、

  • Googleのイチオシがmicrodataらしいということ

と、

  • マークアップの方法としてはmicrodataと大体同じなので、読み替えてもらえば良いかな、

ということで、microdataで解説しています。

※リッチスニペットの詳細についてはこちらの記事を見てみて下さい。

リッチスニペットで検索結果をより分かりやすくhttp://googlejapan.blogspot.jp/2009/11/blog-post_20.html

では、具体的にどのようにしたら良いのかを見ていきましょう。

まずはschema.orgの基本を把握

以下の、schema.orgのmicrodataの懇切丁寧な記事がとても参考になります。

Googleリッチスニペット対策!初心者向けSchema.org解説!https://syncer.jp/schema-entering

※あらゆさん、ありがとうございます<(_ _)>
とても参考になりました!

さて、上の記事にも書かれているように、全てをマークアップするとコンテンツが膨張してしまいます。

ですので、なるべくコンテンツはリッチにせずに、リッチスニペットを実現するために、必要なところだけマークアップするという趣旨をもって、次に以下の「Enabling Rich Snippets for Articles」のページを見てみましょう。

Enabling Rich Snippets for Articles  |  Structured Data  |  Google Developers

このページ内のArticle markup propertiesにある表の項目を引用、それぞれ説明すると、

◆ headline (required)・・・必須項目

  • Text:テキストに適用
  • The headline of the article:記事大見出し

◆ image (required)・・・必須項目

  • URL:URLに適用
  • A URL, or list of URLs pointing to the representative image file(s). Images must be at least 160×90 pixels and at most 1920×1080 pixels. We recommend images in .jpg, .png, or. gif formats. All image URLs should be crawlable and indexable. Otherwise, we will not be able to display them on the search results page.
    Only marked-up images that directly belong to the article should be listed in this property. If there are multiple applicable images, please list them all with the important images first.:

    • 掲載されている画像のURL
    • サイズは160×90~1920×1080ピクセル
    • jpg、png、gifファイルが良い
    • 画像はクロール・インデックスができるもの
    • 検索結果には表示されない
    • 記事に掲載されている画像だけをマークアップすること
    • 該当する画像が複数の場合は、全てをリスト化、かつ最初に最も重要なイメージをリストアップすること

◆ datePublished (required)・・・必須項目

  • Date:日時に適用
  • The date and time the article was first published, in ISO 8601 format. : ISO8601書式の公開日

◆ description

  • Text:テキストに適用
  • A short description of the article. : 記事の簡単な説明

◆ articleBody

  • Text:テキストに適用
    The actual body of the article. : 記事本体

◆ alternativeHeadline

  • Text:テキストに適用
  • A secondary headline for the article. : 記事の小見出し

具体的なマークアップの例

今回は極力ミニマムにマークアップしていこうと思いますので、必須の3項目とプラスアルファで記事本体と、更新日をマークアップした例をあげていきます。

また、投稿記事ページだけを対象にしています。

テーマによっては、マークアップする場所が違う事もあるかと思いますが、基本的にデフォルトテーマ、Twenty Twelve、Twenty Thirteen、Twenty Fourteen、Twenty Fifteenの場合で書いています。

articleBody:記事をマークアップ

articleBodyは記事のコンテンツ部分を指定すればOKなので、投稿ページ:single.phpのメインループのはじまる前にどのタイプのmicrodataを使うかを宣言しつつ、下の様に設定しました。

articleBodyのマークアップの場所

画像の一行を以下の様に編集しました。

<div id="content" class="site-content" role="main" itemscope itemtype="schema.org/BlogPosting" itemprop="articleBody">

headline:タイトルをマークアップ

headlineとしてマークアップするのは投稿記事の場合はタイトル:the_titleになります。
タイトルを表示させる記述はcontent.phpにあります。

以下の画像の部分を
headlineとしてタイトルをマークアップ

if ( is_single() ):
	the_title( <h1 class="entry-title" itemprop="headline">', </h1>' );
else :
	the_title( <h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', </a></h2>' );
endif;?>

アイキャッチ画像と、掲載画像にitemprop=”image”を追加する

アイキャッチ画像:post_thumbnailと、imgに、htmlタグを書き換えるフィルターフックを使って、マークアップします。

以下のフィルターフックをfunctions.phpに追記します。

// post_thumbnailにitemprop="image"を追加する
function custom_post_thumbnail($html){
    return str_replace('<img','<img itemprop="image"',$html); } add_filter('post_thumbnail_html','custom_post_thumbnail',10,5); 

// imgタグにitemprop="image"を追加する 
function img_additemprop($html) { return str_replace('>','itemprop="image">',$html);
}
add_filter('get_image_tag','img_additemprop', 10, 5);

※注:imgタグ終わりが /> の仕様になっている場合は、こちらをご使用ください。

// post_thumbnailにitemprop="image"を追加する
function custom_post_thumbnail($html){
    return str_replace('<img','<img itemprop="image"',$html); } add_filter('post_thumbnail_html','custom_post_thumbnail',10,5); 

// imgタグにitemprop="image"を追加する 
function img_additemprop($html) { return str_replace('/>','itemprop="image"/>',$html);
}
add_filter('get_image_tag','img_additemprop', 10, 5);

ただし、上記コードを記述してから挿入された画像にしか付与されません・・記事を更新しても、画像は挿入時の設定が保持されるので、基本、入れ直すしかないのです^^;

imageは必須項目でitemprop=”image”のマークアップのある画像が1個以上存在しないと、エラーが発生してしまいます。(言い換えれば1つでもマークアップしてあればOKだというコトでもあります。)

既に多くの記事と画像がアップ済みのサイトではこの「画像を更新しなくてはならない」というコトがネックになっていてmicrodataがいまいち広まってないのかも、とも思います。

ただ、アイキャッチ画像の一括削除 → プラグインAuto Post Thumbnailで再度登録
といった手順を踏めばアイキャッチ画像だけは一括でマークアップできます。

アイキャッチ画像の一括削除~の手順や方法については、以下の記事が参考になります。

WordPressで設定したアイキャッチ画像を一括で削除する方法http://www.barnetshenkinbridge.com/wordpress/2405/

さらに^^;
Lazy Load系プラグインをご使用の方、Jetpackのphotonをお使いの方には残念なお知らせが。

◆ Lazy Load系プラグインについて
画像の表示を遅延させることで、ページの読み込み速度を早くするプラグイン、Lazy Loadでは、最初に読み込まれる画像を極々小さなサイズのgif画像を代わりに読み込み、その後本来表示される画像を読み込むことで表示速度を速める、という仕組みになっています。

その為、画像のimgタグに一律に itemprop=”image” をつけると、この極小gif画像をマークアップすることになってしまいます。

エラーにはなりませんが、インデックスされる画像データとしては問題があるように思いますので、これは避けた方が良いと思います。

他の方法を模索中です・・(^_^;)
Lazy Load系のプラグインの中でBJ Lazy Load はアイキャッチを適用から外すことができます。
アイキャッチ画像は後から読み込みされなくなりますが、この場合なら、アイキャッチ画像にマークアップするだけでエラーは回避できるようになります。

アイキャッチだけへのマークアップするコードについてはこの下の「photonについて」のコードをお使いください。

◆ photonについて
実はphotonの仕組み上、画像のimgタグがブラウザで表示された時に書き換えられているのですが、この時、get_imag_tagの方のフィルターはphotonを使っていると無効になってしまい、自動的にマークアップさせることができません。

ただ、画像については、記事中の画像を全てマークアップしてください、との記述がありますが、1つでもマークアップされていれば、エラーは回避できます。

アイキャッチ画像のフィルターは問題ありませんので、アイキャッチ画像のフィルターのみをfunctions.phpにコピペしておけば、OKです。

アイキャッチ画像のフィルターのみの場合は以下の様になります。

// post_thumbnailにitemprop="image"を追加する
function custom_post_thumbnail($html){
    return str_replace('<img','<img itemprop="image"',$html); } add_filter('post_thumbnail_html','custom_post_thumbnail',10,5); 

datePublished & dateModified:公開日と最終更新日をISO8601書式でマークアップ

こちらはTwenty Fourteenの公開日を出力するコードを分解するのが面倒だったので^^;、下の画像の様に記事下に新たに公開日と更新日を表示させました。

Published&Modified date

上の画像の様な表記をしつつ、公開日と最終更新日のマークアップをするには、以下の様に記述します。
classは空欄にしておきましたので、CSSはお好みでお付け下さい(^^)

<div class="">
      <meta itemprop="datePublished" content="<?php echo get_the_date('c'); ?>">Published:<?php echo get_the_date(); ?></br>
<?php if ( get_the_date() != get_the_modified_date() ): ?>
      <time itemprop="dateModified" datetime="<?php the_modified_date('c'); ?>">Last Updated: <?php the_modified_date(); ?><?php endif; ?></time>
</div>

ここまでで、5項目の設定ができました。次にテストをします。

Structured Data Testing Toolで確認

出来上がったら、Googleさん提供の、Structured Data Testing Tool:構造化データテストツールで設定がちゃんとできているかをテストします。

Structured Data Testing Tool
Structured Data Testing Tool  |  Google Developershttps://developers.google.com/structured-data/testing-tool/

使い方などについては、Kenichi Suzuki さんの記事、「構造化データテストツールをGoogleが刷新、JSON-LDに対応」がとてもわかりやすいので、ご覧ください。

さてさて、また長々とした記事になってしまい恐縮です^^;
microdataは、はじめてみたらとてもの奥の深い世界で驚きました。
一応3,000文字目安で書いているのですが、すでに5,000文字超え・・今更何を言うかって感じですが^^;

でも次回書く予定のJSON-LDをWordPressに追加する方法はきっとこんなに長くならないはずです(^^)

今回やってみた5項目以外にもマークアップしておいた方が良いんじゃないかと思ったのが『Author』。
「誰が書いたのか」かもこれからますます、いろんな意味で重要になってくると思われるからです(^^)

ではでは、今日はこの辺で。
「リッチスニペット施策schema.orgのmicrodataをWordPressサイトに」の巻でした☆

お役に立ちましたら、シェアなどしていただけるとハッピーです!

Published:2015/10/08

Written by