どうもおはようポテト(@ohayoupoteto22)です。
以前、Peing-質問箱-のようなものをRubyで自作してみたことがあったんですが…
その際に一番思考錯誤したのが「どうやってページ(質問)ごとにOGP画像を生成して設定するか」ということです
生成に関しては以前書いた記事の方法で実現できました↓

残すはRails環境で「どうやってページごとに設定するか」です(›´ω`‹ )
今回はその際に行ったことをご紹介したいと思います
目指したもの
このような状況を目指したいと。トップページが質問一覧で、それぞれの質問をクリックすると詳細ページに遷移します。その詳細ページを質問によって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」使えばええやん!!
ブログ主
<%= 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タグを書いてあげれば…
おほ^〜
無事OGP画像が変わっています!
くるみ
最後に
以上になります。
「content_for」とか完全に忘れてました…
復習って大事だね…我ながらまだまだケツの青いヒヨッコでした
参考になれば幸いです!では⸝⸝- ̫ -⸝⸝