Revisiting Jekyll Social Media Tags

So after a long hiatus I decided to update this site and post a few new tutorials around what I’d been learning lately. However, when I went to rebuild the site with the latest Jekyll packages the site would not build. Turns out that something in Jekyll v3.3.0 and the jekyll-auto-image v1.1.2 don’t play nice together and the build process crashes. Bummer!

Removing jekyll-auto-image

If you’ve seen my previous tutorial the steps to remove the auto-image plugin are very simple: just remove the gem from your Gemfile and your _config.yml to have Jekyll forget all about it. Now, instead of having Jekyll pick up your image automatically you’ll have to set it in the front matter manually.

---
layout: post
title: A Blog Title
image: /path/to/your/image.jpg
date: 2016-10-31
---

Setting a Default Social Media Image

Another thing I noticed when removing auto-image was that my default social media images was no longer getting picked up for the page. Luckily for Open Graph and Twitter Cards this is easy to fix. Open up the Twitter and Open Graph and change the following lines:

Twitter

From this:

{% if page.image %}
    <meta name="twitter:image:src" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}

To this:

{% if page.image %}
    <meta name="twitter:image:src" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% else %}
    <meta name="twitter:image:src" content="{{ site.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}

Facebook

And for Facebook and other Open Graph users like LinkedIn, from this:

{% if page.image %}
    <meta property="og:image" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}

To this:

{% if page.image %}
    <meta property="og:image" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% else %}
    <meta property="og:image" content="{{ site.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}

Open Graph Site Name

Another little thing I noticed when I was working through the various social tags was the lack of a site name in the Open Graph data. Conveniently, this is an easy thing to fix. Back in the Facebook include, add this little block of text and the site name will get pulled from the site title you set in _config.yml.

{% if site.title %}
    <meta property="og:site_name" content="{{ site.title }}">
{% endif %}

That should be all you need to get another Open Graph property set correctly on your site and remove a plugin that is misbehaving with newer version of Jekyll.