microdataによるブログの構造化の例です。
とりあえずこのブログを構造化してみたのでテンプレをメモっておきます。どうぞ参考にしてくださいな。
解釈違いしている部分もあるかもしれませんので過信しないでください。もし、これはおかしいんじゃねというものを見つけたら教えてもらえると助かります。
以下が構造化したソースです。
: <body itemtype="http://schema.org/BlogPosting" itemscope> : <article itemprop="articleSection"> <h1 itemprop="headline">タイトル</h1> <div class="content" itemprop="articleBody"> <p itemprop="description">microdataによるブログの構造化の例です。</p> <p>とりあえずこのブログを構造化してみたのでテンプレをメモっておきます。</p> <p>投稿者:<span itemprop="author">長倉</span></p> </div> : </article> : </body> </html>
この使い方は怪しいんですがサイドバーにある新着記事にはheadlineをつけてみました。
おそらくarticleSectionの外にheadlineを書くと無効になるかもしれません。書いておいてあれですがこれはあまり参考にしないでください。
<aside> <dl> <dt class="ttl">Topics</dt> <dd> <ul> <li itemprop="headline">WordPress カスタムポストタイプでページ送り (12/13)</li> <li itemprop="headline">WordPress カスタムポストタイプでページ送り (12/13)</li> <li itemprop="headline">WordPress カスタムポストタイプでページ送り (12/13)</li> </ul> </dd> : </dl> </aside>
解説
まず、bodyに対してitemtypeでschema.orgが配信しているBlogPostingというデータを参照させます。
それをitemscope属性を記述することでtrueにしてbody以下にあるitempropを参照するようにします。
itempropにはデータの種類が入ります。参照:http://schema.org/BlogPosting
よく使うであろうものをschema.orgから引用して列挙しますと以下の通りです。
- headline 見出し
- name 事柄の名前
- articleSection 記事を囲んでいる要素
- articleBody 本文が書かれている要素
- description 説明
- keywords キーワード(カンマ区切り)
- author 投稿者、管理人
- 関連記事
-
-
Firefox アドオンを使わずにページ全体のSSを撮る方法 2015/02/02
-
良質なサイト製作に役立つサイト 2014/12/31
-
microdataでブログを構造化 schema.org/BlogPosting 2014/12/20
-
hr要素のスタイリング 2014/10/31
-
HTML5+CSS3で画像なし2カラムのfc2ブログテンプレートを作ってみました 2014/10/31
-