Langues

Guide SEO pour Eleventy

Eleventy (11ty) livre par défaut du HTML brut sans JavaScript côté client. Voici comment configurer les titres, descriptions, URL canoniques, sitemaps et données structurées grâce à la cascade de données.

Première publication : 26 juin 2026 · Dernière mise à jour : 21 août 2026 · Advanced
Langues
AIRédigé parAI v2
1 indice probant sur cette page

Eleventy produit par défaut du HTML brut sans JavaScript côté client, un excellent point de départ pour l’indexabilité : le contenu figure dans le premier octet et ne nécessite aucun rendu. En contrepartie, Eleventy ne génère aucun balisage SEO. Titres, méta-descriptions, URL canoniques, sitemap et données structurées doivent être implémentés. La cascade de données (_data/site.js → données de répertoire → front matter → eleventyComputed) rend cette architecture évolutive : les valeurs par défaut sont déclarées une fois et les URL canoniques dérivées automatiquement. Les extensions comme eleventy-plugin-seo et @11ty/eleventy-img facilitent le travail sans ajouter de capacité fondamentale. Le langage de gabarit n’a aucune incidence sur le SEO.

En bref — Eleventy produit du HTML brut au moment de la compilation, avec zéro JavaScript côté client par défaut : le contenu est donc présent avant la première requête du robot, ce qui minimise les risques d’indexabilité. Mais Eleventy ne fournit aucun balisage SEO : titre, description, canonique, robots, Open Graph, sitemap et JSON-LD sont à votre charge. La cascade de données (_data/site.js → fichiers de données de répertoire → front matter → eleventyComputed) permet de passer à l’échelle : déclarez les valeurs par défaut une fois, puis dérivez les canoniques dans eleventyComputed. Les extensions (eleventy-plugin-seo, @11ty/eleventy-img, @quasibit/eleventy-plugin-sitemap) apportent du confort, pas de nouvelles capacités. robots.txt est copié tel quel. Le langage de gabarit n’a aucun effet SEO. La v3 privilégie ESM et fait d’Image Transform la voie recommandée pour des images favorables aux CWV. Surveillez trois cas limites : l’ordre des dépendances eleventyComputed peut échouer sans bruit, l’appartenance à une collection ne garantit pas la production d’une URL, et une compilation locale ne prouve pas ce que sert la production — vérifiez directement l’artefact déployé.

Pourquoi Eleventy constitue une excellente base SEO

Eleventy transforme chaque route en HTML statique lors de la compilation et, contrairement à Next.js, Nuxt, Gatsby ou Astro, n’envoie aucun JavaScript au navigateur sauf si vous en ajoutez. Evidence for this claim Eleventy compiles templates to static output and adds no client-side framework runtime by default. Scope: Eleventy core behavior. Confidence: high · Verified: Eleventy documentation Le robot n’attend aucun rendu côté client, aucun budget de rendu n’est consommé et aucun bundle d’hydratation ne pénalise les Core Web Vitals. Des sites Eleventy en production obtiennent régulièrement des scores Lighthouse de 99 à 100 et des pages d’accueil livrant 0 Ko de JavaScript.

La compilation est également rapide, ce qui compte davantage pour le SEO qu’il n’y paraît : des cycles de déploiement plus courts transmettent plus vite les corrections aux moteurs. Sur un test de 4 000 fichiers Markdown, Eleventy compile en environ 1,93 s, contre 22,9 s pour Astro, 29 s pour Gatsby et 70,6 s pour Next.js, avec une empreinte node_modules bien moindre — 34 Mo contre 583 Mo pour Gatsby.

Mais — c’est tout l’objet de cette page — aucun de ces avantages ne fournit le balisage SEO. Eleventy génère un HTML propre et s’arrête là. Chaque <title>, méta-description, canonique, entrée de sitemap et bloc JSON-LD doit être implémenté. Son modèle de données permet heureusement de le faire une fois pour toutes les pages.

La cascade de données : fondation de l’architecture SEO

Le concept essentiel pour faire évoluer le SEO d’Eleventy est la cascade de données, c’est-à-dire l’ordre dans lequel Eleventy résout une valeur, de la priorité la plus faible à la plus élevée : Evidence for this claim Eleventy's data cascade resolves data from multiple sources according to a documented priority order. Scope: Eleventy data cascade. Confidence: high · Verified: Eleventy: Data cascade

  1. Données globales fournies par Eleventy
  2. Fichiers de données globaux dans _data/ — par exemple _data/site.js avec title, description, url et author
  3. Fichiers de données de répertoire — par exemple blog/blog.11tydata.js, qui attribue og:type: article à tous les articles
  4. Front matter du gabarit — remplacements propres à une page
  5. eleventyComputed — priorité maximale, pour dériver des valeurs d’autres données

