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 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
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 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
To keep that file clean we are going to create another one called
social_tags.html with this content:
Now we have to include this file at the end of
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: