三文小説のOGPをCloudinaryを使って実装した

April 29, 2022

こんにちは、たわらです。

小説投稿サービス『三文小説』で OGP を実装しました。そのメモ。

https://sanmonsyousetu.com/

これを参考にすればできる

Cloudinary の使い方から実装方法まで解説してある。これさえあれば簡単に実装できる。

Cloudinary で動的に OGP 画像を生成する方法 | catnose

メタタグなどの実装はこちらを参考。gem 'meta-tags'を使えば必要な meta タグをきれいに出力してくれる。

【Rails】 meta-tags と Cloudinary を使って動的に OGP 画像を作る - Qiita

target="_blank" だけだと脆弱性がある

twitter シェアボタンを押下時に別タブで開くようにするために、target="blank"を用意する必要があるけど、 それだけだと脆弱性がある。rel="noopener noreferrer"をつける必要がある。

実装例。

    = link_to 'お問い合わせはDMください', "https://twitter.com/kentarotawara", target: "_blank", rel: "noreferrer noopener"

「別タブで開く」リンク(target="_blank")は脆弱性あり?【SEO 情報まとめ】 | 海外&国内 SEO 情報ウォッチ | Web 担当者 Forum

(了)