【学習】静的OGPの設定。

今回は静的OGPというものの実装に挑戦してみたいと思います。

環境

• Windows, WSL
• Docker
• Ruby 3.2.3
• Rails 7.1.3

理解

リンクをツイッターなどのSNSに貼った時自動でタイトルや画像なんかが表示されていますが、このような表示を可能としているのがOGP。
そして、静的OGPはリンクを貼った時、常に同じ内容。動的OGPはHPのURLや投稿記事URLなど、貼るリンクで表示が変わるもの。

当いう認識で合っているのか
記事参考に確認

参考記事など

早速実装

👇Gemfileに次のgemを追記した後インストール等行います（ファイル作成されますが追記は不要）

gem "meta-tags"

$ docker compose run web bundle install
$ docker compose run web rails generate meta_tags:install
      create  config/initializers/meta_tags.rb

そして、参考記事をもとに以下を行っていきます

• application-helper.rbにOGPの設定を実装していきます
• app/views/layouts/application.html.erbにdisplay_meta_tagsメソッドの追記
• app/assets/images/ogp.png に表示したい画像を配置

確認方法

参考記事の方にも確認方法は記載ありましたが、おまけで。

• 本番環境のサイトを表示したら右クリック
• Winの場合ページのソースを表示をクリック
• <meta property="og:title" content="ページのタイトル">のようなOGPタグが正しく設定されているか確認し、あればOK

最後にまとめ

「静的OGP」という文字を見ただけで難しそうのイメージを持ち敬遠していましたが、記事を参考に実装してみるとそうでもなかった。
私にもできると知れてよかったです。
今回の記事が何か参考になれば幸いです。