En pratique :

  • Déclarez une seule fois les valeurs SEO par défaut dans _data/site.js.
  • Remplacez-les au niveau du répertoire pour un type de contenu — tous les articles reçoivent le type OG article, une section noindex reçoit noindex, etc.
  • Remplacez-les par page dans le front matter lorsqu’une page est particulière.
  • Utilisez eleventyComputed pour les valeurs dérivées, dont l’URL canonique est l’exemple type :
// _data/eleventyComputed.js  (or eleventyComputed in a layout data file)
module.exports = {
  canonical: (data) => `${data.site.url}${data.page.url}`,
};

Chaque page possède alors une canonique autoréférente correcte sans travail individuel. Voilà le levier offert par la cascade.

Un cas limite mérite un vrai test : les valeurs eleventyComputed peuvent dépendre d’autres valeurs calculées — par exemple un titre alimentant une description calculée — et Eleventy doit résoudre ce graphe avant le rendu. Les chaînes simples fonctionnent, mais une valeur qui dépend d’elle-même, directement ou par l’intermédiaire d’un autre champ, crée une référence circulaire. Les problèmes d’ordre se manifestent alors silencieusement par une valeur absente ou incorrecte plutôt que par une erreur explicite. Si plusieurs champs eleventyComputed sont superposés, contrôlez leurs valeurs exactes dans la sortie rendue ; ne vous contentez pas d’une compilation réussie. Evidence for this claim Computed Data values can derive from other computed values, so dependency ordering and circular references need testing against the rendered output. Scope: Eleventy eleventyComputed resolution. Confidence: high · Verified: Eleventy: Computed Data

Balises méta dans la mise en page de base

L’architecture classique utilise une mise en page de base propriétaire du <head>, que les mises en page de contenu étendent :

_includes/
  layouts/
    base.njk      ← <head> with all SEO meta tags
    post.njk      ← extends base, adds BlogPosting schema
_data/
  site.js         ← sitewide SEO defaults

Vous devez au minimum implémenter vous-même :

  • <title> — unique pour chaque page
  • <meta name="description"> — unique pour chaque page
  • <link rel="canonical"> — Eleventy ne possède aucune canonique native ; ajoutez-la explicitement
  • <meta name="robots"> — noindex pour les brouillons et aperçus, ainsi que les éventuelles pages paginées trop pauvres
  • Open Graph — og:title, og:description, og:image, og:url, og:type
  • Cartes Twitter/X — twitter:card, twitter:title, twitter:description, twitter:image

Exemple de <head> Nunjucks minimal alimenté par la cascade :

<title>{{ title }} | {{ site.title }}</title>
<meta name="description" content="{{ description or site.description }}">
<link rel="canonical" href="{{ canonical }}">
<meta property="og:title" content="{{ title }}">
<meta property="og:image" content="{{ ogImage or site.defaultImage }}">
<meta name="twitter:card" content="summary_large_image">

Comparaison des extensions SEO

Une extension n’est pas indispensable : une mise en page de base manuelle associée à la cascade offre un contrôle complet sans dépendance, solution que beaucoup préfèrent. Deux extensions méritent toutefois d’être connues :

  • eleventy-plugin-seo (artstorm) — l’extension la plus mûre et la plus utilisée. Un seul shortcode {% seo %} (Liquid) ou {% seo "" %} (Nunjucks) produit titre, description, canonique, robots, Open Graph, carte Twitter et auteur à partir d’un bloc de configuration — titre, description, URL, auteur, compte Twitter et image par défaut. Elle gère aussi les directives robots des pages paginées, le séparateur de titre et un mode minimaliste. Installation : npm install eleventy-plugin-seo.
  • eleventy-plugin-metagen (tannerdolby) — plus granulaire, avec des paramètres de shortcode nommés ; génère charset, viewport, titre, auteur, description, générateur, Open Graph, carte Twitter, canonique et balises CSS/JS.

Règle générale : les extensions apportent du confort, pas des capacités. Tout ce qu’elles font peut être réalisé dans la mise en page de base. Utilisez-en une si vous ne souhaitez pas maintenir le code répétitif.

robots.txt

Eleventy ne génère pas automatiquement robots.txt. Deux approches sont possibles :

1 — Copie statique — la plus simple. Placez un robots.txt dans la source et copiez-le tel quel :

eleventyConfig.addPassthroughCopy("src/robots.txt");

2 — Génération par gabarit — pour adapter la sortie à l’environnement : tout bloquer en préproduction et tout autoriser en production.

---
permalink: /robots.txt
eleventyExcludeFromCollections: true
---
User-agent: *
{% if environment == "production" %}
Allow: /
Sitemap: {{ site.url }}/sitemap.xml
{% else %}
Disallow: /
{% endif %}

