DEV Community

Junko T.
Junko T.

Posted on

Make your Rails application SEO friendly by setting meta tags

SEO
Designed by roserodionova / Freepik

SEO and meta tags

Search engine optimization (SEO) is the practice of increasing the quality and quantity of traffic to a website from search engines. Sharing your website on social media has become crucial to improve the SEO of your websites.

Meta tags are a type of HTML tag that provide search engines with information about a webpage (metadata). It is not displayed on the page itself. Search engines use this metadata to understand additional information about the webpage for crawling and indexing.

Open Graph protocol

Open Graph is a protocol that allows developers to control the previews of their websites on social media when they are shared. It has been very common to see rich previews of websites with appealing images and catchy descriptions on social media these days.

Implementation

Install meta-tags gem

Add the meta-tags gem to your Gemfile:

gem 'meta-tags'
Enter fullscreen mode Exit fullscreen mode

And run bundle install command.

Congfiguration

# app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
    {
      site: 'MyMovies.dev',
      title: 'MyMovies',
      reverse: true,
      separator: '|',
      description: 'The most popular movie website in the world',
      keywords: 'action, horror, drama',
      canonical: request.original_url,
      noindex: !Rails.env.production?,
      icon: [
        { href: image_url('favicon.ico') },
        { href: image_url('icon.jpg'), rel: 'apple-touch-icon', sizes: '180x180', type: 'image/jpg' },
      ],
      og: {
        site_name: 'MyMovies.dev',
        title: 'MyMovies',
        description: 'The most popular movie website in the world', 
        type: 'website',
        url: request.original_url,
        image: image_url('login-page.png')
      }
    }
  end
end
Enter fullscreen mode Exit fullscreen mode

The image file should be placed in app/assets/images. The standard size of the Open Graph image is 1200×627px.

Add meta tags to views

Add this to the main layout to set meta tags:

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

<head>
  <%= display_meta_tags(default_meta_tags) %>
</head>
Enter fullscreen mode Exit fullscreen mode

This will display the default meta tags we configured in app/helpers/application-helper.rb. This is necessary especially when you don't set meta tags for each page of your website.

Now, let's set meta tags for individual pages. In the beginning of the html.erb file:

<% set_meta_tags title: 'Contact page', description: 'Contact us from...' %>
Enter fullscreen mode Exit fullscreen mode

You don't need to place it inside the <head> tag if you have the <head> tag shared in app/views/layouts/application.html.erb.


This is it! If you want to check how the meta tags are set, go to your website and view page source.

Top comments (4)

Collapse
 
crawlfeeds profile image
Crawl Feeds

We can also set dynamic values from controller method.

set_meta_tags(
title: "Web scraping and data mining",
description: "Large-scale website datasets from the crawl feeds web data data platform. Datasets include business datasets, real estate datasets, eCommerce datasets, and more.",
keywords: "
Ready to use datasets, free datasets, public datasets, ecommerce datasets, real-estate datasets, news datasets, retail datasets
",
og: {
title: "Web scraping and data mining",
description: "Large-scale website datasets from the crawl feeds web data data platform. Datasets include business datasets, real estate datasets, eCommerce datasets, and more.",
keywords: "
Ready to use datasets, free datasets, public datasets, ecommerce datasets, real-estate datasets, news datasets, retail datasets
"
}
)

Collapse
 
spaquet profile image
Stephane Paquet

Great article. I'm testing it on my URL shortener service WAT.EE Will keep you posted of my progresses

Collapse
 
louis2again profile image
Louis

thanks, great article, how do you set the OG tags?

Collapse
 
megaversity profile image
mega versity college

your detail is more update. you can check also seo