On page SEO is just as important for static sites as it is for something like a WordPress site.

When starting to add SEO for this site, I was first going to create a plugin to help generate the SEO and social Meta tags. But after a quick search I found the Jekyll SEO Tag plugin. It does exactly what I wanted. It outputs title, description, and social meta tags and JSON-LD data for you.

The docs are good, but we’ll look at adding it to your Jekyll site.

Add the plugins

It’s a plugin after all, so we add the gems to our Gemfile & our config file.

# Gemfile ... group :jekyll_plugins do ... gem 'jekyll-sitemap' gem 'jekyll-seo-tag' end

Next add it to the _config.yml file.

# _config.yml ... plugins: ... - jekyll - sitemap - jekyll - seo - tag ...

Then run bundle install to grab the gems and restart Jekyll if it’s running.

Setup your configuration

Next I setup some defaults and basics in the _config.yml file.

First make sure your title and description values are good. Next I added some social info and some defaults for the image and author data.

# _config.yml ... # SEO/OpenGraph logo: /images/ logo . png twitter: username: cloudsh card: summary social: name: CloudSh links: - https :/ / twitter . com / cloudsh - https :/ / github . com / cloudshcom author: twitter: cloudsh defaults: - scope: path: "" values: image: /images/ logo . png author: cloudsh # /SEO ...

I wanted all the pages to have at least the logo for an image if I didn’t overwrite one on the page. You can set page specific stuff in the YAML front matter.

You can an probably should override the title , description , and image data. And if it makes sense the author and lang can also be set per page.

# index.html --- layout: default title: CloudSh search for static sites image: images / how_it_works . png comments: false hide: true ---

That’s it! You can also setup webmaster tools verification tags by adding those to the _config.yml too!

webmaster_verifications : google : 1234 bing : 1234 alexa : 1234 yandex : 1234 baidu : 1234

Lastly, you need to add the tags to your template head tag.

<head> {% seo %} ... </head>

A couple tweaks

That plugin takes care of most things, but there a couple of other easy things I wanted to do.

Fix permalinks Jekyll Permalinks

Short URLs are probably better for SEO, plus they look better.

# _config.yml permalink : none # /:categories/:title:output_ext

Add a Sitemap

Sitemaps help search engines know what pages to index. For this we can use another plugin jekyll-sitemap.

Add to your Gemfile and _config.yml as shown above and make sure url: is set in your _config.yml if you didn’t already.

You can exclude pages with front matter: sitemap: false .

Test it out!

You can test by viewing source, but I like to check what it’s going to look like on social platforms.

Besides the obvious benefits of SEO data, CloudSh will use that data to better index your Jekyll site for Search!