Rappelez-vous la règle universelle : Disallow bloque le crawl, pas l’indexation, et une balise noindex placée sur une URL interdite au crawl ne sera jamais lue.

Génération du sitemap

Cette fonction n’est pas native non plus. Pour un contrôle maximal, créez manuellement sitemap.xml.njk avec permalink: /sitemap.xml et eleventyExcludeFromCollections: true, parcourez collections.all, ignorez les pages exclues et produisez les éléments <loc> et <lastmod> :

---
permalink: /sitemap.xml
eleventyExcludeFromCollections: true
---
<?xml version="1.0" encoding="utf-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
{% for page in collections.all %}
  {% if not page.data.excludeFromSitemap %}
  <url>
    <loc>{{ site.url }}{{ page.url }}</loc>
    <lastmod>{{ page.date | dateToISO }}</lastmod>
  </url>
  {% endif %}
{% endfor %}
</urlset>

Vous pouvez aussi utiliser @quasibit/eleventy-plugin-sitemap — à configurer avec hostname ; l’extension prend également en charge les liens alternatifs multilingues. Dans tous les cas, marquez les pages utilitaires avec eleventyExcludeFromCollections: true afin de les exclure.

Soyons précis : parcourir collections.all examine l’appartenance aux collections, pas la sortie garantie. Un gabarit peut appartenir à une collection sans produire d’URL, le plus souvent parce que son permalink vaut false ou qu’un fichier de données n’a jamais été destiné à rendre une page. La présence dans collections.all ne prouve donc pas qu’un élément appartient au sitemap. Comparez les <loc> rendus aux pages que vous attendez réellement dans le crawl. Evidence for this claim Collection membership does not by itself guarantee that an item emits a URL or belongs in the sitemap. Scope: Eleventy collections and permalink interaction. Confidence: high · Verified: Eleventy: Collections

Optimisation des images pour les Core Web Vitals

Le HTML d’un site statique est rapide, mais des images non optimisées dégraderont tout de même LCP et CLS. La solution est @11ty/eleventy-img ; en v3, la voie recommandée est l’extension Image Transform, qui post-traite automatiquement chaque balise <img> du HTML compilé, sans shortcode individuel :

const { eleventyImageTransformPlugin } = require("@11ty/eleventy-img");

eleventyConfig.addPlugin(eleventyImageTransformPlugin, {
  formats: ["avif", "webp", "jpeg"],
  defaultAttributes: {
    loading: "lazy",
    decoding: "async",
  },
});

Avantages SEO :

  • Ajout automatique de width et height → prévention des décalages de mise en page (CLS)
  • srcset avec plusieurs largeurs → images adaptatives
  • <picture> avec AVIF, WebP et solution de repli JPEG
  • Aucun agrandissement

Pour les images principales visibles sans défilement, remplacez le chargement différé afin qu’elles soient chargées immédiatement :

<img src="hero.jpg" loading="eager" fetchpriority="high" eleventy:widths="800,1200">

Permaliens et URL propres

Par défaut, Eleventy produit des URL propres avec barre oblique finale : about.njk → _site/about/index.html → /about/. Remplacez ce comportement dans le front matter :

permalink: "/blog/{{ title | slugify }}/"

Options utiles : permalink: false traite un gabarit pour les collections sans l’écrire sur disque, ce qui convient aux gabarits de données ; dynamicPermalink: false interprète littéralement la chaîne du permalien. En SEO, restez rigoureux sur la cohérence des barres obliques finales : mélanger /page et /page/ crée inutilement du contenu dupliqué.

Précision importante : permalink: false supprime entièrement la sortie. Le fichier source est compilé et peut encore alimenter les collections et données, mais aucune page HTML n’est écrite et aucune URL ne peut être explorée. La présence d’un fichier dans le répertoire de contenu ne prouve pas que la page correspondante a été livrée. Si une page manque dans la recherche, vérifiez d’abord sa présence dans _site avant de conclure à un problème d’indexation plutôt que de permalien. Evidence for this claim A permalink value of false suppresses page output entirely, so a source file's existence is not proof of a crawlable page. Scope: Eleventy permalink output control. Confidence: high · Verified: Eleventy: Permalinks

SEO de la pagination

