Social tags on steroids

2018/10/07

Social tags

I started this blog last week and after sharing my first post on Twitter and Linkedin I realized that my social media link was not cool enough. It had neither an image nor a description, it was really poor so I decided to investigate how to make it better.

There are two main standards about social tags: Open Graph and Twitter Cards.

Open Graph

Open Graph is the standard protocol developed by Facebook that enables any web page to become a rich object in a social graph. This is done by adding basic metadata to your page placed with <meta> in the <head> tag.

This protocol requires at least these four properties for every page:

  • og:title -> Title of your object
  • og:type -> Type of your object. We will set it to website.
  • og:image -> Image that represent your object.
  • og:url -> URL of you object. This will be the permanent ID for the object.

Twitter Cards

Twitter Cards meta tags are required to include images, videos, audio or downloads links in Twitter. They are most like Open Graph but a bit more specific to Twitter social network. We will use Summary card type for rendering title, description and thumbnail.

This protocol requires the following properties:

  • twitter:card -> Type for the card. We will set it to summary.
  • twitter:site -> Twitter user alias.
  • twitter:title -> Page title.
  • twitter:url -> Page URL.
  • twitter:description -> Page description.
  • twitter:image -> Page image.

How to implement it with Jekyll?

This blog already has a file where is defined <head> tag content. There we import CSS files and other stuff. We want to reuse that file to insert social meta tags. This file is in _includes/head.html.

To keep that file clean we are going to create another one called social_tags.html with this content:

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@{ site.twitter_username }">
<meta name="twitter:title" content="{ page.title | default: site.title}">
<meta name="twitter:url" content="{ site.url }{ page.url }">
<meta name="twitter:description" content="{ page.description | default: site.description}">

<meta property="og:title" content="{ page.title | default: site.title}">
<meta property="og:url" content="{ site.url }{ page.url }">
<meta property="og:description"  content="{ page.description | default: site.description }">
<meta name="twitter:image:src" content="{ site.url }{ page.image }">
<meta property="og:image" content="{ site.url }{ page.image }" />
<meta property="og:type" content="website"/>

Now we have to include this file at the end of _includes/head.html.

Please check those files here head.html and social_tags.html.

Validate

There are some tools to check if our new meta tags are working properly. Twitter has its own validator where we can see a preview of our blog post in a Tweet.

Facebook also has a [debugger] tool for url sharing. It shows your filled object graph and the ones which are missing.

Another cool web to check Open Graph and Twitter Card meta tags is iframely.

After adding social meta tags First commit post will be shown like this:

First commit Twitter Cards

Post Directory