Setting SEO titles in Jekyll

In Jekyll, a common way to set what goes into the <title> element is to check for the page title, if there is one use it, if there isn’t use the site-wide title. We write this code like this;

  
    <title>
      {% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
    </title>
  

This means if your post was called “My favourite 10 Gems” this is what would come out;

  
    <title>My favourite 10 Gems</title>
  

This title makes a lot of sense in the context of your blog. Someone can be reading a list of your articles and know who you are to know it is your favourite ten gems.

In a search engine results page the context is completely lost so the fact they are you’re top ten favourite gems isn’t useful.

We’d like to set a different title, but not impact what we use day-to-day on our site.

How we’ve approached this is to use a custom bit of data in our Front Matter called seo_title. When set this will be what goes into the title of our page.

The code to accomplish this is only slightly longer than our original:

  
    <title>
      {% if page.seo_title != empty %}{{ page.seo_title }}{% elsif page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}
    </title>
  

First we check if page.seo_title exists, if it does we spit it out, if it doesn’t we check if page.title exists and spit that out, finally if neither exists we default to the value of site.title, which will be set in your _config.yml file.

You’ll notice we’ve used page.seo_title != empty, this is because by default if we’re on a page this will return a truthy value, we want to only put out the seo_title if there is an actual value against it.

To set this on your blog post, you add seo_title: 10 Gems worth checking out in 2019.