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時代の寄付サイトを作った話