Bryan Lee
Musings about product, growth, and software engineering.

On-Site SEO For Your Jekyll Blog

· Jamstack

One of the best ways to grow your traffic is via organic SEO. The concept is simple, you add in new content that is relevant to the audience you want visiting your site, and with more content, it increases the chances that your website appears in relevant searches. In fact, having not done any other means of promoting this blog, you most likely are reading this post because you clicked on a search result. The harder part is that in order for search engines to want to show your website, you need to make sure your website is giving out all the right information to the search engines (onsite SEO).

This post will be about onsite SEO in the context of Jekyll, but feel free to adapt the general principles to other platforms you're using.

Page Title

The page title is one of the major factors normally used to determine relevance of the page to a user's search. It is also good user experience that helps the user find which page she wants to go to when she's trying to navigate with the browser back button.

In your theme's head.html:

{% raw %}<title>{% if page.title %}{{ page.title | escape }} | {{ site.title | escape }}{% else %}{{ site.title | escape }}{% endif %}</title>{% endraw %}

What this does is it prepends your post/page title to your site name, and shows your site name only when on the frontpage.

In post: This Is A Post | MySite
Frontpage: MySite

URL Structure

Straight from the horse's mouth, the simpler your site URL structure the better. By default, Jekyll uses a very verbose /a-category/2017/12/04/wow-this-is-long.html structure. There is a high chance the category name is going to be repeated in your post title, the date is rather redundant too. Let's simplify it in our _config.yml:

permalink: /:title

Now, your blog posts will have URLs like /wow-this-is-better. Sweet!

Additionally, you want to make sure your post URL contains relevant keywords. With this URL structure, our post url is controlled by your Jekyll post filename. Make sure your filename contains those relevant keywords, and cut down on 'filler' words like 'for', 'to', 'and'.

As an example, the title for this post is On-Site SEO For Your Jekyll Blog but our url is just onsite-seo-jekyll-blog.

Meta Tags

Particularly the meta description tag. This gives you control over the excerpt that displays in the search result pages. A good description goes a long way in attracting people to click on your post.

Edit your head.html and add a meta description tag or replace the default one:

{% raw %}<meta name="description" content="{% if page.description %}{{ page.description }}{% else %}{{ page.excerpt | default: site.description | strip_html | normalize_whitespace | truncate: 160 | escape }}{% endif %}">{% endraw %}

The default Jekyll theme makes life easier with automated meta description tags generated from your post excerpt. We want to upgrade this so that you can overwrite with your own custom description or otherwise fallback to the default excerpts. Now, when you write a new post, add a custom meta description to your front matter:

layout: post
description:  "Whoopee, this is a good description."

Let Yourself Be Found

If you're a new blog, on a new domain, high chance is that no search engine knows you exist yet. All onsite optimizations are useless if no one knows you exist! Make sure you add your site to Google Webmasters so that GoogleBot starts crawling through your new blog. It also provides a lot of useful metrics and tools to improve your SEO inside, so make sure you don't miss this!

After 3-5 days, you should see some results appear when you search for your site in Google If you're lucky, you might also start getting some organic traffic! There's a lot more to SEO that I'll explore more in a future article. That's it for now, happy writing and may you start getting some good organic traffic!