meta-tags

Created: 2008-09-17 01:41
Updated: 2019-02-26 16:48
License: mit

README.md

MetaTags: a gem to make your Rails application SEO-friendly

CircleCI Gem Version Code Climate Test Coverage Gem Downloads Changelog

Search Engine Optimization (SEO) plugin for Ruby on Rails applications.

Ruby on Rails

MetaTags master branch fully supports Ruby on Rails 4.2+, and is tested against all major Rails releases up to 6.0.beta2.

Ruby versions older than 2.2.0 are no longer officially supported.

Please note that we are no longer support Ruby versions older than 2.2.0 and Ruby on Rails older than 4.2, because they reached their End of Life.

Installation

Add the "meta-tags" gem to your Gemfile.

gem 'meta-tags'

And run bundle install command.

Configuration

MetaTags follows best-practices for meta tags. Although default limits for truncation have recommended values, you can change them to reflect your own preferences. Keywords are converted to lowercase by default, but this is also configurable.

To override the defaults, create an initializer config/initializers/meta_tags.rb using the following command:

rails generate meta_tags:install

By default meta tags are rendered with the key name. Since, some meta tags are required to use property instead (like Facebook Open Graph object), MetaTags gem allows to configure which tags to render with property attribute. By default the pre-configured list includes all possible Facebook Open Graph object types, but you can add your own in case you need it.

MetaTags Usage

First, add this code to your main layout:

<head>
  <%= display_meta_tags site: 'My website' %>
</head>

Then, to set the page title, add this to each of your views (see below for other options):

<h1><%= title 'My page title' %></h1>

When views are rendered, the page title will be included in the right spots:

<head>
  <title>My website | My page title</title>
</head>
<body>
  <h1>My page title</h1>
</body>

You can find allowed options for display_meta_tags method below.

Using MetaTags in controller

You can define following instance variables:

@page_title       = 'Member Login'
@page_description = 'Member login page.'
@page_keywords    = 'Site, Login, Members'

Also you could use set_meta_tags method to define all meta tags simultaneously:

set_meta_tags title: 'Member Login',
              description: 'Member login page.',
              keywords: 'Site, Login, Members'

You can find allowed options for set_meta_tags method below.

Using MetaTags in view

To set meta tags you can use following methods:

<% title 'Member Login' %>
<% description 'Member login page.' %>
<% keywords 'Site, Login, Members' %>
<% nofollow %>
<% noindex %>
<% refresh 3 %>

Also there is set_meta_tags method exists:

<% set_meta_tags title: 'Member Login',
                 description: 'Member login page.',
                 keywords: 'Site, Login, Members' %>

You can pass an object that implements #to_meta_tags method and returns a Hash:

class Document < ApplicationRecord
  def to_meta_tags
    {
      title: title,
      description: summary,
    }
  end
end

@document = Document.first
set_meta_tags @document

The title method returns title itself, so you can use it to show the title somewhere on the page:

<h1><%= title 'Member Login' %></h1>

If you want to set the title and display another text, use this:

<h1><%= title 'Member Login', 'Here you can login to the site:' %></h1>

Allowed options for display_meta_tags and set_meta_tags methods

Use these options to customize the title format:

Option Description
:site site title
:title page title
:description page description
:keywords page keywords
:charset page character set
:prefix text between site name and separator
:separator text used to separate website name from page title
:suffix text between separator and page title
:lowercase when true, the page name will be lowercase
:reverse when true, the page and site names will be reversed
:noindex add noindex meta tag; when true, 'robots' will be used, otherwise the string will be used
:index add index meta tag; when true, 'robots' will be used, otherwise the string will be used
:nofollow add nofollow meta tag; when true, 'robots' will be used, otherwise the string will be used
:follow add follow meta tag; when true, 'robots' will be used, otherwise the string will be used
:noarchive add noarchive meta tag; when true, 'robots' will be used, otherwise the string will be used
:canonical add canonical link tag
:prev add prev link tag
:next add next link tag
:image_src add image_src link tag
:og add Open Graph tags (Hash)
:twitter add Twitter tags (Hash)
:refresh refresh interval and optionally url to redirect to

And here are a few examples to give you ideas.

<%= display_meta_tags separator: "&mdash;".html_safe %>
<%= display_meta_tags prefix: false, separator: ":" %>
<%= display_meta_tags lowercase: true %>
<%= display_meta_tags reverse: true, prefix: false %>
<%= display_meta_tags og: { title: 'The Rock', type: 'video.movie' } %>
<%= display_meta_tags alternate: { 'zh-Hant' => 'http://example.com.tw/base/url' } %>

Allowed values

You can specify :title as a string or array:

set_meta_tags title: ['part1', 'part2'], site: 'site'
# site | part1 | part2
set_meta_tags title: ['part1', 'part2'], reverse: true, site: 'site'
# part2 | part1 | site

Keywords can be passed as string of comma-separated values, or as an array:

set_meta_tags keywords: ['tag1', 'tag2']
# tag1, tag2

Description is a string (HTML will be stripped from output string).

Mirrored values

Sometimes, it is desirable to mirror meta tag values down into namespaces. A common use case is when you want open graph's og:title to be identical to the title.

Say, you have the following in your application layout:

display_meta_tags og: {
  title: :title,
  site_name: :site,
}

The value of og[:title] is a symbol and therefore references the value of the top level title meta tag. With the following in any view:

title 'my great view'

You get this open graph meta tag for free:

<meta property="og:title" content="my great view"></meta>

Please note, that title does not include site. If you need to reference the exact value rendered in the <title> meta tag, use :full_title.

Using with Turbolinks

Turbolinks is a simple solution for getting the performance benefits of a single-page application without the added complexity of a client-side JavaScript framework. MetaTags supports Turbolinks out of the box, no configuration is necessary.

Using with pjax

jQuery.pjax is a nice solution for navigation without full page reload. The main difference is that layout file will not be rendered, so page title will not change. To fix this, when using a page fragment, pjax will check the fragment DOM element for a title or data-title attribute and use any value it finds.

MetaTags simplifies this with display_title method, which returns fully resolved page title (include site, prefix/suffix, etc.) But in this case you will have to set default parameters (e.g, :site) both in layout file and in your views. To minimize code duplication, you can define a helper in application_helper.rb:

def default_meta_tags
  {
    title:       'Member Login',
    description: 'Member login page.',
    keywords:    'Site, Login, Members',
    separator:   "&mdash;".html_safe,
  }
end

Then in your layout file use: