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

Ruby on Rails

MetaTags master branch now fully supports Rails 3.0+ and is not backward
compatible. Latest version fully compatible with 2.x is 1.2.3.

Installation

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

gem'meta-tags'

And run bundle install command.

SEO Basics and MetaTags

Titles

Page titles are very important for Search engines. The titles in the
browser are displayed in the title bar. The search engines would look at
the this title bar to determine what the page is all about.

Description

Description tags are called meta tags as they are not displayed by the
browsers as that of titles. But these descriptions may be displayed by
some search engines. They are used to describe the contents of a page in
2 or 3 sentences.

Keywords

Meta keywords tag are used to place your keywords that you think a
surfer would search in Search engines. Repeating keywords unnecessarily
would be considered spam and you may get permanently banned from SERP's

Nofollow

Nofollow meta tag tells a search engine not to follow the links on a specific
page. It's entirely likely that a robot might find the same links on some
other page without a nofollow (perhaps on some other site), and so
still arrives at your undesired page.

Canonical URL

Canonical link element tells a search engine what is the canonical or main URL
for a content which have multiple URLs. The search engine will always return
that URL, and link popularity and authority will be applied to that URL.

Refresh interval and redirect URL

Meta refresh is a method of instructing a web browser to automatically
refresh the current web page or frame after a given time interval. It is also
possible to instruct the browser to fetch a different URL when the page is
refreshed, by including the alternative URL in the content parameter. By
setting the refresh time interval to zero (or a very low value), this allows
meta refresh to be used as a method of URL redirection.

Open Graph

To turn your web pages into graph objects, you'll need to add Open Graph
protocol <meta> tags to your webpages. The tags allow you to specify
structured information about your web pages. The more information you provide, the more opportunities your web pages can be surfaced within Facebook today
and in the future. Here's an example for a movie page:

Take in consideration that if you're already using OpenGraph to describe data on your page, it’s easy to generate a Twitter card without duplicating your tags and data. When the Twitter card processor looks for tags on your page, it first checks for the Twitter property, and if not present, falls back to the supported Open Graph property. This allows for both to be defined on the page independently, and minimizes the amount of duplicate markup required to describe your content and experience.

When you need to generate a Twitter Photo card, twitter:image property is a string, while image dimensions are specified using twitter:image:width and twitter:image:height, or a Hash objects in terms of MetaTags gems. There is a special syntax to make this work:

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}

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>

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:

<!-- set title here, so we can use it both in "display_title" and in "title" %>
<% title "My Page title" %>
<%= content_tag :div, :data => { :title => display_title(default_meta_tags) } do %>
<h1><%= title %></h1>
<!-- HTML goes here -->
<% end %>