React, Angular, VueなどでSPAでWebアプリを構築している場合、個別ページにOGPタグが設定出来ずに困ることがあるかと思います。

Googleのクローラーは正しくJSを実行してDOMを描画しますが、TwitterやFacebookのそれは完全ではありません。

この問題に対するRailsで出来る解決策として、ユーザーエージェントを見て、TwitterやFacebookのクローラーからのアクセスには専用のコントローラーを対応させるという方法があります。

SPAのOGPタグ問題に対するRailsで出来る対策

実際にネコチャで使用している、Twitterクローラーに対応したコードが下のようになります。

routes.rb

Rails.application.routes.draw do
  constraints :user_agent => /Twitterbot/ do
    # ここにTwitterクローラー専用のルーティングを記入
    # 例えば
    get '/:id', to: 'api/v1/users#bot' 
  end

routes.rb

module Api
  module V1
    class UsersController < ApplicationController
      # ...
      def bot
        @user = User.find_by_uid(params[:id])
        render :inline => '<!doctype html>
<html lang="en-US">
<head>
  <title>ネコチャ</title>
  <meta charset="UTF-8"/>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="og:title" content="<%= @user.name%>にあいさつしよう とくめいチャット|ネコチャ">
  <meta name="og:description" content="送る側だけとくめいのチャット ネコチャ">
  <meta name="og:image" content="https://firebasestorage.googleapis.com/v0/b/payeth-d6881.appspot.com/o/Screen%20Shot%202019-01-22%20at%200.05.42.png?alt=media&token=9d45f97d-15fa-4582-a41c-928d5212c52f">
</head>
<body>
</body>
</html>'
      end
    end
  end
end

結果はご覧の通りです。(タイトルがユーザーごとに違います)
質問箱などOGPを活用したアプリケーションにぜひご活用下さい。

終わりに

私は現在、Web3のサービスの開発をしています。詳しくはこちらの記事をご覧下さい。
無料でイーサリアムが当たる、Web3時代の寄付サイトを作った話