はじめに

Rails で OGP meta tags を設定する方法について整理した。この例では content_for を使ってページ別に定義する方法を用いている。

TL;DR

  • サイト名などの共通項はレイアウトファイルに記述
  • レイアウトファイルに yield(:ogp) を追加し、ページ別の設定内容を展開
  • 個別ページの view ファイルに content_for(:ogp) でページ別の設定内容を記述
この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list

目次

  1. はじめに
  2. TL;DR
  3. 環境・条件
  4. 詳細
    1. レイアウトファイル
    2. トップページ
    3. その他のページ
    4. Tips
      1. og:description
  5. まとめ
  6. その他・メモ
  7. 参考文献

環境・条件

1
2
3
4
5
6
7
8
$ ruby -v
ruby 2.6.3p62 (2019-04-16 revision 67580) [x86_64-darwin18]

$ bundle info rails
* rails (5.2.3)

$ bundle info slim-rails
* slim-rails (3.2.0)

詳細

レイアウトファイル

app/views/layouts/application.html.slim

  • head に prefix 属性を付与する
  • OGP の共通的な内容(サイト名とか)はここに書く
  • OGP のページ別の内容を = yield(:ogp) で展開する
1
2
3
4
5
6
7
8
9
10
11
doctype html
html lang="ja"
  head prefix="og: http://ogp.me/ns# website: http://ogp.me/ns/website# article: http://ogp.me/ns/article# fb: http://ogp.me/ns/fb#"
    // 略
    // OGP 共通設定。twitter:card の種類は適宜変更
    meta property="og:site_name" content="Your Site Name"
    meta name="twitter:card" content="summary_large_image"
    // OGP ページ別設定
    = yield(:ogp)
  body
    // 略

トップページ

app/views/xxxx/index.html

  • contnt_for(:ogp) で下層に個別設定を定義する
    • slim なのでネストだけだが、erb の場合には <%= content_for(:ogp) do %> となる
  • トップページは og:type を website(や blog など)に設定
1
2
3
4
5
6
7
= content_for(:ogp)
  meta property="og:type" content="website"
  meta property="og:url" content="#{request.url}"
  meta property="og:title" content="Your Site Name - Top Page Title"
  meta property="og:description" content="Your Site Description"
  meta property="og:image" content="https://Path/To/Image.ext"
// 略

その他のページ

app/views/xxxx/show.html

  • contnt_for(:ogp) で下層に個別設定を定義
  • トップページ以外は og:type を articleに設定
1
2
3
4
5
6
7
= content_for(:ogp)
  meta property="og:type" content="article"
  meta property="og:url" content="#{request.url}"
  meta property="og:title" content="Your Site Name - Page Title"
  meta property="og:description" content="Current Page Description"
  meta property="og:image" content="https://Path/To/Current/Page/Image.ext"
// 略

Tips

og:description

ページ別の設定をするときは、文章べた書きじゃなくて item.name のような情報を埋め込む形になると思う。

og:description は90文字ぐらいが良い(とどこかで見た)ので、以下のように設定すると良い(っぽい)。

1
2
= content_for(:ogp)
  meta property="og:description" content="#{item.longDescription[0..90]}"

まとめ

  • サイト名などの共通項はレイアウトファイルに記述
  • レイアウトファイルに yield(:ogp) を追加し、ページ別の設定内容を展開
  • 個別ページの view ファイルに content_for(:ogp) でページ別の設定内容を記述

その他・メモ

参考文献

関連記事

この記事が参考になった方
ここかここからチャージや購入してくれると嬉しいです(ブログ主へのプレゼントではなく、ご自身へのチャージ)
欲しいもの / Wish list