📘

静的OGPの設定方法（開発環境 / 本番環境）

2024/07/26に公開

Open Graph protocol

localhostopengraph

tech

開発環境

macOS
VSCode
Rails 7.1.3.3
ruby-3.2.3
PostgreSQL 16.2

行いたいこと

X（Twitter）で開発したアプリのリンクをポストする際に静的OGPで指定した画像やタイトルを表示する。（開発環境 / 本番環境）

Gemのインストール

・Gemfileに以下を追記しbundle install

Gemfile

gem "meta-tags"

rails g meta_tags:install コマンドでファイルを追加

・ターミナルで以下のコマンドを実行

ターミナル

$ rails g meta_tags:install

・こちらのファイルが追加される（修正追記不要）

config/initializers/meta_tags.rb

MetaTags.configure do |config|

# コメントアウトで様々な記載

end

display_meta_tagsメソッドの追記

・app/views/layouts/application.html.erbに以下の追記をする

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>Myapp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", media: "all", as: "style", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", type: "module" %>

    <%= display_meta_tags(default_meta_tags) %>   # これを追記

default_meta_tags メソッドの記載

・app/helpers/application_helper.rbに以下の様に記載

app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'Live Fes',
      title: '音楽ライブ・フェスの余韻を共有できるサービス',
      reverse: true,
      charset: 'utf-8',
      description: 'Live Fesでは、音楽ライブやフェスの余韻や喪失感を参加者同士で共通し、感想や思い出を語り合うことができます。',
      keywords: '音楽,ライブ,フェス,余韻,喪失感,共有',
      canonical: request.original_url,
      separator: '|',
      og:{
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: image_url('ogp.png'),
        local: 'ja-JP'
      },
      twitter: {
        card: 'summary_large_image',
        site: '@obvyamdrss',
        image: image_url('ogp.png')
      }
    }
  end
end

app/assets/images/ogp.png に表示したい画像を配置

・default_meta_tags メソッドにimage: image_url('ogp.png')と記載した場合は、
　app/assets/images/ogp.pngに画像を配置する
・表示したいサイズがあれば調整してから配置する

OGPを開発環境で確認する

・Chromeの拡張機能Localhost Open Graph Debuggerを使い画像やタイトルが
　表示されるか確認する（以下のリンクから拡張機能を追加します）

・拡張機能を追加したら開発環境でブラウザを開く　　　　　　 ⇩ここに拡張機能が表示される

・拡張機能を選択すると以下の様に表示されるのでSubmitをクリックする
⇨Successと表示されると別ブラウザにCopy Linkが表示される

・表示されたCopy Linkをコピー⇨and debug it onからXを選択

・Card URLにコピーしたURLを貼り付ける⇨Preview Cardをクリック
・以下の様にlogにCard loaded successfullyが表示されれば正しく設定されています
・発行されたURLをnotionに貼り付け以下の様に表示されれば正しく設定できています

OGPを本番環境に設定する

・canonical:とurl:を本番ブラウザのURLに修正する
・本番環境も開発環境と同様にLocalhost Open Graph Debugger、notionに貼り付けることで
　OGPを確認できます