There is no doubt that social media meta tags embedded into a web page help with engagement when the page is shared on sites like Twitter (now renamed "X") or Facebook.

When links are shared on those platforms a robot goes back to the linked page and searches inside of it for meta information: things like "page title", "cover image", "embedded media", and more.

If found, these snippets get formatted into a visually pleasant box with important information like page title, cover image, etc. This box is then placed inside the post instead of the original boring, plain text link.

It is the responsibility of the site owner to provide the appropriate meta information inside meta tags included in the html pages. This information needs to follow a specific format, or protocol, set up by the social media platforms.

There are two main types of social media meta tags:

  1. Open Graph tags
  2. Twitter Card tags

Open Graph

The Open Graph protocol was promoted by Facebook and provides guidelines on how to create meta tags that give context to information, images, videos, and so on, that a social media site can interpret and display appropriately.

Open Graph is not only used by Facebook, but also by Linkedin and Twitter.

Below is an example of a Facebook post enhanced by Open Graph meta tags embedded in the linked web page.

Facebook Open Graph example

Twitter Cards

In addition to Open Graph, Twitter also uses a separate protocol that they have developed called Twitter Cards.

Twitter Cards let you attach photos, videos, and media to Tweets, which help drive traffic to the website. Here's an example of how a tweet can embed media via Twitter Cards:

Twitter Card example

Social media meta tags are added to the <head> section of the web page and look like these:

<head>
  <meta property="og:title" content="Adding Open Graph">
  <meta property="og:type" content="article">
  <meta property="og:description" content="Post description">
  <meta property="og:site_name" content="Ferrari Web Development">
  <meta property="og:url" content="http://example.com/blog/opengraph">
  <meta property="og:image" content="http://example.com/assets/267350.jpg">

  <meta name="twitter:title" content="Adding Twitter Cards">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:description" content="Post description">
  <meta name="twitter:site" content="@cesareferrari">
  <meta name="twitter:image" content="http://example.com/assets/267350.jpg">
</head>

When developing a web site, I use a Ruby library called meta-tags to handle generating and embedding all meta tags into a Rails application, including Open Graph and Twitter tags.

The meta-tags gem

The meta-tags Ruby gem helps make a Rails application more SEO friendly.

It makes it easy to handle the process of defining and generating the meta tags that need to be included into the application's layout template.

There are two main steps in using this gem:

  1. set needed meta tags with the set_meta_tag method
  2. display meta tags in the application layout with display_meta_tags

Both of these methods are provided by the meta-tags library. Let's see in detail how to use it.

Install the gem with:

bundle add meta-tags

Add the display_meta_tags method call to the application layout inside the <head> element:

# app/views/layouts/application.html.erb

<head>

  <%= display_meta_tags site: "Ferrari Web Development" %>

</head>

This method takes a site: "..." parameter that we can set to a string with our site name. This string will appear in the page title.

Next, we can generate meta tags specific for each page in the page show template by calling the set_meta_tags method and passing the desired information.

Open Graph tags

Here's a list of Open Graph tags that can be included in the web page:

For other available tags, check out the Open Graph documentation.

Here's how to set these tags in the page view using set_meta_tags:

<% set_meta_tags og: {title: @post.title,
                      type: "article",
                      description: @post.blurb,
                      image: image_url(@post.cover),
                      url: request.original_url,
                      site_name: "Ferrari Web Development"} %>

Twitter Cards tags

Here's a list of Twitter Card tags that can be included in the web page:

For other available tags, consult the Twitter Cards documentation.

Here's how to set Twitter Card tags in the page view using set_meta_tags:

<% set_meta_tags twitter: {title: @post.title,
                            card: "summary_large_image",
                            description: @post.blurb,
                            site: "@cesareferrari",
                            image: image_url(@post.cover)} %>

Notes on URLs

Conclusion

This article describes how to set popular social media meta tags inside web pages.
Meta tags are used by different platforms to format posts in a way that's more appealing to their audience for the purpose of making posts more engaging and to promote clicks and shares.

The meta tags functionality is handled in a Rails application by a Ruby gem called meta-tags.
This library has several methods for easily setting and displaying meta tags inside the page layout.

Photo by Pixabay