DEV Community

loading...

Make your Rails application SEO friendly by setting meta tags

junko911 profile image Junko T. ・2 min read

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.

Discussion (1)

pic
Editor guide
Collapse
megaversity profile image
mega versity college

your detail is more update. you can check also seo