📌

CloudinaryでのOGP生成をRailsに導入する

2021/03/17に公開

Rails

tech

はじめに

業務で cloudinaly を使った動的な OGP 生成を行ったので、メモとして残しておきます。

version

Ruby 2.7.1
Rails 6.0.3

使用する gem

cloudinary
meta-tags

やり方

gem を入れる

gemfile

gem 'cloudinary'
gem 'meta-tags'

shell

bundle install

メタタグの設定

設定ファイルの生成

shell

bundle exec rails generate meta_tags:install

config/initializers/meta_tags.rbが生成されるが、今回は特に編集しない。

最低限のメタタグの設定を入れておく。

application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイト名',
      title: 'タイトル',
      reverse: true,
      charset: 'utf-8',
      description: 'description',
      keywords: 'キーワード',
      canonical: request.original_url,
      separator: '|',
      og: {
        site_name: 'サイト名',
        title: 'タイトル',
        description: 'description',
        type: 'website',
        url: request.original_url,
        locale: 'ja_JP',
      },
    }
  end
end

タグが反映されるように、layouts に追加

doctype html
html
  head
  = display_meta_tags(default_meta_tags)

Cloudinary の設定

環境変数を設定

Cloudinary にログインして、Cloud name、API Key、API Secretをそれぞれ取得する。

.env にそれぞれを環境変数として設定する。

.env

CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=

設定ファイルを作成

config/initializers/cloudinary.rbを作成し、以下のようにする

Cloudinary.config do | config |
  config.cloud_name = ENV["CLOUDINARY_CLOUD_NAME"]
  config.api_key = ENV["CLOUDINARY_API_KEY"]
  config.api_secret = ENV["CLOUDINARY_API_SECRET"]
  config.secure = true
  config.cdn_subdomain = true
end

画像をアップロード

署名付き URL にするために、アップロードするファイルの Permission を設定します。

署名付き URL にすると、パラメータを勝手に変更されてしまうのを防ぐことができます。

Setting ページから、Upload を選択します。

次に、プリセットの追加に進みます。

プリセット名と、Delivery type を Authenticated に設定し、保存します。

Setting ページから、Upload から、Media library's upload presets で、作成したプリセットを選択します。

この状態でファイルをアップロードすると、Permission が Authenticated になっていることが確認できると思います。

set_meta_tags でメタ情報を動的に変更

OGP 画像を設定したページに以下のように set_meta_tags を入れておきます。

ogp の URL 生成は、メソッドとかにまとめる。

<% set_meta_tags title: @project.titme, description: @project.description, og: { title: @project.title, image: return_ogp_rul(@project), description: @project.description } %>

URL を返すメソッドはこんな感じ。

cloudinary_url で URL を返してくれます。

sign_url: true, type: 'authenticated'をいれることで、署名つき URL を発行してくれます。

transformation には、画像変換のパラメータを入れてください。

def return_ogp_rul(project)
  transformation = [{ x: 0, y: -65, gravity: 'west', color: '#F87373', overlay: {
    font_size: 40,
    font_weight: 'bold',
    text_align: 'left',
    text: project.title
  } }]
  cloudinary_url('ogp.png', sign_url: true, type: 'authenticated', transformation: transformation)
end