構造化データをRailsでマークアップ

devtetsu

2019年4月23日 22:41

こんな人たちに読んでほしい!!

❶Rails使いで構造化データをマークアップしようと考えている方！

❷構造化データをマークアップしたいSEO担当の方！

❸Webエンジニアが何をやってるか雰囲気だけでも感じたい方！！

1 はじめに

第１回目の投稿がニッチなものになりますが笑、Railsでの構造化データマークアップ方法を紹介します。

業務上で構造化データマークアップに取り組んだことがあるのですが、実装の仕方が検索すると色々出てきて、

「結局どうすりゃいいの？？」

って自分自身迷ったので、これを押さえておけば迷うことはないと思う方法を書きました。

また、

「よし、わかった、実装じゃー！！」

となった後に地味につまづいたところもあるので、そこも紹介できればと！！

開発環境、使用言語等・・・　Ruby on Rails, 　Ruby, 　slim,　 jbuilder

2 構造化データとは？？

概要をまとめてあるいい感じのサイトがあったので引用させていただきます。

構造化データとは、HTMLで書かれた情報が何を意味するのかを、検索エンジンやその他のクローラーに理解できるようタグ付けしたものです。
人間ならばWebページを見れば、その文字列が会社の名前であるとか、お問い合わせ電話番号であるとかがわかりますが、ロボットには理解することは困難です。
そこで、あらかじめ決められたフォーマットをもとに、そのような文字データ(data)をロボットにも理解できるよう構造化して(structured)記述したものが構造化データ（structured data）です。

引用元

　　　　　　　　　　　　　　　　　　　　　最終アクセス　2019/4/23現在

インターネット上にリソースはいっぱいありますので詳しくは調べてみてください！！

SEO対策で構造化データに取り組んでいるエンジニアさん、Webディレクターの方とかもいらっしゃるのでは？？

マークアップするメリットは今日は置いておいて、具体的な実装法にフォーカスします。

構造化データのマークアップ方法で僕が見たことがある形式は、microdataとJSON_LDですね。（他にもあります。）

microdataはviewに直接書いていくので、直感的にわかりやすいです。

しかしながら、プロダクトのviewファイルに変更があった場合、書いたmicrodataも同時に変更しなければいけないので管理コストがかかります。

JSON_LDはちょっと学習コストありますが、グーグルに伝えたい情報をまとめて記載するイメージです。よって、管理コストが低く、後の運用に携わるエンジニアの方にも優しいです！！

グーグル先生もJSON_LDを推奨しているようです。

JSON-LD* （推奨）ページの見出しや本文の <script> タグ内に埋め込まれる JavaScript 表記。このマークアップにはユーザーに表示するテキストをそのまま挿入しないため、ネストされたデータアイテム（Event の MusicVenue の PostalAddress の Country など）を簡単に表現できます。また、コンテンツ管理システムの JavaScript コードや埋め込みウィジェットなどの方法でページのコンテンツに動的に挿入される JSON-LD データも、Google は読み取ることができます。

引用元

　　　　　　　　　　　　　　　　　　　　　最終アクセス　2019/4/23現在

ということで、今回はJSON_LDでの構造化データマークアップ方法について書いていきます！！

3 RailsでJSON_LDを実装してみよう！

Railsで実装してみましょう！！調べてみるとわかるのですが、構造化データマークアップのためのgemがちらほらあることに気づきます。

当時の僕は、

「既存のgemファイルのまま、マークアップできないか？」

と考えました。それらのgemを否定してるとかは決して無いです。使った方がいい時もあると思います。そこら辺はケースバイケースで考えましょう！！

構造化データをマークアップしようとしているプロジェクトでjbuilderが入っていたので、それで実装してみよう！となりました。

json.set! :@context, 'http://schema.org/'
json.set! :@type, 'Article'

json.set! :mainEntityOfPage do
  json.set! :@type, 'Webpage'
  json.set! :@id, 'https://hogehoge.jp'
end

json.set! :headline, hoge.headline
json.set! :image, hoge.image
json.set! :name, hoge.name
json.set! :description, hoge.description
json.set! :datePublished, hoge.published_date
json.set! :dateModified, hoge.updated_date

json.set! :author do
  json.set! :@type, 'Person'
  json.set! :name, hoge.name
end

json.set! :publisher do
  json.set! :@type, 'Organization'
  json.set! :name, '株式会社hogehoge'
  json.set! :logo do
    json.set! :@type, 'ImageObject'
    json.set! :url, hoge.image_object
  end
end

Articleの構造化データをjbuilderで書いた例です。ネストとかも、do〜endで囲ってあげればできちゃいます。Rails慣れてるとやりやすい！！

これを、ビュー該当ページのどこかで、

script type="application/ld+json"
  == render partial: （ファイルパス）, locals: { hoge: @hoge }

とすれば、はい完成！！

HTMLのソースを表示してみると、

