Webアプリケーションでは、タイトルやキーワードといったmetaタグを設定することになると思います。 それ以外にも、最近だとFacebookのOGPのように、設定すべきmetaタグも増えており、メンテナブルな実装が求められます。 ここでは、その要件やmeta-tagsによる実装について説明します。

要件

ここでは、以下を行なえることを要件とします。

  • 以下の項目を設定できること：
    • title/keywords/description
    • FacebookのOGP
    • Twitterカード
  • 基本的な項目をI18nで設定できること
  • ページごとに上書きできること

手順

以下の手順でタイトルやmetaタグを設定していきます。

1. インストールする

まずGemfileに以下を追記し、bundle installします。

gem 'meta-tags'

2. コントローラで基本情報を設定する

次に、すべてのページに対する基本的な情報をApplicationControllerに設定します。 記述量が多いため、Concernとして分離した方がよいでしょう。

たとえば、以下のようにします。

app/controllers/concern/meta_taggable.rb:

module MetaTaggable
  extend ActiveSupport::Concern

  include ActionView::Helpers::AssetUrlHelper

  included do
    before_action :prepare_meta_tags
  end

  private

  def prepare_meta_tags(options = {})
    base = t('meta_tags.base')

    site = base[:site]
    description = base[:description]
    title = t("meta_tags.titles.#{controller_name}.#{action_name}", default: '')
    image = image_url('image.png')

    defaults = {
      site: site,
      title: title,
      description: description,
      keywords: base[:keywords],
      og: {
        url: request.url,
        title: title,
        description: description,
        site_name: site,
        type: 'article',
        image: image
      },
      twitter: {
        card: 'summary',
        site: '@simpliejp',
        title: title.presence || site,
        description: description,
        image: image
      }
    }

    options.reverse_merge!(defaults)

    set_meta_tags(options)
  end
end

app/controllers/application_controller.rb:

class ApplicationController < ActionController::Base
  include MetaTaggable
end

3. ビューでタグを出力する

タグを出力するための記述をビューに行ないます。 display_meta_tagsを1行書くだけで、必要なタグをすべて出力してくれます。

app/views/layouts/application.html.erb:

<!DOCTYPE html>
<html>
  <head>
    <%= display_meta_tags reverse: true %>
      :

4. 情報を設定する

サイト名や説明文といった基本的な情報は、以下のように設定します。 こうすることで、多言語化も簡単に対応することができます。

config/locales/meta_tags.ja.yml:

ja:
  meta_tags:
    base:
      site: SimpliePost
      description: 小さなチームでサービスをつくるリモートワークのエンジニアのためのメディア
      keywords:
        - サービス
        - リモートワーク
        - エンジニア
    titles:
      posts:
        index: 記事一覧

5. ページごとに上書きする

最後に、ページごとにmetaタグの内容を上書きする方法についてです。

たとえば記事個別ページにおいて、記事のタイトルをページのタイトルとして設定するとします。 この場合、次のようになります。

class PostsController < ApplicationController
  def show
    @post = Post.find(params[:id])

    prepare_meta_tags(title: @post.title)
  end
end

おわりに

一度実装しておけば、ページが増えても簡単にタイトルやmetaタグを設定することができます。 長く運用するサービスの場合は、ぜひ対応しておきましょう。