MetaTags Optimization SEO 2022

Everybody is seeking for optimizing their Blog or WordPress HTML, so today we will some tricks to optimize your SEO.

SEO

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 the controller

You can define the 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 methods below.

Using MetaTags in view

To set meta tags you can use the 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 the method returns the 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 index meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings
`:index`	add index meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings
`:nofollow`	add nofollow meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings
`:follow`	add follow meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings
`:noarchive`	add noarchive meta tag; when true, 'robots' will be used; accepts a string with a robot name, or an array of strings
`:canonical`	add a canonical link tag
`:prev`	add a 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 a string of comma-separated values, or as an array:

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

The description is a string (HTML will be stripped from the 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 graphs 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 the 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 the layout file will not be rendered, so the 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 the method, which returns a fully resolved page title (including site, prefix/suffix, etc.) But in this case, you will have to set default parameters (e.g, :site) both in the 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:

<%= display_meta_tags(default_meta_tags) %>

And in your pjax templates:

<!-- 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 %>

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 look at the title bar to determine what the page is all about.

set_meta_tags title: 'Member Login'
# <title>Member Login</title>
set_meta_tags site: 'Site Title', title: 'Member Login'
# <title>Site Title | Member Login</title>
set_meta_tags site: 'Site Title', title: 'Member Login', reverse: true
# <title>Member Login | Site Title</title>

Recommended title tag length: up to 70 characters, 10 words.

Further reading:

Title Tag

Description

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

set_meta_tags description: "All text about keywords, other keywords"
# <meta name="description" content="All text about keywords, other keywords">

Recommended description tag length: up to 300 characters.

Further reading:

Keywords

Meta keywords tags are used to place the 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 SERPs

set_meta_tags keywords: %w[keyword1 Keyword2 KeyWord3]
# <meta name="keywords" content="keyword1, keyword2, keyword3">

Recommended keywords tag length: up to 255 characters, 20 words.

Please note, that both Google and Bing publicly indicated that keywords meta tags is completely ignored.

Noindex

By using the noindex meta tag, you can signal to search engines to not include specific pages in their indexes.

set_meta_tags noindex: true
# <meta name="robots" content="noindex">
set_meta_tags noindex: 'googlebot'
# <meta name="googlebot" content="noindex">

This is useful for pages like login, password reset, privacy policy, etc.

Further reading:

Index

Although it is not required to add 'index' to 'robots' as it is the default value for Google, some SEO specialists recommend adding it to the website

set_meta_tags index: true
# <meta name="robots" content="index">

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.

set_meta_tags nofollow: true
# <meta name="robots" content="nofollow">
set_meta_tags nofollow: 'googlebot'
# <meta name="googlebot" content="nofollow">

Further reading:

Follow

Follow will work with Noindex meta tag

set_meta_tags noindex: true, follow: true
# <meta name="robots" content="noindex, follow">

It will not look at this page but will crawl through the rest of the pages on your website.

Canonical URL

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

set_meta_tags canonical: "http://yoursite.com/canonical/url"
# <link rel="canonical" href="http://yoursite.com/canonical/url">

Further reading:

Icon

A favicon (short for Favorite icon), also known as a shortcut icon, Web site icon, tab icon or bookmark icon, is a file containing one or more small icons, most commonly 16×16 pixels, associated with a particular website or web page.

set_meta_tags icon: '/favicon.ico'
# <link rel="icon" href="/favicon.ico" type="image/x-icon">
set_meta_tags icon: '/favicon.png', type: 'image/png'
# <link rel="icon" href="/favicon.png" type="image/png">
set_meta_tags icon: [
  { href: '/images/icons/icon_96.png', sizes: '32x32 96x96', type: 'image/png' },
  { href: '/images/icons/icon_itouch_precomp_32.png', rel: 'apple-touch-icon-precomposed', sizes: '32x32', type: 'image/png' },
]
# <link rel="icon" href="/images/icons/icon_96.png" type="image/png" sizes="32x32 96x96">
# <link rel="apple-touch-icon-precomposed" href="/images/icons/icon_itouch_precomp_32.png" type="image/png" sizes="32x32">

Further reading:

Multi-regional and multilingual URLs, RSS and mobile links

Alternate link elements tell a search engine when there is content that's translated or targeted to users in a certain region.

set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url" }
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">

set_meta_tags alternate: { "fr" => "http://yoursite.fr/alternate/url",
                           "de" => "http://yoursite.de/alternate/url" }
# <link rel="alternate" href="http://yoursite.fr/alternate/url" hreflang="fr">
# <link rel="alternate" href="http://yoursite.de/alternate/url" hreflang="de">

If you need more than just multi-lingual links, you can use an alternative syntax:

set_meta_tags alternate: [
    { href: 'http://example.fr/base/url', hreflang: 'fr' },
    { href: 'http://example.com/feed.rss', type: 'application/rss+xml', title: 'RSS' },
    { href: 'http://m.example.com/page-1', media: 'only screen and (max-width: 640px)'},
  ]

Further reading:

Pagination links

Previous and next links indicate the relationship between individual URLs. Using these attributes is a strong hint to Google that you want us to treat these pages as a logical sequence.

set_meta_tags prev: "http://yoursite.com/url?page=1"
# <link rel="prev" href="http://yoursite.com/url?page=1">
set_meta_tags next: "http://yoursite.com/url?page=3"
# <link rel="next" href="http://yoursite.com/url?page=3">

Further reading:

image_src links

Basically, when you submit/share this to Facebook, this helps Facebook determine which image to put next to the link. If this is not present, Facebook tries to put in the first image it finds on the page, which may not be the best one to represent your site.

set_meta_tags image_src: "http://yoursite.com/icons/icon_32.png"
# <link rel="image_src" href="http://yoursite.com/icons/icon_32.png">

amp HTML links

AMP is a way to build web pages for static content that render fast. If you have two versions of the page – non-AMP and AMP, you can link the AMP version to the normal one using amphtml tag:

set_meta_tags amphtml: url_for(format: :amp, only_path: false)
# <link rel="amphtml" href="https://www.example.com/document.amp">

To link back to the normal version, use canonical.

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. Setting the refresh time interval to zero (or a very low value), allows meta refresh to be used as a method of URL redirection.

set_meta_tags refresh: 5
# <meta content="5" http-equiv="refresh">
set_meta_tags refresh: '5;url=http://example.com'
# <meta content="5;url=http://example.com" http-equiv="refresh">

Further reading:

Open Search

Open the Search link element to describe a search engine in a standard and accessible format.

set_meta_tags open_search: {
  title: "Open Search",
  href:  "/opensearch.xml"
}
# <link href="/opensearch.xml" rel="search" title="Open Search" type="application/opensearchdescription+xml">

Further reading:

OpenSearch specs
OpenSearch wiki

Hashes

Any namespace can be built just bypassing any symbol name and a Hash. For example:

set_meta_tags foo: {
  bar: "lorem",
  baz: {
    qux: "ipsum"
  }
}
# <meta property="foo:bar" content="lorem">
# <meta property="foo:baz:qux" content="ipsum">

Arrays

Repeated meta tags can be built just using an Array inside a Hash. For example:

set_meta_tags og: {
    image: ["http://example.com/rock.jpg", "http://example.com/rock2.jpg"]
}
# <meta property="og:image" content="http://example.com/rock.jpg">
# <meta property="og:image" content="http://example.com/rock2.jpg">

Open Graph

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

set_meta_tags og: {
  title:    'The Rock',
  type:     'video.movie',
  url:      'http://www.imdb.com/title/tt0117500/',
  image:    'http://ia.media-imdb.com/rock.jpg',
  video:    {
    director: 'http://www.imdb.com/name/nm0000881/',
    writer:   ['http://www.imdb.com/name/nm0918711/', 'http://www.imdb.com/name/nm0177018/']
  }
}
# <meta property="og:title" content="The Rock">
# <meta property="og:type" content="video.movie">
# <meta property="og:url" content="http://www.imdb.com/title/tt0117500/">
# <meta property="og:image" content="http://ia.media-imdb.com/rock.jpg">
# <meta property="og:video:director" content="http://www.imdb.com/name/nm0000881/">
# <meta property="og:video:writer" content="http://www.imdb.com/name/nm0918711/">
# <meta property="og:video:writer" content="http://www.imdb.com/name/nm0177018/">

Multiple images declared as an array (look at the _ character):

set_meta_tags og: {
  title:    'Two structured image properties',
  type:     'website',
  url:      'view-source:http://examples.opengraphprotocol.us/image-array.html',
  image:    [{
    _: 'http://examples.opengraphprotocol.us/media/images/75.png',
    width: 75,
    height: 75,
  },
  {
    _: 'http://examples.opengraphprotocol.us/media/images/50.png',
    width: 50,
    height: 50,
  }]
}
# <meta property="og:title" content="Two structured image properties">
# <meta property="og:type" content="website">
# <meta property="og:url" content="http://examples.opengraphprotocol.us/image-array.html">
# <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/75.png">
# <meta property="og:image:width" content="75">
# <meta property="og:image:height" content="75">
# <meta property="og:image" content="http://examples.opengraphprotocol.us/media/images/50.png">
# <meta property="og:image:width" content="50">
# <meta property="og:image:height" content="50">

Article meta tags are supported too:

set_meta_tags article: {
  published_time:    '2013-09-17T05:59:00+01:00',
  modified_time:     '2013-09-16T19:08:47+01:00',
  section:           'Article Section',
  tag:               'Article Tag',
}
# <meta property="article:published_time" content="2013-09-17T05:59:00+01:00">
# <meta property="article:modified_time" content="2013-09-16T19:08:47+01:00">
# <meta property="article:section" content="Article Section">
# <meta property="article:tag" content="Article Tag">

Further reading:

Twitter Cards

Twitter cards make it possible for you to attach media experiences to Tweets that link to your content. There are 3 card types (summary, photo and player). Here's an example for summary:

set_meta_tags twitter: {
  card: "summary",
  site: "@username"
}
# <meta name="twitter:card" content="summary">
# <meta name="twitter:site" content="@username">

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 Photocard, 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:

set_meta_tags twitter: {
  card:  "photo",
  image: {
    _:      "http://example.com/1.png",
    width:  100,
    height: 100,
  }
}
# <meta name="twitter:card" content="photo">
# <meta name="twitter:image" content="http://example.com/1.png">
# <meta name="twitter:image:width" content="100">
# <meta name="twitter:image:height" content="100">

Further reading:

Twitter Cards Documentation

App Links

App Links is an open cross-platform solution for deep linking to content in your mobile app. Here's an example of iOS app integration:

set_meta_tags al: {
  ios: {
    url: "example://applinks",
    app_store_id: 12345,
    app_name: "Example App"
  }
}
# <meta property="al:ios:url" content="example://applinks">
# <meta property="al:ios:app_store_id" content="12345">
# <meta property="al:ios:app_name" content="Example App">

Further reading:

App Links Documentation

Custom meta tags

Starting from version 1.3.1, you can specify arbitrary meta tags, and they will be rendered on the page, even if the meta-tags gem does not know about them.

Example:

set_meta_tags author: "Dmytro Shteflyuk"
# <meta name="author" content="Dmytro Shteflyuk">

You can also specify a value as an Array, and values will be displayed as a list of meta tags:

set_meta_tags author: [ "Dmytro Shteflyuk", "John Doe" ]
# <meta name="author" content="Dmytro Shteflyuk">
# <meta name="author" content="John Doe">

Maintainers

Dmytro Shteflyuk, https://kpumuk.info

MetaTags Optimization SEO 2022

MetaTags Usage

Using MetaTags in the controller

Using MetaTags in view

Allowed options for display_meta_tags and set_meta_tags methods

Allowed values

Mirrored values

Using with Turbolinks

Using with pjax

SEO Basics and MetaTags

Titles

Description

Keywords

Noindex

Index

Nofollow

Follow

Canonical URL

Icon

Multi-regional and multilingual URLs, RSS and mobile links

Pagination links

image_src links

amp HTML links

Refresh interval and redirect URL

Open Search

Hashes

Arrays

Open Graph

Twitter Cards

App Links

Custom meta tags

Maintainers

Post a Comment

Allowed options for `display_meta_tags` and `set_meta_tags` methods