OGPとは

OGP（OpenGraphProtocol）
SNSでWebページのリンクを表示する際にタイトル、説明、画像などの情報を取得するためのプロトコル

ヘルパーメソッドの定義

サンプル


def full_title(page_title = '')　　ページのタイトルを生成。ページ固有のタイトルがあればそれを使い、なければデフォルトタイトルを使用する
base_title = 'MC BATTLE CHANNEL'
if page_title.empty?
base_title
else
"#{page_title} | #{base_title}"
end
end

def full_url(path)　　環境に応じて、適切なドメインで完全なURLを生成 domain = if Rails.env.development? 'http://0.0.0.0:3000' else 'https://mcbattle-ch.jp' end "#{domain}#{path}" end


# レイアウトにおけるメタタグの設定
- OGPのためのメタタグを設定している
- helperで定義したfull_titleやfull_urlを利用して動的に値を生成
- サンプル

　# Twitterでの表示形式やアカウントを指定 # OGPの基本情報を設定 ``` # 個別ページでの内容設定 - `app/views/~~~~.html.erb`で個別のページのタイトル、説明、画像URLを設定する - `content_for`指定したシンボル（:title, :description, :image_url）に対して、内容を設定 - レイアウトで設定したOGPの情報がページごとに異なる内容になる ``` <%= content_for(:title, "この個別ページのタイトル!") %> <%= content_for(:description, "この個別ページの説明文!") %> <%= content_for(:image_url, full_url("assets/mc/hoge.img")) %> ``` # 実装工程例 ``` . 実装工程ヘルパーメソッドの定義: 共通のロジック（タイトルの生成、URLの生成）をヘルパーに定義します。レイアウトの編集: OGPのためのメタタグをヘッダーに追加し、ヘルパーメソッドを使用して動的な内容を設定します。個別ページの編集: 各ページで特有のタイトル、説明、画像を content_for を使って設定します。テスト: 開発環境と本番環境でページを表示し、OGPが正しく反映されているかを確認します。 ```

【2020年版】Twitterカードとは？使い方と設定方法まとめ

Twitterカードの使い方

<meta name="twitter:card" content="カード種類" /> <!--①-->
<meta name="twitter:site" content="@ユーザー名" /> <!--②-->
<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->

カード種類を指定

<meta name="twitter:card" content="カード種類" />
# summaryかsummary_large_image

Twitterのユーザー名指定

<meta name="twitter:site" content="@saruwakakun" />

③〜⑥は他SNSと共通のコード

<meta property="og:url" content="記事のURL" /> <!--③-->
<meta property="og:title" content="記事のタイトル" /> <!--④-->
<meta property="og:description" content="記事の要約（ディスクリプション）" /> <!--⑤-->
<meta property="og:image" content="画像のURL" /> <!--⑥-->
↓ 例
<meta property="og:url" content="https://saruwakakun.com/best" />
<meta property="og:title" content="サルワカの殿堂入り記事集" /> 
<meta property="og:description" content="これまで公開してきた200以上の記事の中で、特に人気のあったものを紹介します。" /> 
<meta property="og:image" content="https://saruwakakun.com/images/example.png" />

Card Validator

https://cards-dev.twitter.com/validator

SabaCrevette / travel_app

Xシェア機能について確認・調査 #61