DEV Community

Junko T.
Junko T.

Posted on

Make your Rails application SEO friendly by setting meta tags

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.


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.


# app/helpers/application_helper.rb

module ApplicationHelper
  def default_meta_tags
      site: '',
      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: '',
        title: 'MyMovies',
        description: 'The most popular movie website in the world', 
        type: 'website',
        url: request.original_url,
        image: image_url('login-page.png')
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

  <%= display_meta_tags(default_meta_tags) %>
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.

Discussion (2)

alec profile image
Alexey Poimtsev (sith/lord)
  • friendly_id and sitemap_generator gems
megaversity profile image
mega versity college

your detail is more update. you can check also seo