【Ruby】ページごとに動的にOGP画像を設定する方法

どうもおはようポテト(@ohayoupoteto22)です。

以前、Peing-質問箱-のようなものをRubyで自作してみたことがあったんですが…

その際に一番思考錯誤したのが「どうやってページ(質問)ごとにOGP画像を生成して設定するか」ということです

生成に関しては以前書いた記事の方法で実現できました↓

Cloudinaryを使って画像に文字を入れる方法

残すはRails環境で「どうやってページごとに設定するか」です(›´ω`‹ )

今回はその際に行ったことをご紹介したいと思います

お品書き

目指したもの
OGP画像を動的に設定する方法
最後に

目指したもの

このような状況を目指したいと。トップページが質問一覧で、それぞれの質問をクリックすると詳細ページに遷移します。その詳細ページを質問によってOGP画像を変えたいと。

こんな感じに。

OGP画像変わってるね！

くるみ

OGP画像を動的に設定する方法

metaタグ

まず、OGP画像設定に必要なmetaタグを記述します

<meta id="ogp_url" property="og:url" content="サイトのURL" />
<meta id="ogp_type" property="og:type" content="website" />
<meta property="og:title" content="タイトル" />
<meta property="og:description" content="説明"/>
<meta property="og:site_name" content="サイト名" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="Twitterアカウント名" />

これは全体のテンプレートとなるapplication.html.erbの<head>内に書きました。

それに加えて、最も重要なのがこの画像のURLを指定するmetaタグ。

<meta id="ogp" property="og:image" content="画像のURL" />

ここのcontentの部分を変えてあげればOGP画像が変わるので、質問詳細のページ(質問のテープルをPostテーブルにしているので)posts/show.html.erb内でここを書き換えればいいわけですね。

JavaScriptを使って

let post=document.getElementById("ogp_answer").textContent;#質問内容を取得

document.getElementById("ogp").textContent=`https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_54_bold:${post}/v114514/samples/my_folder/ogp_image_zzukdq.png`;

posts/show.html.erbの<script>内でこのように、質問内容を取得し、それをURLにぶち込み、そのURLを先ほどのmetaタグのcontentのURLとして書き換えてあげればいい…

そう思っていた時期が僕にもありました…

え?ダメなの!?

くるみ

確かにこの方法でもOGP画像に設定するURLはページごとに変わるのですが…

ogp画像を確認できるCard Validatorでチェックしてみたところ…

変わってない！？
トップページのOGP画像のままやん…

という事態に陥りました。

ブログ主

はわわ…

よく考えてみたら理由は明白で、表示されるOGP画像ってのはおそらくhead内だけを見て決められるものなので、後から実行されるJavaScript内で画像のURLを変えても、表示されるOGP画像は変わるわけないと…

こんな感じでしょうか。多分。

なので別の方法を探すことにしました…
(preloadとか使えばワンチャンあったのかも??)

content_for使えばいいやん！

なぜこんな苦労しているかというと、

application.html.erbを共通レイアウトとしその中の<body>内でyieldを使い個別レイアウトを表示しているからであって、その質問詳細ページも<head>含め一から書けば問題解決だったのですが…まあそれがとても面倒だったので…

ん…？「yield」…？

それじゃん！！
「yield」と「content_for」使えばええやん！！

ブログ主

content_forについて以下の記事が参考になります

参考【Rails入門】yieldとcontent_forを使ってページ毎にタイトルを変更Samurai Blog

<%= yield :ogp %>

というわけでapplication.html.erbの<head>内にogpというシンボル名のyieldを設置し、

<%src_path="https://res.cloudinary.com/dhyv1iouw/image/upload/l_text:Sawarabi%20Gothic_28_bold:#{@post.name}さんより,x_300,y_160/l_text:Sawarabi%20Gothic_54_bold:#{@post.content},co_rgb:333,w_950,y_-37,c_fit/v114514/samples/my_folder/ogp_image_zzukdq.png"%>
<% content_for :ogp do %>
<meta id="ogp" property="og:image" content=<%=src_path%>>
<% end %>

posts/show.html.erb内でcontent_forを記述し、そこに例のmetaタグを書いてあげれば…