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'
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
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>
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...' %>
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)
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
"
}
)
thanks, great article, how do you set the OG tags?
Great article. I'm testing it on my URL shortener service WAT.EE Will keep you posted of my progresses
your detail is more update. you can check also seo