Rino Puji Blog

Hanya Sebuah Blog untuk mengisi masa lapang

How to add SEO plugin for 11ty

Content Shortcut

  1. Problem
  2. Solution
  3. Installing the plugin
  4. Import Plugin
  5. Test


Problem

When using default 11ty pre-installed template like i am using now,we got a problem where this template does not have seo optimization.So in this situation,we need to add seo configuration by ourself or alternatively we can use eleventy-plugin-seo from artstorm.


Solution

The old installation instruction at eleventy-plugin-seo is outdate on the new pre-installed 11ty template.At this post,i will give a tutorial how to add this seo plugin correctly on our newest template.


Installing the plugin

1. This is IMPORTANT.We need to navigate to our Blog\node_modules\@11ty.The eleventy-plugin-seo need to be reside on this folder.In my case the command will be :

cd C:\Users\Rin0\Desktop\rinopujiblog2\RinoBlog\node_modules\@11ty
np install eleventy-plugin-seo --save
   ```
**2**. Double to make sure ``eleventy-plugin-seo` is exist.
```batch
ls

Directory: C:\Users\Rin0\Desktop\rinopujiblog2\RinoBlog\node_modules\@11ty

Mode                 LastWriteTime         Length Name
----                 -------------         ------ ----
d-----          5/6/2025   4:00 PM                eleventy-plugin-seo


Import plguin

Now here the tricky part.The manual instruction at eleventy-plugin-seo state that we need to import the plugin via :

const pluginSEO = require("eleventy-plugin-seo");

module.exports =  function(eleventyConfig) {
  eleventyConfig.addPlugin(pluginSEO, require("./src/_data/seo.json"));
};

But in the latest 11ty pre-installed theme,eleventy.config.js using "ES module" where we need to use import and export.So this is my method make it work.(I am sure you can come up with more simple solution.)

1. First i need to make a new file seo.json inside _data directory.Modified this to your own value :

{
  "title": "Rino Puji Blog",
  "description": "Hanya Sebuah Blog untuk mengisi masa lapang",
  "url": "https://blog.rinopuji.com",
  "author": "Rino Puji",
  "image": "/Image/rin112.png"
}

2. Next we will open eleventy.config.js for importing the plugin.This is how i importing the plugin.

// Other import 
// Other import
import pluginSEO from "@11ty/eleventy-plugin-seo";
// This is the reason why we need to make sure `eleventy-plugin-seo` is exist inside `Blog\node_modules\@11ty`

// Find import bundle,for example : 
eleventyConfig.addBundle("js", {
		toFileDirectory: "dist",
	});

// Below import bundle,you will find "add.plugin",for example : 
eleventyConfig.addPlugin(pluginNavigation);
eleventyConfig.addPlugin(HtmlBasePlugin);
eleventyConfig.addPlugin(InputPathToUrlTransformPlugin);

// We will add our seo plugin alongside this group
const seoData = await import('./_data/seo.json', { assert: { type: 'json' } });
eleventyConfig.addPlugin(pluginSEO, seoData.default);

3. Last step is we need to include {% seo %} before </head> section in our layout.But be careful,in my situation,the <head></head> is located at base.njk and is used a nunjucks.If your template also using a nunjucks,the correct syntax is {% seo "" %}.

<head>
    <!-- Other code -->
    <!-- Other code -->
    {% seo "" %}
    </head>

Now try build your 11ty blog/website,the plugin should be working now.


Test

There are many way to test either our seo tag is working or not.The most common basic and simple test is by observing our website source code when it become alive.Now build our 11ty site,serve it locally or host it at your own hosting choice.Using chrome,right click and choose View Page Source (CTRL+U).Go to your <head> section.If the seo plugin is working,before the end of </head>,you will find your meta tag similiar to mine :

<title>How to add SEO plugin for 11ty - Rino Puji Blog</title>

<meta name="description" content="Hanya Sebuah Blog untuk mengisi masa lapang">
<meta name="robots" content="index,follow">
<meta name="author" content="Rino Puji">

<link rel="canonical" href="https://blog.rinopuji.com/blog/Programming/addseoplugin11ty/">

<meta property="og:title" content="How to add SEO plugin for 11ty - Rino Puji Blog">
<meta property="og:type" content="article">

<meta property="og:url" content="https://blog.rinopuji.com/blog/Programming/addseoplugin11ty/">
<meta property="og:description" content="Hanya Sebuah Blog untuk mengisi masa lapang">
<meta property="og:image" content="/Image/rin112.png">

<meta name="twitter:card" content="summary">

<meta name="twitter:url" content="https://blog.rinopuji.com/blog/Programming/addseoplugin11ty/">
<meta name="twitter:title" content="How to add SEO plugin for 11ty - Rino Puji Blog">
<meta name="twitter:description" content="Hanya Sebuah Blog untuk mengisi masa lapang">
<meta name="twitter:image" content="/Image/rin112.png">