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 ... plugins: ... - jekyll-sitemap - jekyll-seo-tag ...
bundle install to grab the gems and restart Jekyll if it’s
Setup your configuration
Next I setup some defaults and basics in the
First make sure your
description values are good.
Next I added some social info and some defaults for the image and
# _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
image data. And
if it makes sense the
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
webmaster_verifications: google: 1234 bing: 1234 alexa: 1234 yandex: 1234 baidu: 1234
Lastly, you need to add the tags to your template
<head> ... </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
_config.yml as shown above and make sure
set in your
_config.yml if you didn’t already.
You can exclude pages with front matter:
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!