Eleventy SEO Guide: Complete Tutorial for 2026

Eleventy SEO for a static site is simple when you break it into discrete checks: crawlability, clean templates that emit metadata, fast builds and delivery, a sensible content architecture, and measurable outcomes. This guide walks through a practical Eleventy (11ty) workflow—what to check before you start, how to inject meta and sitemap output, concrete performance steps, content and internal-link patterns, structured data, and a launch cadence so you can measure whether pages are actually getting indexed and clicked. Expect templates, short code sketches, tooling recommendations, and troubleshooting steps you can apply in a few sprints.

TL;DR:

• Audit crawlability, sitemap, and Search Console first; fix robots/noindex and canonical problems before publishing more pages.

• Emit metadata and sitemap at build time from frontmatter templates, and generate internal related links to create clear pillar/cluster signals.

• Prioritize image formats, responsive images, and caching/CDN setup to keep LCP under ~2.5s and CLS under ~0.1 for better Core Web Vitals.

Prerequisites: What You Need Before You Start Eleventy SEO

A Working Eleventy Site and Repo

Confirm the site builds locally with eleventy and produces static HTML files in the output folder. Run a clean build: npx @11ty/eleventy --serve and verify pages render correctly in the browser. Ensure templates are organized into collections (e.g., posts, courses, modules) so you can iterate on output patterns.

Live URL, Build/deploy Pipeline, and Access to Search Console

You need a public deploy URL to validate indexing. Connect the site to Google Search Console and enable performance reporting. With a verified property you can see index coverage, top queries, and the number of indexed pages—critical for the audit phase.

Basic Template Language Knowledge (nunjucks, Liquid, Etc.)

Eleventy supports Nunjucks, Liquid, and other template languages. You’ll need to inject, meta description, link rel="canonical", and JSON-LD from frontmatter. Verify familiarity with whichever templating language your repo uses so you can output meta tags in a layout file.

Checklist:

• Site builds locally and serves HTML

• Public deploy URL with HTTPS

• Search Console verification

• Familiarity with Nunjucks or Liquid to edit layouts

• Lighthouse or PageSpeed tools installed for performance baselining

For an Eleventy starter that includes JSON-LD, sitemaps, and RSS examples, see the starter projects on the official Eleventy docs.

Step 1: Audit Your Eleventy Site for SEO Issues

Crawlability and Indexability Checks (robots, Sitemap)

Start by requesting your sitemap at /sitemap.xml and check robots.txt at /robots.txt. Confirm pages you want indexed are not blocked and that sitemap URLs are absolute and match the canonical URLs you intend to use. Use a crawler (Screaming Frog, Sitebulb, or the free site: operator and URL inspection in Search Console) to verify canonical tags are present and consistent.

Practical checks:

• Open Search Console URL Inspection for a representative set of pages

• Confirm noindex meta is absent on pages you want indexed

• Ensure sitemap references the canonical URL and is linked in robots.txt if needed

Content Inventory and Thin Pages

Build a content inventory of output pages. Flag pages with very little unique content (short product descriptions, tag pages with no added value). Mark low-value pages as candidates for consolidation, canonicalization, or adding useful content (details, examples, FAQs).

Performance Baseline (lighthouse/core Web Vitals)

Run Lighthouse for several page types: homepage, article, and the slowest expected template (e.g., a long article with many images). Record:

• Largest Contentful Paint (LCP) ms

• Cumulative Layout Shift (CLS) score

• Interaction to Next Paint / INP or FID if available

These metrics form your baseline for Step 3 optimizations. Google’s SEO starter guide is a practical reference for indexing and metadata basics.

Search Console and Analytics Review

Pull top queries and impression data from Search Console to see which pages already get impressions. Note if any pages are receiving impressions but low CTR—those deserve title and meta testing. If impressions are zero for new pages, prioritize the crawlability checks above.

Triage approach:

• Critical: Fix robots.txt, noindex tags, and sitemap links

• High impact: Improve LCP, meta titles, canonical logic

• Content gaps: Identify clusters and pillar pages to create topical authority

Step 2: Configure Eleventy for Search-friendly Output

Canonical/permalink Patterns and Clean Urls

Define a permalink strategy in templates or frontmatter: short, keyword-friendly slugs without file extensions. Example frontmatter pattern.

Use a single canonical field in frontmatter and reference it in your base layout so every page emits:

Prefer absolute canonical URLs that match the deployed site domain. For paginated or parameterized content, set canonical to the primary page and consider rel="prev/next" on paginated sequences.

Generating Meta Tags From Templates

Place, meta description, and meta robots in a shared layout so each page can inject values from frontmatter. Example sketch (Nunjucks-style).

Use frontmatter keys: title, description, noindex (boolean), canonical. Ensure meta descriptions are 50–160 characters and unique per page.

Creating Sitemap.xml and Robots.txt

Generate sitemap.xml at build time using an Eleventy plugin or a small build script that reads collections and writes an XML file with lastmod. Ensure URLs are absolute and include canonical URLs. Serve robots.txt from the static folder and reference the sitemap URL inside it.

Multilingual and Hreflang Basics (if Applicable)

If running multiple languages, emit hreflang link sets in the head and include all language variants in the sitemap. Keep canonical distinct from hreflang: canonical points to the preferred URL for duplicate content, while hreflang signals language/region variants.

For details on Eleventy Baseline patterns and examples, consult the Eleventy Baseline documentation.

