Yak shaving logs


My life is just yak shaving.

hamlでSchema.orgの構造化マークアップ

2017/08/30 #rails #seo #haml

By Yusuke Takita


こんにちは。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' }itemscopeitemtype をつけで、 %h1{ itemscope: 'headline' } のように { itemscope: Property } という感じでプロパティを付与していきます。

参考

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

このエントリーをはてなブックマークに追加

categories


最新記事


tags