🌵

metaタグ、OGP設定

2023/06/28に公開

2件

はじめに

ポートフォリオ作成中のプログラミング初学者です🔰
SEO対策のためにmeta-tagを導入してみました！

metaタグとは

簡単にいうと、

ホームページのファイル（HTMLファイル）に書く「人の目には見えない、そのページに関する説明書き」のこと。

ウェブページの検索エンジン最適化（SEO）やウェブページの品質向上、ユーザーエクスペリエンスの向上などに役立ちます💡正確で適切なメタタグを設定することで、ウェブページの特性やコンテンツを正しく伝えることができます。

https://wa3.i-3-i.info/word11805.html

設定

1. Gemfile追加

meta-tagsというgemを使うと簡単に書けます！

gem 'meta-tags'

bundle installする！

2. meta_tags:installコマンドで設定ファイル追加

meta_tags:install

上記コマンドでconfig/initializers/meta_tags.rbが生成される。

設定に関するコメントがたくさんあるが、初期設定で十分動くので無視してOK🙆🏻‍♀️

config/initializers/meta_tags.rb

# frozen_string_literal: true

MetaTags.configure do |config|

end

3. application.html.erbにdisplay_meta_tagsメソッドを追加

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
  <head>
    <title>MetaTagsApp</title>
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
    <%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
     # ここに追加 
   <%= display_meta_tags(default_meta_tags) %>
  </head>

4. default_meta_tagsメソッドの定義/OGPの設定

ここで具体的なサイト説明などを書いていきます。
下記に例を記載します！
自分のサイトに合わせて書き加えて見ましょう👀

application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'サイトネーム',
      title: 'タイトル',
      reverse: true,
      charset: 'utf-8',
      description: 'テキストテキストテキストテキストテキストテキストテキストテキストテキスト',
      keywords: 'キーワード１,キーワード2,キーワード3',
      canonical: request.original_url,
      separator: '|',　
      icon: [
        { href: image_url('logo.png') },
        { href: image_url('top_image.png'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/png' },
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: image_url('top_image.jpg'),# 配置するパスやファイル名によって変更する
        local: 'ja-JP',
      },
      twitter: {
        card: 'summary_large_image', # Twitterで表示する場合は大きいカードに変更
        site: '@あなたのツイッターアカウント', # アプリの公式Twitterアカウントがあれば、アカウント名を記載
        image: image_url('top_image.jpg'),# 配置するパスやファイル名によって変更
      }
    }
  end
end

自分のサイトの場合

application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'OWN ONE',
      title: 'OWN ONE',
      reverse: true,
      charset: 'utf-8',
      description: 'フィットネス・食事・体重記録＆共有サービス',
      keywords: 'フィットネス,食事記録,ジム',
      canonical: request.original_url,
      separator: '|',
      icon: [
        { href: image_url("favicon.ico"), sizes: "60x60" },
        { href: image_url("logo5.png"), rel: "apple-touch-icon", sizes: "90x90", type: "image/png" },
      ],
      og: {
        site_name: :site,
        title: :title,
        description: :description,
        type: 'website',
        url: request.original_url,
        image: image_url('logo5.png'), 
        local: 'ja-JP'
      },
      twitter: {
        card: 'summary_large_image',
        site: '@',
        image: image_url('logo5.png')
      }
    }
  end
end

metaタグ	説明
site	サイトの名前を指定します。
title	ページのタイトルを指定します。
reverse	タイトルとサイト名の順序を逆にするかどうかを指定します。
charset	HTMLの文字エンコーディングを指定します。
description	ページの説明を指定します。検索エンジンやSNSなどで表示される場合があります。
keywords	ページのキーワードを指定します。
canonical	ページの正規URLを指定します。
separator	タイトルとサイト名の区切り文字を指定します。
icon	アイコンの情報を指定します。`href`はアイコンのファイルパスを指定し、`rel`はアイコンの関連情報、`sizes`はアイコンの表示サイズ、`type`はアイコンのMIMEタイプを指定します。
og	Open Graphプロトコルのためのメタタグ情報を指定します。`site_name`はサイト名、`title`はページのタイトル、`description`はページの説明、`type`はページのタイプ、`url`はページのURL、`image`はページの画像、`local`は地域の言語を指定します。
twitter	Twitterカードのためのメタタグ情報を指定します。`card`はカードの種類、`site`は関連するTwitterアカウント、`image`はカードで表示される画像を指定します。

OGPとは？

OGPとは「Open Graph Protcol」の略。
SNSでリンクをシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのHTML要素です。

OGPは、Facebookによって開発され、後に他のソーシャルメディアプラットフォーム（Twitter、LinkedInなど）にも採用されました。

OGPメタタグを設定することによって、ソーシャルメディアプラットフォームがWebページの情報を正しく解釈し、リンクのプレビュー画像やタイトル、説明を表示できるようになります！

5. top_imageの作成

必要であれば、表示したいサイトに適した大きさの画像を作成してください！

サイズ
Twitterカードだと、規定サイズは大小2種類あり、下記のとおりです。

	Summary（小サイズ）	Summary Large image（大サイズ）
比率	1:1	1.91:1
サイズ（幅 × 高さ）	144 × 144px 以上	600 × 314px 以上
適正サイズ（幅 × 高さ）	800 × 800px　1200 × 1200px　など	800 × 418px　1200 × 627pxなど
量	5MB以下