Choose a city

Social Meta Tags Setup in Rails

Sharing your product on social networks has become one privileged way to grow your userbase. But before you unleash your sharing fury, make sure your social meta tags are properly set.

Social Meta Tags Setup in Rails
Share article
Sharing your product on social networks has become one privileged way to grow your userbase. But before you unleash your sharing fury, make sure your social meta tagsare properly set.

WTF are meta tags?


<meta> tags are HTML tags in the <head> of a webpage, visible to anyone.
They provide the content displayed on social networks whenever your product's url is shared in a post. Titles, descriptions and images should all be setup with care and consideration to improve your social exposure's conversion rate. The right content, including optimized images have shown to help posts to spread, even leading to increased shares and mentions, improving natural SEO.


Setup in a Rails app


In this tutorial, we'll see:


Default Meta Tags


Let's create a meta.yml file in config, with the following:

# config/meta.yml

meta_product_name: "Product Name"
meta_title: "Product name - Product tagline"
meta_description: "Relevant description"
meta_image: "cover.png" # should exist in `app/assets/images/`
twitter_account: "@product_twitter_account"   # required for Twitter Cards

Let's create a default_meta.rb file in config/initializers in which we load the content as a Hash in a DEFAULT_META Ruby constant.

# config/initializers/default_meta.rb

# Initialize default meta tags.
DEFAULT_META = YAML.load_file(Rails.root.join("config/meta.yml"))

Important: as any file in the config/initializers folder, it is loaded when your app is launched. Any time you change the content in meta.yml, restart yourrails s to refresh DEFAULT_META!


Helpers setup


Now before setting up our meta tags in our views, let's setup helpers that will encapsulate the following logic for our 3 keys :meta_title, :meta_description and :meta_image:

In any view, if a content_for(:meta_key) was defined, it should overrideDEFAULT_META's value.

Let's create a new app/helpers/meta_tags_helper.rb file with the following:

# app/helpers/meta_tags_helper.rb

module MetaTagsHelper
  def meta_title
    content_for?(:meta_title) ? content_for(:meta_title) : DEFAULT_META["meta_title"]
  end

  def meta_description
    content_for?(:meta_description) ? content_for(:meta_description) : DEFAULT_META["meta_description"]
  end

  def meta_image
    meta_image = (content_for?(:meta_image) ? content_for(:meta_image) : DEFAULT_META["meta_image"])
    # little twist to make it work equally with an asset or a url
    meta_image.starts_with?("http") ? meta_image : image_url(meta_image)
  end
end


Important: production host setup for images absolute urls


Rails image_url helper requires you setup your host to generate the absolute urlneeded to load your images from the external world (Facebook, Twitter, ...).

Let's override Rails.application.default_url_options[:host] by adding the following in app/controllers/application_controller.rb:

# app/controllers/application_controller.rb

def default_url_options
  { host: ENV["DOMAIN"] || "localhost:3000" }
end
Make sure your production DOMAIN variable is set with your domain name. If you deploy your code with Heroku for instance, just type in your terminal:

heroku config:set DOMAIN=www.my_product.com

You can check it's properly set with heroku config:get DOMAIN.


HTML setup - Layout


Finally, open your layout app/views/layouts/application.html.erb and copy paste the following meta tags in your layout's <head>:

<title><%= meta_title %></title>
<meta name="description" content="<%= meta_description %>">

<!-- Facebook Open Graph data -->
<meta property="og:title" content="<%= meta_title %>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<%= request.original_url %>" />
<meta property="og:image" content="<%= meta_image %>" />
<meta property="og:description" content="<%= meta_description %>" />
<meta property="og:site_name" content="<%= meta_title %>" />

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="<%= DEFAULT_META["twitter_account"] %>">
<meta name="twitter:title" content="<%= meta_title %>">
<meta name="twitter:description" content="<%= meta_description %>">
<meta name="twitter:creator" content="<%= DEFAULT_META["twitter_account"] %>">
<meta name="twitter:image:src" content="<%= meta_image %>">


HTML setup - Views


Now let's assume you have an Offer model and you want dynamic titles and descriptions for any products#show page. Just set the relevant content_fors in app/views/offers/show.html.erb:

<!-- app/views/offers/show.html.erb -->
<% content_for :meta_title, "#{@offer.name} is on #{DEFAULT_META["meta_product_name"]}" %>
<% content_for :meta_description, @offer.description %>
<% content_for :meta_image, cl_image_path(@offer.photo.path) %>


Testing


It's time to deploy your code and test your setup.

Social Networks provide debugging tools to help you check your tags are properly set.

Important : Facebook's Open Graph recommends 1200x630 dimensions for meta images. Read the documentation if you cannot manage to clear out all their warnings!


That's all folks


This sets a framework to easily manage your meta tags in every single page of your website. It's now up to you to keep on setting relevant titles, descriptions and images every time you code a new view!

Want to know more about Le Wagon's 9-week bootcamp?
Download Syllabus
Keep reading
Graduate stories

Upskilling to become a Product Manager

Claire undertook her professional career in the financial industry in Europe before settling down in Montréal. After working in a startup, she decided to follow Le Wagon FullStack program. Now, she is a Product Manager for a mobile application for Montreal transport.

Graduate stories

From working in an e-learning startup to a FullStack developer at an AI company.

Meet Mia, originally from Northern California and alumni from batch #244 (April - June 2019) in Berlin. She studied Political Ecology at UC Berkeley before backpacking around the world and then working in Education Technology. After searching for a way to combine creativity, analysis, and a passion for building, she decided to join Le Wagon so she could turn her ideas into reality. Recently, she started working as a FullStack developer at Blackout Technologies.

Graduate stories

Craving problem solving, how I found job satisfaction via Le Wagon

After working at an accounting firm as a CPA for 7 years, I gradually realised that I needed a career change that gives more challenges and satisfaction. The number one thing that I enjoyed most in my previous career was problem solving and I wanted more of that, so I joined Le Wagon!

Interested in joining the #1 ranked coding bootcamp?

We are in 39 cities worldwide.