<script type="application/ld+json">
{
"@context":"http://schema.org/",
"@type":"Article",
"mainEntityOfPage":{
　"@type":"Webpage",
　"@id":"https://hogehoge.jp"
},
　　"headline":"タイトル",
　　"image":"イメージURL",
　　"name":"名前",
   "description":"ディスクリプション",
　　"datePublished":"出版日",
　　"dateModified":"更新日",
"author":{
    "@type":"Person","name":"devtetsu"
},
　　"publisher":{
　　"@type":"Organization",
　　"name":"株式会社hogehoge",
　　"logo":{
　　　　　"@type":"ImageObject",
　　　　　"url":"ロゴ画像URL"
    }
　}
}
＜/script＞

みたいな感じで出てくると思います！！

localsで宣言した変数hogeはちゃんと反映されています！！便利！！

グーグル先生のテストを受けるのも忘れずに！！

参考URL

Google構造化データテストツール

エラーが出ないこと、内容をきちんと確認して、OK！！

4 思わぬ落とし穴

他のプロジェクトでも構造化マークアップを頼まれて、jbuilderで実装しました。ところが、

「ファ？？」

となった時がありました笑

こんなエラーが、、、

構文エラー: 値、オブジェクト、または配列が必要です。

あれ、シンタックス間違えた？？とか思い３時間くらいもがいた挙句、原因が判明。

<script type="application/ld+json">
<!-- BEGIN (ファイルパス） -->
{
"@context":"http://schema.org/",
"@type":"Article",
"mainEntityOfPage":{
　"@type":"Webpage",
　"@id":"https://hogehoge.jp"
},
　　"headline":"タイトル",
　　"image":"イメージURL",
　　"name":"名前",
   "description":"ディスクリプション",
　　"datePublished":"出版日",
　　"dateModified":"更新日",
"author":{
    "@type":"Person",
    "name":"devtetsu"
},
　　"publisher":{
　　"@type":"Organization",
　　"name":"株式会社hogehoge",
　　"logo":{
　　　　　"@type":"ImageObject",
　　　　　"url":"ロゴ画像URL"
    }
  }
}
<!-- END  (ファイルパス） -->
＜/script＞

お気づきでしょうか、、、

コメントアウトー！！！

render使うと絶対に入ってくるやつ。こいつのせいでグーグル先生がおこです。何故最初のプロジェクトでは出なかったのかが謎でした。Railsのバージョンとかですかね？？

5 解決策　

ぶっちゃけ、デプロイしたらコメントアウト消えるから正直そもそも大丈夫でした。笑

当時の僕はローカルでしか物事を考えられないポンコツくんだった（viewファイルだけじゃなくてデプロイされたプロダクトのHTMLもちゃんと一回読もうね笑）ので別な方法で書きました。ヘルパーでの実装です。

def json_ld(hoge)
    jsonld = JSON.generate({ "@context":"http://schema.org/",
                          "@type":"Article",
                          "mainEntityOfPage":{
                              "@type":"Webpage",
                              "@id":"https://hogehoge.jp"
                          },
                          "headline":hoge.headline,
                          "image":{
                              "@type": "ImageObject",
                              "url": hoge.url,
                          },
                          "name":hoge.name,
                          "description":hoge.description,
                          "datePublished":hoge.updated_date,
                          "dateModified":hoge.updated_date,
                          "author":{
                              "@type":"Person",
                              "name":hoge.name
                          },
                          "publisher":{
                              "@type":"Organization",
                              "name":"株式会社hogehoge",
                              "logo":{
                                  "@type":"ImageObject",
                                  "url":hoge.image_object
                                  }
                              }
                          })
    jsonld.html_safe
end

怒涛のヘルパー笑

これでもできる！！（あんまり綺麗じゃない、、、笑）

これを、

script type="application/ld+json"
  = json_ld(@hoge)

とすればローカルでもエラー出なくて気分がいい！！(気分がいいだけ)

でも、このやり方はjbuilderも入っていなくて、gem増やしたくないぜ！！みたいな時とかはいいかもしれないですね！！

6 まとめ

・jbuilderで大体書ける！（構造化データマークアップ用のgemは必要に応じて）

・jbuilderで書いて構造化データテストのエラーが出たら、HTMLにコメントアウトが入っているかも、、、。

・jbuilder入っていない、かつgem増やしたくないと感じていたら、ヘルパーでも書ける！

要するに最終的に表示されるHTML上にグーグル先生指定のjsonが返ってきていればいいのです。方法は多分もっといっぱいあると思います。

稚拙ながらつらつらと書かせていただきました。ここまでご覧いただき、ありがとうございます。

#Ruby #RubyonRails #slim #JSON_LD #構造化データ #SEO #テクノロジー #プログラミング

構造化データをRailsでマークアップ

1 はじめに

2 構造化データとは？？

3 RailsでJSON_LDを実装してみよう！

4 思わぬ落とし穴

5 解決策

6 まとめ

いいなと思ったら応援しよう！

5 解決策　