iam joona

Implementing SEO and Open Graph tags in Eleventy (11ty)

Published on: June 26, 2020 by Joona Tuunanen

I recently rebuilt my site using Eleventy / 11ty. As an SEO guy, I of course wanted to have at least the basic SEO meta tags in place. It wasn’t as straightforward as I hoped, but after a bit of googling and trial and error, I think I got things to work as they should.

So if you’re looking to implement the necessary <head> SEO tags in 11ty, hopefully this post helps you. Basically I’m going to go through how to add the following tags to your codebase:

  • title
  • meta description
  • rel=“canonical”
  • meta robots
  • Open Graph title
  • Open Graph description
  • Open Graph url
  • Open Graph image

And no, implementing these things will not be enough to rank for anything competitive. As I said earlier, these are just some of the basic building blocks that should be in place to have a chance to rank and be consistent with it.

SEO tags in Eleventy / 11ty

To get the basics right, you should definitely have customised title tags and meta descriptions for all pages. Ideally you can set them both up per page instead of just relying on bulk options. After all, title and meta descriptions both are visible in search results and are the things people see before clicking to the site.

Currently I’ve implemented SEO tags like this in my _includes/components/head.njk file:

<title>{{ "{ title or renderData.title or metadata.title }" | escape }}</title>
<meta name="description" content="{{ "{description or renderData.description}" | escape }} />
<link rel="canonical" href={{ "{ page.url }" | escape }}/>
<meta name="robots" content="index, follow" />

Both title and meta descriptions come from the 11ty front matter. That means that the top of my articles / pages look like this:

SEO tags in 11ty front matter

This means that the only tag that is updating automatically is the rel=“canonical”. That should basically always be self-referencing on normal blogs. With ecom or larger sites the situation is completely different and then you will need to be able to customise it per page basis. Please also note that I added meta robots tag there just in case.

So to get these SEO tags to work properly in Eleventy, I did the following things:

  1. Added a few lines of code to my <head> section
  2. Started to use corresponding elements on front matter.

Social media tags in Eleventy / 11ty

Adding the necessary social media tags was quite simple as the logic is similar to the SEO tags listed above. Here’s what I’ve added to my head.njk file:

  <meta property="og:title" content={{ "{ title or renderData.title or metadata.title }" | escape }}/>
  <meta property="og:url" content={{ "{ page.url }" | escape }} />
  <meta property="og:description" content={{ "{description or renderData.description}" | escape }} />
  <meta property="og:image" content="/static/img/logo.png" />
  <meta property="og:type" content="article" />

As you can see, I’ve hardcoded og:image and og:type as I don’t have too many formats here on this site. You might need to make these dynamic as well if you’re programming something larger.

Open Graph title, url and description use exactly the same logic as title, meta description and rel=“canonical” above. Personally I don’t see a lot of benefit to tailor the content specifically for social media. If you disagree or need something more robust, you can enhance your front matter.

Can’t I just use a plugin or something?

Yes, you absolutely can. That was my first thought as well. I tried adding eleventy-plugin-seo here, but I couldn’t get that to work as intended.

The mistake was probably between the chair and the keyboard as I am still new to Eleventy. However, as you can see above, I found a way to implement the tags in another way. And I didn’t really want to add more dependencies for such a simple thing.

Hope this helps!