Step 3: Speed and Performance Optimizations for Eleventy Sites

Optimize Images and Media (avif/webp, Srcset)

Images are often the largest resource on static sites. Use build-time image processing (sharp or Eleventy Image) to produce multiple sizes and modern formats (WebP, AVIF) and emit srcset attributes. Example best practice:

• Serve AVIF or WebP first with a JPEG/PNG fallback

• Generate properly sized images for common breakpoints

• Use lazy loading for offscreen images and preload the hero image

Aim for LCP under 2.5s and CLS <0.1 as targets; real-world results vary by audience and geography.

Critical CSS, Preloading, and Resource Hints

Inline critical CSS for above-the-fold content to reduce render-blocking. Preload fonts and the main hero image when appropriate. Use rel="preload" for the most critical resources and rel="prefetch" for next-page assets.

CDN, Caching Headers, and Build-time Optimizations

Deploy the site behind an edge CDN (Cloudflare, Netlify Edge, Vercel edge) and configure cache-control headers for immutable static assets. Use atomic deploys to ensure consistent response headers and fast invalidation. Prefer build-time generation over client-side rendering for content that must be indexed—Eleventy’s static output fits this model.

For partial-hydration strategies and different trade-offs with other SSGs, see comparisons to Next.js SEO tips and Astro performance tactics.

Practical checklist:

• Implement build-time image resizing and format conversion

• Inline critical CSS for key templates

• Preload hero images and key font files

• Set long cache TTLs for static assets and proper cache-control for HTML where you need freshness

Step 4: Build a Content Strategy and Internal Linking for Eleventy

Define Pillar Pages and Topic Clusters

Organize content into topic clusters: one pillar page for a high-level topic and multiple supporting cluster pages targeting related long-tail queries. For education and course sites, a pillar could be "Intro to Machine Learning" with clusters for modules, instructor bios, and FAQs.

Structure example:

• /courses/machine-learning/ (pillar)

• /courses/machine-learning/module-1-data/ (cluster)

• /courses/machine-learning/faq/ (supporting cluster)

Template Patterns for Articles, Tags, and Cluster Landing Pages

Use Eleventy collections to generate lists and landing pages. Create a collection for each content type and a template that renders shared metadata and a related-article list. Breadcrumbs help users and search engines understand hierarchy; emit structured breadcrumb markup in templates.

Automate tag pages carefully: canonicalize or add meaningful content so tag pages aren’t treated as thin duplicates.

Automating Internal Links and Related Content

Also consider syndication strategies for developer audiences; a guide on publishing to developer platforms offers tips on amplifying discoverability beyond your site.

Practical patterns:

• Store cluster metadata in frontmatter (pillar: true, clusterOf: slug)

• Render related links by querying collections at build time

• Ensure internal links use absolute or root-relative paths consistently

Step 5: Add Structured Data, Media, and Extras That Boost Search Presence

Article, Breadcrumb, and FAQ Schema Best Practices

Focus on schema types that align with your content: Article for blog posts, BreadcrumbList for hierarchies, FAQPage for common Q&A, and Course schema for education content. Populate fields from frontmatter: headline, description, author, datePublished, and mainEntityOfPage.

Adding Schema at Build Time From Frontmatter

Generate JSON-LD in your layout using frontmatter values. Example approach:

• Add a schema object in frontmatter or compute it in the layout

• Output a single block per page with the JSON-LD

Validate generated schema with Google’s Rich Results Test or the Structured Data Testing Tool before publishing to avoid errors.

Optimizing Images and Youtube Embeds for SEO

For images, include width/height attributes and descriptive alt text from frontmatter. When embedding YouTube:

• Use a lazy-loading iframe or a click-to-load placeholder

• Include a transcript or summary on the same page to provide crawlable text

• Add VideoObject schema when the video is a central page feature

Avoid issuing incorrect or spammy schema; stick to required fields and validated examples in Google’s guidelines.

Step 6: Launch, Measure Results, and Common Troubleshooting

Post-launch Checklist and Monitoring Cadence

After deploy:

• Submit sitemap to Search Console and request indexing for key pages

• Monitor the URL Inspection tool for coverage and crawling errors

• Track top queries, impressions, and clicks weekly during the first month, then monthly

• Check Core Web Vitals in PageSpeed Insights and the CrUX data in Search Console

Set a basic cadence: weekly checks for the first 30 days, then shift to monthly reviews unless a major change is deployed.

Common Mistakes and How to Fix Them

• Missing or incorrect sitemap entries: Regenerate sitemap from collections and ensure lastmod reflects content changes.

• Noindex accidentally left in templates: Search for noindex flags in shared layouts and remove from production builds.

• Canonical mismatches: Ensure canonical output always matches the preferred absolute URL; avoid canonicalizing paginated index pages to the parent unless they are true duplicates.

• Heavy third-party scripts: Audit scripts added in a deploy; defer or load them conditionally if they cause LCP regressions.

Iterating Content and Technical Improvements

The Bottom Line

Eleventy SEO is a repeatable engineering and editorial workflow: confirm crawlability, emit correct metadata and sitemap from templates, focus on images and caching to hit Core Web Vitals targets, organize content into pillar/cluster structures, and monitor with Search Console. Use automation to scale drafting and internal linking, but validate indexing and schema before you push large volumes of pages.

Frequently Asked Questions