...

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

Rubyの動的なOGP画像

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

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

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

 

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

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

 

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

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

 

目指したもの

このような状況を目指したいと。トップページが質問一覧で、それぞれの質問をクリックすると詳細ページに遷移します。その詳細ページを質問によって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タグを書いてあげれば…

 

おほ^〜
無事OGP画像が変わっています!

 

しゃー!

ソロモン

 

最後に

以上になります。

「content_for」とか完全に忘れてました…

復習って大事だね…我ながらまだまだケツの青いヒヨッコでした

参考になれば幸いです!では⸝⸝- ̫ -⸝⸝

参考になったらシェアしよう

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA