こんにちは。Takitaです。
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