こんにちは。Kajitz inc.の瀧田です。

hamlで構造化マークアップをしようと思った時にitemscopeはどうやって表現するかわからずに調べました。

構造化マークアップをした以下の差分を見ていただくのが一番わかりやすいと思います。

   .row
      .col-md-8
        - @posts.each do |post|
 -        %section.postBox
 -          %h1.title= post.title
 -          %p= post.description
 +        %section.postBox{ itemscope: true, itemtype: 'http://schema.org/BlogPosting' }
 +          %h1{ itemscope: 'headline' }
 +            = post.title
 +          %span{ itemscope: 'datepublished' }
 +            = post.created_at.to_s(:date)
 +          %span{ itemscope: 'keywords' }
 +            = post.link_to_tag_lists
 +          %p.description{ itemscope: 'description' }
 +            = post.description
            = link_to 'Read more', blog_friendly_path(post), class: %w(btn btn-success mb-3)
      .col-md-4
        = render 'shared/side_nav', categories: @categories, tags: @tags

https://github.com/tackeyy/blog/pull/95/files#diff-4160001fc33be2fbc1dfebb691b6d9c3

ポイントは以下の2つです。

まず、 %section.postBox{ itemscope: true, itemtype: 'http://schema.org/BlogPosting' } で itemscope と itemtype をつけで、 %h1{ itemscope: 'headline' } のように { itemscope: Property } という感じでプロパティを付与していきます。

参考

https://github.com/haml/haml/issues/875#issuecomment-229146321
http://schema.org/BlogPosting