Zenn
📷

Railsで静的なOGPを設定する。

2025/03/03に公開
Rails
Ruby
個人開発
Open Graph protocol
tech

将来自分のサイト(eigopencil.com/about)をリリースしてシェアした時に見栄えを良くしたかったのでOGPを設定していくことにしました。

OGP(Open Graph Protocol)

https://ogp.me/

  • Open Graphという名前の由来は?

元々はFacebook用に向けて開発をしており、Facebookの主な機能であるソーシャルグラフ(人間関係をオンラインで見れる機能、結びつきの情報)と、オープンソース文化を文字ってOpen Graphと呼ばれるようになったそうです。

<meta>タグ内にog:~を記載すれば、サイトURLをペーストした時にGraphObject(以下)を自動的に読み取り、上手い具合に表示してくれます。

<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="https://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="https://ia.media-imdb.com/images/rock.jpg" />

OGPをRails内でどう書くか

このドキュメント/gemを見つけました。

https://github.com/kpumuk/meta-tags

当初は投稿した内容の文字列データを画像の上にのせる感じで、動的にminimagick等を使って処理しようと思いましたが、いきなりやると複雑になって理解できなくなると思い、特別な処理が無い静的なOGPをまずは実装することに決めました。(動的なOGPを実装したらその記事を書きます。)

ドキュメントに書いてあることをまとめると、

必ずdisplay_meta_tagsを使ってレンダリングする

Important
You must use display_meta_tags in the layout files to render the meta tags.
In the views, you will instead use set_meta_tags, which accepts the same arguments
but does not render anything in the place where it is called.

OGPはこんな感じで書く。今回はx(twitter)のみにしたかったので、混乱を防ぐためにogpを使わずにtwitterのみoptionを使用します。

set_meta_tags twitter: {
  card: "photo",
  image: {
    _: "http://example.com/1.png",
    width: 100,
    height: 100
  }
}
# <meta name="twitter:card" content="photo">
# <meta name="twitter:image" content="http://example.com/1.png">
# <meta name="twitter:image:width" content="100">
# <meta name="twitter:image:height" content="100">

実装してみる

<!DOCTYPE html>
<html>
  <head> 
   <!--省略-->
   <%= display_meta_tags(set_default_meta_tags) %>
   <!--省略-->

とりあえずはapplication_helper.html.erbに書いておけばどこでもレンダリングされるし大丈夫だろうと思い、一時的にここに記載することにしました。

module ApplicationHelper
 def set_default_meta_tags
  {
   twitter: {
      card: "summary_large_image",
      image: image_url("1.png"),
      #これに変換される↓
      # <meta name="twitter:card" content="summary_large_image">
      # <meta name="twitter:image" content="http://example.com/1.png">
     }
  }
end
end

twitter cardの値がドキュメントではsummary, photo, playerのみで、大きいカードが表示できるsummary_large_imageが書かれていなかったのですが、card: "summary_large_image"と書いても大きいcardを表示することができました。

ツール

結果

上記のLocalhost Open Graph Debuggerを使ってローカルで確認

Discussion