WordPress はじめてのmicrodataマークアップ実践

WordPress公式のテーマで使用している、構造化データのマークアップ形式はmicroformatsを採用しています。
このサイトはschema.org仕様でマークアップにmicrodataを用いて意味付けをします。
パンくずのマークアップについては、今のところdata-vocabulary.orgを使用してマークアップします。

著者情報のマークアップ

著者情報の意味付けから始めます。
このサイトはサイドバーに著者紹介を入れました。
マークアップは以下のようにしています。CSS指定のためのクラスは省略しています。

テストツールで確認
schema.org person

参考サイト
スキーマ(Schema.org) 入門編 第2回!「著者情報」のマークアップ方法いろいろ

schema.orgとmicrodataのマークアップは上記参考サイトの内容を使わせていただきました。
itemscope itemtype=”http://schema.org/Person”で人について宣言します。
itemscope、itemtypeについてschema.org日本語訳ページの説明で下記のようになっています。

itemscopeを追加することによって、<div>と</div>の間にあるHTMLがある特定のものについての情報であると示すことになります。しかし、あるものについての情報があると分かっても、それが一体どのようなものなのかが分からなければ意味がありません。
項目の種類を特定するには、itemscopeのすぐ後ろのところでitemtype属性を使用します。
schema.orgを使いましょう

このサイトのPersonで使っているitemprop(プロパティ)

  • name 名前
  • alternateName ニックネーム
  • sameAs 著者情報があるウェブページ
  • description 概要
  • address 住所

itemscope itemtype=”http://schema.org/Person”を宣言する前に設定しているitemprop(プロパティ)
はPerson以外のプロパティとしても使えます。子要素として使うためにid=”profile”を設定しています。

  • author 著者
  • copyrightHolder 著作権者
  • editor 編集者

このサイトの場合ブログ記事の構造化データマークアップを設定をしている
itemscope itemtype=”http://schema.org/Article”の子要素として使っています。
著者情報を子要素として使うため、設定したid=”profile”をitemrefで参照します。
itemtype=”http://schema.org/Article” itemref=”profile”

実践してみて

まだまだ手探り状態です。少しずつでも慣れて構造化データマークアップを意識したいと思います。
もっとこうしたほうがいい、という点などありましたら、ぜひ教えてください。

コメントを残す

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

Share・Feedly