Documentation — 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 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>`

Your base layout should include <baseline-head> in <head>. 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 }}
    </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) Site-wide noindex (if needed)

Set noindex: true in src/_data/site.js to suppress indexing and the sitemap entirely.
Per-page: noindex is not read by Baseline; use both sitemap: { ignore: true } and eleventyExcludeFromCollections: true to keep a page out of the sitemap.

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.

Previous: Assets Pipeline Quickstart

Next: Debugging & Navigator