Social meta tags with Jekyll

This is how I added social meta tags to this Jekyll blog to optimize sharing on Facebook, Twitter and Google+.

The tags should differ somewhat for pages and posts on the blog. To be able to distinguish between posts vs pages I updated _config.yml with:

Then I can check for posts with {% if page.is_post %}

Sharing on social media improves with images. I added support for specifying an image in the front matter for a page/post:

I place the images for a page/post in a folder that correspond with the permalink, i.e. \post\social-meta-tags-with-jekyll\meta.png

Facebook

Facebook uses the Open Graph protocol and it looks like this:

The Jekyll include file to generate that:

It will end up like this:

Test your markup with:

Twitter uses Twitter Cards and it looks like this:

The Jekyll include file to generate that:

It will end up like this:

Test your markup with:

Google+ uses structured data and it can look like this:

I prefer to use JSON-LD over RDFa and Microdata, because it does not force you change any existing markup.