La pagination d’Eleventy répartit une collection entre plusieurs fichiers de sortie. La première page est /blog/, puis viennent /blog/1/, /blog/2/, etc., selon le permalien choisi. Chaque page doit posséder une URL unique et pagination.alias pour exposer ses données. Décisions SEO :

  • Canoniques. Deux écoles : faire pointer toutes les pages vers la première — ce qui consolide les signaux mais masque le contenu profond légitime — ou utiliser des canoniques autoréférentes, chaque page désignant sa propre URL. C’est l’approche privilégiée par la documentation actuelle de Google. Je choisis l’autoréférence sauf si les pages profondes n’ont réellement rien à indexer.
  • rel="prev" / rel="next". Google a confirmé en 2019 ne plus utiliser ces liens comme signaux de classement. Certains les conservent pour aider les robots à comprendre la série ; dans ce cas, alimentez-les avec pagination.href.previous et pagination.href.next.
  • noindex sur les pages pauvres. Si les dernières pages manquent de contenu, ajoutez noindex, via le champ noindex de eleventy-plugin-seo ou manuellement dans le head.

Données structurées et JSON-LD

L’implémentation manuelle est la plus souple : définissez un objet de schéma dans eleventyComputed ou un fichier de données de répertoire, puis sérialisez-le dans la mise en page. Pour un site de contenu, utilisez Organization / WebSite à l’échelle du site, BlogPosting / Article par publication, BreadcrumbList avec un fil d’Ariane et FAQPage dans les sections FAQ. @quasibit/eleventy-plugin-schema propose un shortcode pour BlogPosting et WebPage ; il attend des dates ISO 8601, donc enregistrez un filtre de date.

Eleventy v2 contre v3 : changements ayant un effet SEO

La v3, version stable actuelle, privilégie ESM : un fichier de configuration utilisant require() doit désormais porter l’extension .cjs, ou vous devez définir "type": "module" dans package.json et employer import. CommonJS reste entièrement pris en charge. Deux gains comptent pour le SEO :

  • Compilations à froid environ 38 % plus rapides sur les sites de plus de 500 pages → déploiements plus rapides et index plus frais.
  • Image Transform devient la voie par défaut : le post-traitement déclaratif de chaque <img> simplifie la livraison d’images adaptatives sans risque pour le CLS.

Vérifier l’artefact de production, pas seulement la compilation locale

Tout ce qui précède vise à corriger la source — cascade, mise en page, extensions — sans prouver ce qui est réellement livré. Une compilation locale _site ou eleventy --serve ne révèle ni l’hôte et le chemin de production, ni les redirections et en-têtes injectés, ni les réécritures du CDN ou du proxy. Confirmez que la version installée d’Eleventy correspond à celle testée, puis contrôlez directement le site déployé :

  • HTML brut — affichez la source de l’URL en ligne, pas seulement _site/index.html, puis confirmez le titre, la méta-description et la canonique.
  • Hôte canonique absolu — une canonique construite avec localhost ou avec un site.url de préproduction restera silencieusement fausse si la valeur n’est pas remplacée selon l’environnement.
  • Sitemap XML — récupérez /sitemap.xml, vérifiez sa résolution, l’hôte de production et les URL attendues ; l’appartenance à une collection ne garantit pas une entrée.
  • Pages supprimées ou utilitaires — vérifiez que les pages permalink: false et eleventyExcludeFromCollections: true sont absentes du site en ligne, pas seulement du build local.
  • Actifs — assurez-vous que les CSS, JS et images référencés dans le HTML se résolvent sur l’hôte de production ; une confusion entre chemin relatif et absolu passe facilement inaperçue localement.
  • Codes d’état et redirections — interrogez directement les URL et confirmez les réponses 200s ; les règles de la plateforme peuvent transformer une page canonique en chaîne de 301 invisible localement.

L’installation d’une extension tierce ne prouve pas davantage la bonne sortie : elle modifie ce qui est généré, pas le traitement propre à l’environnement de déploiement. Faites-en un contrôle à chaque mise en production, pas une configuration ponctuelle. Evidence for this claim Local build output does not by itself prove production hostnames, redirects, headers, or canonical behavior; the deployed artifact needs its own verification pass. Scope: Eleventy production deployment verification. Confidence: medium · Verified: Patrick Stox: Eleventy SEO

Erreurs SEO courantes avec Eleventy

  • Supposer qu’Eleventy « gère le SEO » : il gère le HTML, le balisage SEO vous appartient.
  • Oublier complètement la canonique, puisqu’il n’en existe aucune par défaut.
  • Ne livrer aucun sitemap en le croyant automatique.
  • Croire que l’absence de JavaScript compense des images laissées sans optimisation.
  • Mélanger les règles de barre oblique finale et créer des URL dupliquées.
  • Utiliser Disallow dans robots.txt pour désindexer une page — employez noindex.
  • Laisser indexables les brouillons et aperçus faute de noindex sur la section.

Pour situer Eleventy parmi les autres générateurs, consultez le hub des générateurs de sites statiques ; pour comprendre pourquoi la sortie statique réduit les risques de rendu, consultez le hub parent SEO JavaScript.

Add an expert note

Pin an expert quote

New person? Create their unclaimed profile at /admin/experts/ → Pin a quote first.