Using the jekyll-seo-tag plugin
Published on 11 January 2022.
Social Cards
Without using SEO tags to serve metadata for social media, links will appear plainly and without much to draw the eye. I wanted to change how my blog post presents on social media, so I searched for how to add SEO tags to my existing blog. Since my blog is built on GitHub Pages and thus uses Jekyll, I was able to install the jekyll-seo-tag plugin. Here’s how.
Install jekyll-seo-tag
In the Gemfile of the Jekyll project add the following line:
gem 'jekyll-seo-tag'
The Gemfile is used when testing my blog locally using bundle exec jekyll serve.
In the _config.yml of the project, find the plugins_dir section and add the following line:
- jekyll-seo-tag
A GitHub Actions workflow will execute builds and include the jekyll-seo-tag plugin now configured in _config.yml when generating the static assets during the build process.
Add SEO frontmatter
My blog is a fork of gh-pages-blog. jekyll-seo-tag requires frontmatter to be added to two files, located in the _includes/head directory. I simply added the following frontmatter expression in the <head> tags of page.html (which represents the parent blog) and post.html (which represents any individual post):
{ % seo % }
NOTE I added spaces on either side of the Liquid expression (the braces and percent symbol) to avoid Jekyll from replacing it with the SEO data it generates during the build process of the blog. Check out more about static files from Jekyll.
After this change in the static files, I am now able to add an image property to any post to specify a social card. Any post without a value for image will use a default social card, which is also the card used for the parent blog. Posts are written in Markdown (GFM) and the property values are written in a comment header. An example below is how Jekyll knows what to call this post.
---
layout : post
title : Using the jekyll-seo-tag plugin
category : social
image : "/seo/2022-01-11.png"
---
Resources
I put all this together thanks to this very helpful blog post from Meagan Waller.
These pages are useful for testing meta tags:
About michaellamb.dev
Michael Lamb is a software engineer working at C Spire. If you have a blog-specific inquiry please create a new issue on GitHub. Feel free to fork this blog and build your own!Get to know who I am in my first post Hello, World!