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