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.
Edward Schults
5min read
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.
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:
how to simply setup default meta tags for any of your website's pages,
how to override them in some pages to be more specific and impactful.
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 your rails 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 override DEFAULT_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 url needed 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:
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:
Important : Facebook's Open Graph recommends 1200x630 dimensions for meta images and a maximum file size of 1Mb. 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!
Sign up to our newsletter
Hear about our free workshops and talks
Get exclusive news about our upcoming courses
Be the first to know when registration for our courses opens