【サムネイル】OGPイメージを設定する【アイキャッチ】
はじめに
今回は公開しているRails7で開発したアプリケーションにOGPを導入したトピックを記事にします。
OGPとは？
OGP（Open Graph Protocol）とは簡単にいうとURLを共有した際に表示されるサムネイル画像などを設定する仕組みのことです。（SNS映え）
↓こうゆうやつ↓
アイキャッチイメージを設定することで公開したオリジナルアプリに少し興味を持ってもらえることもあるかもしれません^_^
前提
私はRails7でアプリ開発していますが、仕組み自体はHTMLの <meta>要素 として設定するものなので言語やフレームワークは関係ないものとして考えてください。
Railsアプリケーションにおいては application.html.erb に追記する形式で実装します。
別解もあるかもしれないですが、基本的に私の環境における導入手順を掲載します。
サムネイル（アイキャッチ）に使用する画像を準備する
画像サイズ
最適な画像サイズは 1200×630 といわれているみたいですが、私は 1024×1024 の画像を使用しています。
以下のサイトで使用したい画像サイズの確認やSNSの共有イメージが確認できます。
拡張子
一般的には.png形式を推奨されているようですが、「.jpg」「.png」「.webp」「.gif」の形式をサポートしているみたいです。私は.jpg形式を利用しています。
格納先ディレクトリ
app/public/images/画像データ名.拡張子
imageディレクトリは初期段階では存在していないので作成しました。
imageディレクトリではなくpublicディレクトリ配下でも後ほどHTMLで画像のパス指定する際にそのように指定すれば問題ないと思われます。適宜調整してください。
HTMLにmeta要素を追加
Railsアプリケーションでは app/views/layouts/application.html.erb 内に以下を記述します。
public配下に直接画像データを置いている場合はパス指定の images/ を省略してください。
<head>
<!-- 〜省略〜 -->
<!-- Open Graph tags -->
<meta property="og:title" content="しりとり画像ジェネレーター" />
<meta property="og:type" content="website" />
<meta property="og:url" content="自身のアプリのURL" />
<meta property="og:image" content="https://自身のアプリのURL/images/画像データ名.拡張子" />
<meta property="og:description" content="しりとりで画像生成を楽しもう" />
<meta property="og:site_name" content="word_chain_image_generator" />
<!-- X（旧Twitter） Card tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@自身のアカウント" />
<meta name="twitter:title" content="しりとり画像ジェネレーター" />
<meta name="twitter:description" content="しりとりで画像生成を楽しもう" />
<meta name="twitter:image" content="https://自身のアプリのURL/images/画像データ名.拡張子" />
</head>
<!-- 〜省略〜 -->
LINEトーク画面の参考イメージ
設定なしでURLを共有するとこんな感じで質素な印象でしたが、、、
OGPを設定することでどんなサイトなのかを印象づけることができます。
X（旧Twitter）で確認したい場合、OGタグの設定（デプロイ）直後はキャッシュの関係で十中八九、即時反映されないことが多いようです。
反映を確認するときはブラウザのキャッシュを削除したり、スーパーリロード（Shift押しながらリロードマークをクリック＝PCブラウザ限定）を行うかシークレットモードで確認すると上手くいくかもしれません。
まとめ
今回はOGPでSNS映えするアイキャッチサムネイルを設定して目を引く工夫をする、という内容でした。
Discussion