This is a summary of my talk from the Write The Docs North England event in March 2018.

Jekyll is a static site generator that’s extremely popular with developers because of its built-in support for blogs, and its ability to translate markdown (an intuitive markup language) into HTML. Many of our clients use it, and we built our own site with Jekyll as well since it produces fast-loading pages – a critical factor for SEO.

However, apart from this benefit, Jekyll offers no specific support for improving SEO out of the box. If you want more traffic, here are the first 5 things we do with every new Jekyll site.

1. Wire up Google Analytics

Analysing how users discover and interact with your site is important when deciding where to invest your markting efforts. Perhaps the most popular website analytics tool is Google Analytics (GA), but unlike other CMSes and website builders, there’s no internal support for connecting with this tool. There are two ways you can resolve this issue:

  • Use a Jekyll theme that includes support for GA.
  • Insert the JavaScript snippet yourself.

Our site uses the beautiful-jekyll theme, allowing us to add our UA tracking ID in the _config.yml file. However, you can also insert the JavaScript manually by adding the following near the top of the <head> tag:

<!-- Google Analytics -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

2. Generate a Sitemap

Just like the step above, generating a sitemap won’t actually improve your search engine rankings. But for new sites, it can kickstart the crawling process once you’ve submitted the sitemap via Google Search Console – a step you only need to do once.

Jekyll cannot build sitemaps on its own. You need to use the jekyll-sitemap gem, which will generate a sitemap for you.

3. Use a Mobile-first Theme

There was a lot of noise last year about Google moving to a mobile-first index. Essentially, this means that Google’s crawler imitates a mobile device while viewing your site.

Historically sites had different versions depending on whether you viewed it on a mobile device or a desktop, and since the majority of Google’s search traffic is from mobile devices, they decided to rank sites based on their mobile experience. So providing a responsive and mobile-friendly site is critical.

There is no support in the default Jekyll install for the meta-viewport tag, so it can be difficult to neatly render pages on mobile devices.

A modern Jekyll theme that looks good on mobile is the ideal way to provide a decent mobile experience. As mentioned above, we use beautiful-jekyll.

4. Meta Tags

Meta tags are still a fundamental ranking factor for SEO. Tweaking them can dramatically alter which position your pages appear in search results.

Below is an image showing the <title> tag in red and the <meta name="description"> tag in dark red. These two tags not only tell Google the topic of a page, but they can also persuade users to view the page.

Jekyll SEO Tag is a gem that generates meta tags when you use certain keywords in the YAML front matter of your pages. For example, the keywords to set the <title> and <meta description> are:

title: "Nando's"
description: "Home to the legendary flame-grilled PERi-PERi chicken. Afro-Portuguese inspired. South African born."

5. OpenGraph Tags

The OpenGraph Protocol defines tags for web pages that are primarily used for social networks. For example, both <meta property="og:title"> and <meta property="og:image"> are popular for networks such as Twitter, Facebook, and LinkedIn.

Here’s an example demonstrating the difference OpenGraph tags can make to the UX of a tweet. The first image is missing the tags referenced above, so the stock website image and description are used.

But in this image, the image and description from the blog post itself have been automatically pulled into the tweet.

  <meta property="og:title" content="Preventing trace event record loss with LTTng-UST's blocking mode &mdash; LTTng">
  <meta property="og:image" content="http://lttng.org/blog/images/matthew-hamilton-159691.jpg">

The result is a much richer experience.

Jekyll SEO tag can generate OpenGraph tags as well as meta tags by including appropriate keywords. In this example, the relevant keywords are image and description.

Build Optimised Sites with Jekyll

And there you have it: the first 5 changes we make to every new Jekyll site, and why. Take control of the attributes affecting your Jekyll site’s search rankings by adding a mixture of gems and themes.

Alternatively, get in touch with us. We’d be happy to help!