はじめに

RailsアプリケーションでSEO対策を行うために、meta-tags Gemを使用してメタタグを管理する方法について説明します。

メタタグの管理

meta-tags Gemのインストール

まず、meta-tags Gemをインストールします。Gemfileに以下の行を追加しbundle installを実行します。

Gemfile

gem 'meta-tags'

コントローラーでメタタグを設定

meta-tags Gemを使用すると、コントローラーでメタタグを設定することができます。各アクションでメタタグを設定する方法と、アプリケーション全体のデフォルト設定を行う方法を紹介します。

各アクションでのメタタグ設定

以下の例では、ArticlesControllerで記事の詳細ページに対するメタタグを設定しています。

app/controllers/articles_controller.rb

class ArticlesController < ApplicationController
  def show
    @article = Article.find(params[:id])
    set_meta_tags title: @article.title,
                  description: @article.summary,
                  keywords: 'rails, meta-tags, seo',
                  og: {
                    title: @article.title,
                    description: @article.summary,
                    type: 'article',
                    url: article_url(@article),
                    image: @article.image_url
                  }
  end
end

アプリケーション全体のデフォルト設定

アプリケーション全体のデフォルトのメタタグを設定するためには、ApplicationControllerで設定を行います。

app/controllers/application_controller.rb

class ApplicationController < ActionController::Base
  before_action :prepare_meta_tags, if: -> { request.get? }

  private

  def prepare_meta_tags(options = {})
    site_name   = "My Website"
    title       = [controller_name, action_name].join(" ")
    description = "This is a sample website for demonstrating meta-tags in Rails"
    image       = options[:image] || "default_image_url"
    current_url = request.url

    defaults = {
      site:        site_name,
      title:       title,
      description: description,
      keywords:    %w[rails meta-tags seo],
      canonical:   current_url,
      og: {
        site_name: site_name,
        title:     title,
        description: description,
        url: current_url,
        image: image
      }
    }

    options.reverse_merge!(defaults)

    set_meta_tags options
  end
end

ビューでメタタグを表示

メタタグをビューに表示するには、application.html.erbレイアウトファイルに以下のコードを追加します。

app/views/layouts/application.html.erb

<!DOCTYPE html>
<html>
<head>
  <title><%= meta_title %></title>
  <%= display_meta_tags %>
</head>
<body>
  <%= yield %>
</body>
</html>

動的コンテンツのメタタグ設定

モデルの情報に基づいてメタタグを動的に設定する場合、各コントローラーアクション内で個別に設定します。以下に、動的コンテンツの例を示します。

app/controllers/products_controller.rb

class ProductsController < ApplicationController
  def show
    @product = Product.find(params[:id])
    set_meta_tags title: @product.name,
                  description: @product.description,
                  keywords: @product.keywords,
                  og: {
                    title: @product.name,
                    description: @product.description,
                    type: 'product',
                    url: product_url(@product),
                    image: @product.image_url
                  }
  end
end