Eleventy Plugin Baseline

A magic carpet ride

Table of Contents

Head & SEO Basics

Add sensible head/SEO defaults with Baseline. You’ll set site-wide metadata, page front matter, see how <baseline-head> renders canonical and OG/Twitter shells, and control indexing. Uses npm, Node 20.15.0+, and the same Baseline setup as earlier tutorials.

What you’ll build

  • A page with proper title and description.
  • Canonical, OG, and Twitter meta generated by Baseline.
  • Noindex controls at page and site level.

Prerequisites

  • Baseline already installed and loaded (as in the simple tutorial).
  • package.json with "type": "module" and scripts:
    {
	"type": "module",
	"scripts": {
		"dev": "npx @11ty/eleventy --serve",
		"build": "npx @11ty/eleventy"
	}
}
  • Set site.url to your production URL (or leave localhost for local testing).

1) Ensure Baseline is loaded

eleventy.config.js:

import baseline, { config as baselineConfig } from '@apleasantview/eleventy-plugin-baseline';

/** @param {import("@11ty/eleventy").UserConfig} eleventyConfig */
export default async function (eleventyConfig) {
	eleventyConfig.addPlugin(baseline());
}

export const config = baselineConfig;

2) Site-wide metadata

Update src/_data/site.js:

export default {
	title: 'Baseline Head Demo',
	tagline: 'Head & SEO quickstart',
	url: process.env.URL || 'http://localhost:8080/',
	defaultLanguage: 'en',
	noindex: false
};

3) Head assets

Ensure src/_data/head.js includes your bundles:

export default {
	link: [{ rel: 'stylesheet', href: '/assets/css/index.css' }],
	script: [{ src: '/assets/js/index.js', defer: true }]
};

4) Layout with <baseline-head>

<baseline-head> must be present inside <head> for Baseline to inject meta/link tags. Example:

<!DOCTYPE html>
<html lang="{{ lang | default(site.defaultLanguage) }}">
  <head>
    <baseline-head></baseline-head>
    <meta name="color-scheme" content="light dark">
  </head>
  <body>
    <main id="main">
      {{ content | safe }}
      {% if page.url !== "/" %}
        <p><a id="go-back" href=""><span style="vertical-align: text-bottom;">&#8592;</span>&nbsp;Go back</a></p>
      {% endif %}
    </main>
    <script>
    const backBtn = document.getElementById("go-back");
    if ( backBtn ) {
      backBtn.addEventListener("click", (event) => {
        event.preventDefault();
        history.back();
      });
    }
    </script>
  </body>
</html>

5) Page front matter

Create src/content/pages/head-demo.md:

---
title: 'Head & SEO Demo'
description: 'A page showing Baseline head/SEO defaults.'
permalink: '/head-demo/'
layout: 'layouts/base.njk'
---

This page uses Baseline’s head defaults for canonical, OG, and Twitter meta.

6) Per-page front matter overrides (canonical + social)

Add overrides in the same page front matter:

head:
  canonical: 'https://example.com/head-demo/'
  openGraph:
    'og:title': 'Custom OG Title'
    'og:image': 'https://example.com/assets/social/og-head-demo.jpg'
  twitter:
    'twitter:title': 'Custom Twitter Title'
    'twitter:image': 'https://example.com/assets/social/twitter-head-demo.jpg'
  • Canonical falls back to page.url → content map → site.url + pathPrefix. Supplying canonical is optional—add it here to see the override.
  • Use absolute URLs for social images (combine site.url + your path in production).

7) Noindex (site-wide and per-page)

  • Set noindex: true in src/_data/site.js to suppress indexing and the sitemap entirely.
  • Per-page: set noindex: true in front matter to add a robots noindex and exclude the page from the sitemap. Use sitemap: { ignore: true } if you want sitemap-only exclusion.

8) Run and inspect

npx rimraf dist/ && npm run dev
  • Open the page (default http://localhost:8080/head-demo/).
  • View source: confirm <baseline-head> rendered the canonical (your override if set), OG/Twitter tags (including custom titles/images), and defaults for description/robots.
  • Check dist/sitemap.xml while dev runs; the page should be listed unless noindex is true.

9) Production build

npx rimraf dist/ && npm run build
  • Inspect dist/head-demo/index.html for the rendered head.
  • Confirm dist/sitemap.xml includes or excludes the page according to noindex.

10) Next steps

  • Set pathPrefix in eleventy.config.js if deploying under a subpath.
  • Provide real site.url for correct canonical/sitemap URLs in production.
  • Add social image/meta customization via your own _data/head.js or page data.