MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。


構造化データ(microformats.org hAtom)をテンプレートに組み込んでマークアップしたお話。

WordPressの構築では、公式テーマといえどしっかり構造化データに対応していないものも少なくありません。
ウェブマスターツールの構造化データをチェックすると大量にエラーが!!なんてことも。

icons-google

SEOにどれだけ好影響を及ぼすのかはわかりませんが、最近はしっかり対応するように心がけています。
少なくとも構造化データでエラーが出ないようにはしておきたい所ですね!

今回改めて hentry(マークアップ: microformats.org)をイチから見直したので、フォーマット的なものを備忘録として残したいと思います。
(ご参考までに)

そもそも構造化データって?

ウェブマスターツールの
検索のデザイン > 構造化データ
でエラーを確認してみましょう。

microformats

よくあるのはupdatedがありません authorがありません というやつですね。
ただ、最新のソースというわけではありませんので
テストツールでURLを取得(またはコードのコピペ)で試してみましょう!
https://developers.google.com/structured-data/testing-tool/

構造化データとはいわゆる「セマンティックWEB」というものですが、HTMLに意味づけをすることで、コンピュータに
「これは日付です」「これは著者です」「これは記事の内容です」
といったことを正しい情報として伝えることができるわけですね。

色々参考になった記事をご紹介します。

SEO HACKS 様
「構造化データ」がよく分かる!初心者向け徹底解説
http://www.seohacks.net/blog/html_css/kouzoukadata/

構造化データにも種類があり、
microdata
microformats
RDFa
といったものがあります。

プラグインの中には、パンくずナビプラグイン Breadcrumb navxtのように、構造化のマークアップに対応しているものもあります。

ツクメモ様
リッチ スニペット – 構造化データとmicrodataとschema.orgと
http://tukumemo.com/seo-microdata-schema/

microformats.org 公式
hAtom examples
http://microformats.org/wiki/hatom-examples

なんでWordPressで構造化のエラーが出るの?

さて、多くのWordPressテーマは、head内に

<link rel="profile" href="http://gmpg.org/xfn/11" />

body直下とかに class="hfeed"

<div id="page" class="hfeed site">

articleに

/* PHP */
<article <?php post_class( ); ?>>

post_classのテンプレートタグが割り当てられています。
テンプレートタグ/post classについて

リンク先を見て頂ければわかりますが、このpost_class()は

<!-- 出力結果 -->
<article class="hentry 以下略">

投稿タイプだったり、記事IDだったり、フォーマットだったりを自動で出力し、その中に「hentry」も含まれて居ます。

WordPressが、microformatsの導入を視野に入れているということなんでしょうかね~??

hentryがある
> 構造化データでマークアップしています
> けど、hentryの中に間違ったコーディングや足りないものがありますよ

ということですね。
hentryがあるのに、その中身をカスタマイズしたり、もとからクラスやパラメーターが足りなかったりして、

hentryなのにちゃんとやってないじゃないの!!

とgoogle先生が怒っていらっしゃるというわけです。

今回マークアップした構造化データ

お使いのテーマや構築の仕方で違ってくると思うので、部分部分を列記していきます。

hentry

class="hentry"

記事全体を覆うもの

<article <?php post_class( ); ?>>
/* 以下略 */
</article>

利用中のテーマによっては、既にクラスが割り当てられていることもあるかと思います。
その場合は、

/* ダメな例 */
<article class="hoge" <?php post_class( ); ?>>
---
</article>

とせずに、

/* post_classに含める */
<article <?php post_class( 'hoge hoge2' ); ?>>
---
</article>

と記述することでclassを追加していくことができます。
もちろん、post_class( )で吐き出されるクラスが全部いらなければ
テンプレートタグを使わず、hentryだけクラスに追加しちゃっても良いでしょうね。

entry-title

class="entry-title"

記事のタイトル

<h1 class="entry-title">
    <?php the_title(); ?>
</h1>

tag

rel="tag"
タグやカテゴリー

