Zenn
🦁

[SEO向上!]meta-tag, OPGをつける方法

2023/03/29に公開
Rails
Ruby
SEO
metatag
opg
tech

meta-tagを導入してみる

meta-tagをつけるメリット

1. 検索エンジン最適化（SEO）：
meta-tagは、検索エンジンに対してウェブページの内容を理解しやすくするために使用される。
正しく書かれたmeta-tagは、検索エンジンによるウェブサイトのランキングに影響を与えることができます。

2. ソーシャルメディアでのシェア：
meta-tagを使って、ソーシャルメディアでウェブサイトが共有された場合に、
適切なタイトル、説明、画像が表示されるようにすることができる。

3. ユーザーの利便性の向上：
ウェブサイト内で検索するときに役立つ。
正しく書かれたmeta-tagは、ウェブページのタイトルや内容に基づいて、
検索結果の説明を表示することができる。

meta-tagを正しく使うことは、ウェブサイトの検索エンジンランキングを改善し、
ユーザーの利便性を向上させることができる！！！

導入してみる

1. gemの導入

Ruby on Railsでmeta-tagを簡単に追加するためのライブラリを導入していきます。

gem 'meta-tags', :require => 'meta_tags'
  • bundle installを行う
  • rails g meta_tags:installでインストール
    => 基本的にはデフォルトのままで大丈夫!!!
    => config/initializers/meta_tags.rb というファイルができあがり作成され、
    ここを編集することでmetaタグとOGP調整
config/initializers/meta_tags.rb
# frozen_string_literal: true

# Use this setup block to configure all options available in MetaTags.
MetaTags.configure do |config|
  # How many characters should the title meta tag have at most. Default is 70.
  # Set to nil or 0 to remove limits.
  # config.title_limit = 70

  # When true, site title will be truncated instead of title. Default is false.
  # config.truncate_site_title_first = false

  # Maximum length of the page description. Default is 300.
  # Set to nil or 0 to remove limits.
  # config.description_limit = 300

  # Maximum length of the keywords meta tag. Default is 255.
  # config.keywords_limit = 255

  # Default separator for keywords meta tag (used when an Array passed with
  # the list of keywords). Default is ", ".
  # config.keywords_separator = ', '

  # When true, keywords will be converted to lowercase, otherwise they will
  # appear on the page as is. Default is true.
  # config.keywords_lowercase = true

  # When true, the output will not include new line characters between meta tags.
  # Default is false.
  # config.minify_output = false

  # When false, generated meta tags will be self-closing (<meta ... />) instead
  # of open (`<meta ...>`). Default is true.
  # config.open_meta_tags = true

  # List of additional meta tags that should use "property" attribute instead
  # of "name" attribute in <meta> tags.
  # config.property_tags.push(
  #   'x-hearthstone:deck',
  # )
end

2. デフォルトmeta-tagとOPGの設定

OPGとは

  • Open Graph Protocolの略称。
  • Open Graph Protocolは、Facebookが開発した、
    Webページをソーシャルメディア上で共有する際に利用されるプロトコルのこと。

設定してゆく！！！

  • `app/helpers/application_helper.rb``に設定していきます。

app/helpers/application_helper.rbファイル:
全てのビューで使われる共通のヘルパーメソッドを定義するためのファイル。
このファイルに定義したヘルパーメソッドは、全てのビューで使用することができる。
metaタグやOGPの設定処理を記述する場合!

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',
        site: '@あなたのツイッターアカウント',
        image: image_url('top_image.jpg'),
      }
    }
  end
end
  • title: Webページのタイトルを設定.headタグ内のtitleタグに反映されます。
  • description: Webページの説明文を設定。検索エンジンやSNSなどで表示される場合がある。
    　HTMLのheadタグ内のmetaタグに反映されます。
  • keywords: Webページのキーワードを設定。
    検索エンジンによる検索時に利用されることがあります。HTMLのheadタグ内のmetaタグに反映されます。
  • og:title: OGPで利用されるタイトルを設定。
    WebページがSNS上で共有された際に、タイトルとして表示されます。
  • og:description: OGPで利用される説明文を設定。
    WebページがSNS上で共有された際に、説明文として表示されます。
  • og:type: Webページの種類を設定。
    ウェブサイトであれば「website」、ブログであれば「blog」などの値を指定します。
  • og:url: WebページのURLを設定します。WebページがSNS上で共有された際に、共有元のURLとして表示されます。
  • og:image: OGPで利用される画像のURLを設定。
    WebページがSNS上で共有された際に、画像として表示されます。
  • og:site_name: Webページのサイト名を設定。
    WebページがSNS上で共有された際に、共有元のサイト名として表示されます。
私のサイトの場合
module ApplicationHelper
  def default_meta_tags
    {
      site: "If you want to go far, go together",
      title: "Together",
      reverse: true,
      charset: "utf-8",
      description: "一人ではなし得ないことも、みんなで協力すれば成し遂げられる! ともに学ぶ仲間がここにはたくさんいます。初めてみよう！",
      keywords: "勉強会,ウェブエンジニア,技術ブログ,Ruby,Ruby on Rails, HTML, CSS, javascript, SCSS",
      canonical: request.original_url,
      separator: "|",
      icon: [
        { href: image_url("default.png"), sizes: "60x60" },
        { href: image_url("default.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("default.png"),
        local: "ja-JP",
      },
      twitter: {
        card: "summary_large_image",
        site: "@aaaairinkiyowo",
        image: image_url("default.png"),
      },
    }
  end
end

3. HTMLのheadタグ内にmeta-tagを追加

<head>
:
 <%= display_meta_tags(default_meta_tags)%>
 </head>

以上！！！！！

Discussion