meta_tags を使ってRailsアプリを楽にOGP対応する時のサンプル
表題の通りの事をやりたいケースって多いと思うんですが、いまいち分かりやすいサンプルが見当たらないので、ざっと書いとく。
やりたいことは、重複コードをなるべく減らして、楽にOGP対応すること。ついでに面倒なmetaタグのtitleとdescriptionも良い感じに設定すること。
前提
# Gemfile にて gem 'meta_tags'
で、bundle (install) しとく。
# application.html.slim とかのレイアウトファイルで以下。 _header.html.slim とかに分離してたらそっち。 ruby: og = { url: request.original_url, type: 'website', # こう書くとtitleメソッドで入れたのが使われるらしい title: :title, site_name: 'OGPの下に出るサイトの名前', # 画像は置き場所にあわせて適宜 image: request.scheme + '://' + request.host + "/ogp.png", description: :description, } head = display_meta_tags site: 'デフォルトのサイトの名前', description: 'でふぉるとの説明文', fb: { app_id: ENV['FACEBOOK_APP_ID'] }, og: og
ogを変数に入れてるのは単に可読性の都合です。
あとは、個別のページのviewで以下のようにする。
# show.htm.slim ruby: # まぁ何か以下のような感じで使いたい変数を入れる。 title @product.name description @product.description set_meta_tags og: { image: @product.image.url }
注意事項とか
こうすると、 (ブラウザのタイトルバーに出る) title 要素には "デフォルトのサイトの名前 - #{@product.name}"
と出る。しかし、OGPのタイトルの部分には @product.name
が出る。
ここはOGPとブラウザで役割違うと思うし、僕はこれで良いと思ってこうしてるんだけど、両者を併せたい場合はちょっと面倒。 以下のモンキーパッチが使えそう。
Open Graph og:site_name getting merged with title · Issue #119 · kpumuk/meta-tags · GitHub