/* PHP */
<p><?php the_category( ' ' ); ?></p>
<?php the_tags( '<p>', ' ', '</p>' ); ?>
<!-- 出力結果 -->
<p><a href="リンク" rel="category tag">cat1</a> <a href="リンク" rel="category tag">cat2</a></p>
<p><a href="リンク" rel="tag">tag1</a> <a href="リンク" rel="tag">tag2</a></p>

テンプレートタグ/the categoryについて
テンプレートタグ/the tagsについて

これらのテンプレートタグは自動でrel=”tag”を吐き出してくれるので問題は無さそうです。

entry-content

class="entry-content"
記事本文

<article <?php post_class( ); ?>>
  <div class="entry-content">
    <?php the_excerpt(); ?>
  </div>
</article>

アーカイブページだったらthe_excerpt、記事ページだったらthe_contentといった感じですね。

updated と published

class="published"
公開日

class="updated"
更新日

/* 一緒のクラスで */
<?php echo '<a href="' . get_permalink() . '" rel="bookmark"><time class="published updated" datetime="' . get_the_date( 'Y-m-d' ) . '">' . get_the_date() . '</time></a>'; ?>

多くの記事で紹介されているように、一緒のクラスでpublished updatedを指定してもエラーにはなりませんが、
せっかくなので公開日と最終更新日も分けて表示、かつ構造化のマークアップをしてみました。

/* PHP 公開日と最終更新日を分けて表示 */
<time class="published" datetime="<?php echo get_the_date() ?>"><i class="fa fa-clock-o"></i> <?php echo get_the_date(); ?></time>
<!-- update date -->
<?php if ( get_the_date() != get_the_modified_date() ) : ?>
  <time class="updated" datetime="<?php echo get_the_modified_date() ?>">
    <?php echo get_the_modified_date() ?>
  </time>
<?php endif; ?>

こちらの記事を参考にさせて頂きました。
CrystalSnowman.com 様
WordPress 投稿日と更新日のちょっと気の利いた表示方法
http://www.crystalsnowman.com/?p=405

bookmark

rel="bookmark"
記事URL

多くのテーマでは、一覧ページで記事タイトルに、
記事ページでは投稿日付にrel="bookmark"が追加されていると思います。

/* PHP 記事タイトル single以外でリンク + rel="bookmark" */
<h1 class="entry-title">
  <?php if ( is_single() ) : ?>
    <?php the_title(); ?>
  <?php else : ?>
    <a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
  <?php endif; // is_single() ?>
</h1>
/* 日付にリンク + rel="bookmark" */
<a href="<?php the_permalink(); ?>" rel="bookmark">
  <time class="published" datetime="<?php echo get_the_date() ?>">
    <?php echo get_the_date(); ?>
  </time>
</a>

author

class="vcard author"
class="fn"

著者

<?php echo '<a href="' . get_author_posts_url( get_the_author_meta( 'ID' ) ) . '" title="' . get_the_author() . '" class="vcard author">'. '<span class="fn">' . get_the_author() . '</span>' . '</a>'; ?>

セキュリティ上の観点から著者リンクを表示したくないということもあると思います。
(設定によってはログインアカウントユーザー名と同一のため)
当サイトでは Edit Author Slug を利用して、
/author/ユーザー名

/?author=ID

/writer/任意の文字列
に変更しています。
あなたのauthor・作者リンク、大丈夫??ログインユーザー名を隠して作者URLを変更するプラグイン!

まとめ

しっかりやれば、エラーは無くなると思います。

microformats

テストツールで試してみましょう!
https://developers.google.com/structured-data/testing-tool/

また、
構造化データ マークアップ支援ツール
https://www.google.com/webmasters/markup-helper/

というものもありますが、こちらはschema.org のマークアップ仕様。
WordPressでやるならテンプレートタグと相性がよく、クラスやパラメータの追加だけでマークアップできるmicroformatsがいいのかな~と思いました。

今後も変わっていくでしょうけどね。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA