Adding Social Metadata to Jekyll

- 4 minutes read - 745 words

Social metadata can be annoying to set up, but with a good template and a small Jekyll plugin you can have your pages social ready in minutes.

Installation

The first order of business is to install the jekyll-auto-image plugin to help us grab a post image for each of our pages. Open up your Gemfile and add the following:

gem 'jekyll-auto-image'

then run

$ bundle install

Finally, we add two lines to our _config.yml:

image: /path/to/your/default/image.jpg
gems:
    - jekyll-auto-image

This tells Jekyll to use the auto image plugin we just installed and where to find the default image for all pages and posts. This default image can be overridden by either an image value in a posts YAML front matter, or the first image defined in the posts contents. This lets us be sure that no matter what our content is, we’ll always have an appropriate image for our metadata.

Twitter - Twitter Cards

Open up the partial that defines your <head> section, in the default Jekyll installation it is _includes/head.html and add the following:

{% include twitter_card.html %}

This avoids cluttering up our templates and allows us to place our Twitter configuration in its own partial. In the _includes directory create a new file called twitter_card.html and add the following tags.

<!-- Twitter Card -->
<meta name="twitter:card" content="{% if page.image %}summary_large_image{% else %}summary{% endif %}">
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:creator" content="@{{ site.twitter_username }}">
<meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 200 }}{% else %}{{ site.description}}{% endif %}">
{% if page.image %}
    <meta name="twitter:image:src" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}
<!-- End Twitter Card -->

If you have multiple authors for your site, you can also change the twitter:creator line to:

<meta name="twitter:creator" content="@{% if page.twitter_username %}{{ page.twitter_username }}{% else %}{{ site.twitter_username }}{% endif %}">

Now you can define a twitter_username in your post’s YAML front matter and have the metadata automatically pick up the change. The minimum image size for Twitter is 280x150px but we should avoid this low end to maintain compatibility with Facebook.

Facebook - Open Graph

Facebook wants larger images than Twitter, 1200x630 for high resolution and a minimum suggested size of 600x315. You can go as low as 200x200 but any smaller and you’ll get errors when Facebook tries to scrape your page. Below the Twitter block in the <head> we will add an include for our Open Graph partial.

{% include fb_open_graph.html %}

Then again in _includes we’ll create the file with the contents below.

<!-- Facebook Open Graph -->
<meta property="og:url" content="{{ page.url | replace:'index.html','' | prepend:site.baseurl | prepend:site.url }}">
<meta property="og:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
<meta property="og:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 200 }}{% else %}{{ site.description }}{% endif %}">
<meta property="og:type" content="{% if page.layout == 'post' %}article{% else %}website{% endif %}">
{% if page.image %}
    <meta property="og:image" content="{{ page.image | prepend: site.baseurl | prepend: site.url }}">
{% endif %}
<!-- End Facebook Open Graph -->

A quick note about setting the og:type, technically for posts or pages you should use the type article and for the root of your domain use website. This should be as easy as keying it to the layout you’ve defined in your front matter, but it seems there’s an outstanding issue with Jekyll where this doesn’t work properly. So you can either leave the conditional and accept that it will always resolve to website or you can hard code it to whatever value suits you best.

LinkedIn - Open Graph

Thanks to LinkedIn also using Open Graph tags we get our social data for them for free when we configured Facebook. One thing to keep in mind though, the data will be exactly the same for both platforms. Be sure your titles and descriptions are appropriate for the medium before you encourage your users to share your posts! Also, LinkedIn only requires a tiny 80x150px image so as long as we’ve picked an image acceptable for Facebook we’re covered here as well.

Next Steps

Having social data is all well and good, but how do people share it! Next time we’ll implement sharing to Twitter, Facebook, and a few other social platforms!

References