Zenn
📷

[Rails]OGPの設定方法と、Local環境での確認方法[meta-tags]

2023/02/08に公開
Rails
gem
Open Graph protocol
tech

[Rails]OGPの設定方法と、Local環境での確認方法[meta-tags]

RailsでのOGP設定方法 + Local環境でのOGP確認方法について書きます。

meta-tagsというgemを使えば簡単に簡潔に書けるのでこれを使います。

OGP設定をするとURLをシェアした際に綺麗に表示できるため、
拡散したい、シェアしてもらいたいサービスに設定するのは必須だと思います。

👇 URLを貼り付けるだけで画像や説明文がこのように綺麗に表示される！

スクリーンショット 2023-02-06 9 53 00

Local環境でのOGP確認にLocalhost Open Graph Debuggerという神拡張機能を使います。

マサカリ大歓迎キャンペーン実施中ですのでコメントください！

では早速手順を

1. Gemfileに追加し、bundle installする

gem "meta-tags"

2. meta_tags:installコマンドで設定ファイルを追加

rails g meta_tags:install

上記コマンドでconfig/initializers/meta_tags.rbが生成される。

設定に関するコメントがたくさんあるが、初期設定で十分動くので無視する。

config/initializers/meta_tags.rb
# frozen_string_literal: true

MetaTags.configure do |config|

end

コメントアウトされている内容に関しては翻訳して読んでみてね！

3. application.html.erbにdisplay_meta_tagsメソッドを追加

app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <title>MetaTagsApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
    <!-- ↓ここに追加↓ -->
    <%= display_meta_tags(default_meta_tags) %>
  </head>

display_meta_tagsメソッドの引数に直接情報を渡すこともできますが、default_meta_tagsを定義した方が簡潔でわかりやすいです。

4. default_meta_tagsメソッドの定義

ここで具体的なサイト説明などを書いていきます。
site, title, description, imageあたりを自分のサイトに合わせて書き加えましょう。
keywordsは検索の際に使われるみたいですが、GoogleとBingはkeywords metaタグを完全に無視することを公言しているみたいですw

デモで表示しているサイトは以下のように設定しています。
後述のTwitterCardと見比べて、どの属性がどこの記述と関係しているか確認してみてください。

application_helper.rb
module ApplicationHelper
  def default_meta_tags
    {
      site: 'Pluspo',
      title: '都内スポーツ施設の横断検索サービス',
      reverse: true,
      charset: 'utf-8',
      description: 'Pluspoを使えば「スポーツ・日時・場所」の好きな組み合わせで自由にスポーツ施設を検索できます。',
      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用の設定を個別で設定する
      twitter: {
        card: 'summary_large_image', # Twitterで表示する場合は大きいカードにする
        site: '@', # アプリの公式Twitterアカウントがあれば、アカウント名を書く
        image: image_url('ogp.png') # 配置するパスやファイル名によって変更すること
      }
    }
  end
end

5. ogp.pngの作成

  • サイズ

    表示したいサイトに適した大きさを指定する必要があります。
    適切な画像サイズを調べて、そのサイズでogp.pngを作成しましょう。

    今回はTwitterカードのsummary_large_imageを表示したいので、1.91:1の592 x 310で作成しました。

  • 配置

    image_url('ogp.png')と書いた場合は、app/assets/images/ogp.pngに配置しましょう。

6. local環境でOGPを確認する

OGPは以下のような流れで表示されます。

  1. TwitterにURLを投稿する
  2. そのURLをTwitterが見にいく（クロールする）
  3. サイト内のmetaタグからOGPに関する情報を取得する
  4. 取得した情報を元にOGPを作成し、Twitterアプリに表示してくれる

開発環境でのURLはhttp://localhost:3000/ですので、外部からアクセスしても開発環境は覗けません。
このURLをTwitterに投稿しても、OGPが表示されないことはわかるかと思います。

さて、どうするか...

ここで神拡張機能のLocalhost Open Graph Debuggerを使うと鬼簡単にできます！！

(これを紹介したいからこの記事を書いたと言っても過言ではありません...)

まずはLocalhost Open Graph DebuggerをChromeに追加しましょう。

そしてLocalサーバーを立ち上げて、ブラウザで確認します。

  1. OGPを確認したいページで右上の拡張機能をクリックします。

screenshot

  1. すると5秒くらいでOpen debug pageというリンクが表示されるので、クリックして移動します。

  2. 移動先のページに見慣れないURLがあるのでコピーしましょう。

Desktop-screenshot

  1. Twitter表示の確認をする場合は、Twitter Card Validatorというリンクを開きましょう。

  2. 左側のCard URLに先ほどコピーしたURLを入力し、Preview Cardをクリックします。
    右下のログでsuccessfullyが出ていれば正しくOGPが設定されています。

Desktop-screenshot (1)

  1. Twitterで確認しましょう！

ツイート画面にURLを貼り付けて確認します！(成功!)

実際にツイートしなくても、Twitter側にキャッシュされているため確認できます。

スクリーンショット 2023-02-06 9 53 00

  1. Notionなんかは普通に貼り付ければ確認できますね。

スクリーンショット 2023-02-06 9 54 13

まとめ

以上、RailsでのOGPの作成と、開発環境でのOGP確認方法でした！
次は動的OGPの作成方法についてもやりたいですね〜。

もっと良い方法あるよーとか、書いてあること違うんじゃない？とかあれば、気軽にコメントください！

ありがとうございました〜

Discussion