こんにちは、ぱきらと申します。
プログラミングスクール『RUNTEQ』に未経験で入学し卒業たばかりの初学者です。
　
以前・個人開発をした際
静的OGPは設定できたけども、動的OGPを本番環境で反映させるのに苦戦しました。
今回は、meta-tagsというGemのset_meta_tagsメソッドを使って
設定している静的OGP画像を、動的OGP用の画像に上書きしてくれる事案を記載します！

Rails 7.1.3.1、　Ruby 3.2.3.、PostgreSQLを使っています

導入や設定が済んでいる前提のもの

db/schema.rbに、生成と保存をした動的OGP画像を格納するカラムを追加

私の場合は、Postsテーブルにogpカラムを追加しました

ターミナルでマイグレーションファイルを生成

rails generate migration AddOgpToPost ogp:string

db/migrate/xxx_add_ogp_to_post.rb（生成されたマイグレーションファイル）

class AddOgpToPost < ActiveRecord::Migration[7.1]
  def change
    add_column :posts, :ogp, :string
  end
end

app/models/post.rb に追記

class Post < ApplicationRecord
  ...
  belongs_to :user
+ mount_uploader :ogp, PostOgpUploader # UploaderをPost.ogpに紐付け
end

ターミナルでマイグレを実行

rails db:migrate

db/schema.rb

ActiveRecord::Schema[7.1].define(version: xxxx_xx_xx_xxxxxx) do
  ...
  create_table "posts", force: :cascade do |t|
    ...
+   t.string "ogp"
    ...
  end

使う４つの Gem を導入
Gemfile に追記
```
  ...
+ gem "mini_magick" # 動的OGP画像を生成する
+ gem "meta-tags", require: "meta_tags" # 特定のページのURLをシェア時にOGP画像に反映させる
+ gem "carrierwave", "~> 3.0"
+ gem "fog-aws" # AWS用のfog
  ...
```
ターミナルでインストールを実行
```
bundle install
```
- mini_magickの導入に参考にさせていただいた記事
  - 【動的OGP】 Rails7, Dockerを使ってXシェアを実装する
- carrierwave（3.0ver）の導入に参考にさせていただいた記事
  - Heroku x Railsで動的にOGP画像生成してみる

生成した動的OGP画像を、AWS S3 のバケットに保存する設定

app/uploaders/post_ogp_uploader.rb を生成し、以下のように追記

class PostOgpUploader < CarrierWave::Uploader::Base

+ if Rails.env.production?
+   storage :fog  # 本番環境ではAWS S3のバケットに保存
+ else
+   storage :file # 開発環境ではpublicディレクトリに保存
+ end

+ def store_dir
+   "AWS S3のバケットに保存する際のディレクトリ名を指定"
+ end

end

そして、👇の記事を参考にさせていただき config/initializers/carrierwave.rbなどを生成し、設定しました

meta-tagsの`set_meta_tags`メソッドで静的OGPの設定を動的OGP画像の設定に上書きする方法

❶ 動的OGPを適応したいコントローラー内のアクションに追記

私の場合は投稿データを使う、ログイン不要のアクションに追記しました

xxx_controller.erb

  ...
  def 動的OGPを適応したいアクション名
    @post = Post.find(params[:id])
+   if @post  # 投稿が存在する場合
+     # 保存した動的OGP画像のURLを ogp_image_url に代入
+     ogp_image_url = OGPを生成と保存するメソッド名(@post)   
+     set_meta_tags(og: { image: ogp_image_url }, twitter: { image: ogp_image_url }) 
+   end

  private

+ def OGPを生成と保存するメソッド名(post)
+   begin
+     image_data = OgpCreator.build("#{post.user.name}さんが#{post.title}を投稿しました")
+     post.update!(ogp: image_data) # 生成した動的OGP画像を保存
+     post.ogp.url   # 保存された動的OGP画像のURL
+   rescue StandardError => e
+     Rails.logger.error("動的OGP画像の生成または保存に失敗: #{e.message}")
+     nil
+   end
+ end
  ...

👆上記のset_meta_tagsメソッドは、 meta-tagsというgemのメソッドで
👇以下の静的OGPの設定にあるog:とtwitter:内のimage:内の値を、動的OGP用に上書きしてくれます

app/helpers/application_helper.rb（静的OGPの設定）

module ApplicationHelper
    def default_meta_tags
      {
        site: 'サイト名', ...
        og: { ...
          image: image_url('静的OGP画像名')},  # 動的OGPではここを上書きしたい
        twitter: { ... # X(旧Twitter)にもOGPを反映させたいなら必要な記載
          image: image_url('静的OGP画像名')}   # 動的OGPではここを上書きしたい
      }
    end
end

OgpCreator.build という記載は
👇以下の記事を参考に生成したapp/controllers/concerns/ogp_creator.rbを使います（今回の記事では詳細は割愛します）

❷ ビューで`meta_tags`を呼び出す

app/views/layouts/application.html.erbに追記

  <head>
    ...
+   # 静的OGP(特定のページのみ動的OGPを適応)
+   <%= display_meta_tags(default_meta_tags) %>
  </head>

追記できたら、動的OGPを適応したいアクションのページの検証ツールの要素を見てみましょう！
og:とtwitter:内のimageに
AWS S3バケットに保存された動的OGP画像URL（下記の画像の青く囲った箇所）が渡されましたね

❸ 動的OGPが適応されたか確認

AWS S3バケットに保存された動的OGP画像URL(上記の画像の青く囲った箇所)にアクセスしたら、動的OGP画像が表示された🎊
動的OGPを適応したいアクションのページのURLを、OGP確認ツールに入力すると動的OGP画像が表示された🎊
動的OGPを適応したいアクションのページのURLを、Xにシェアすると動的OGP画像が表示された🎊

👏✨これで完成です！！👏✨

X（旧Twitter）で動的OGP画像が表示されない場合の要因

app/assets/imagesに入れてる動的OGP用の画像のサイズが大きい
キャッシュの問題
- Xは７日ほどキャッシュが残るので、キャッシュが消えれば反映される可能性がある
動的OGPを反映させたい特定のページ(URL)が
ログインしないとアクセスできないURLだった場合、今回の記事の方法だけでは反映できません
- 本来、XにシェアされたURLは、Xのbotさん🤖がアクセスしに行き
  meta-tagsに渡されてるAWS S3バケットに保存した動的OGP画像URLを認識し、Xに動的OGP画像を表示してくれます。
- ただ、その動的OGPを反映させたい特定のページ(URL)が、ログインしないとアクセスできないURLだった場合は
  Xのbotさん🤖はログインできず・アクセスできない為、XにURLをシェアしても動的OGP画像が反映できないわけです。
- この場合の実装方法は、私は実行していないので知見はありません。申し訳ありません、調べてみて下さい🙇‍♀️

終わりに

はじめに記載した通り、私はプログラミングの初学者です。
この記事に間違った記載や、アドバイスがある方は
是非ともコメントで教えていただけると、大変助かります。
読んでいただき、ありがとうございました🙇‍♀️