Ngôn ngữ

Hướng dẫn về Eleventy SEO

Eleventy (11ty) ships zero client-side JavaScript theo mặc định, so nội dung của bạn là trong đó thô HTML on đó đầu tiên fetch. Đó catch — điều này generates không tiêu đề tags, meta các mô tả, canonicals, hoặc sitemaps. Ở đây cách configure SEO on an Eleventy site, được xây dựng khoảng đó dữ liệu cascade.

Xuất bản lần đầu: 26 thg 6, 2026 · Cập nhật lần cuối: 22 thg 8, 2026 · Advanced
Ngôn ngữ
AIĐược viết bởiAI v2
1 tín hiệu bằng chứng trên trang này

Eleventy outputs đơn giản HTML với zero client-side JavaScript theo mặc định, mà là đó safest có thể starting point cho indexability — nội dung là trong đó đầu tiên byte, không có gì để render. Đó trade-off: Eleventy generates không SEO markup tại all. Mỗi tiêu đề, mô tả meta, canonical, sitemap, và bit of dữ liệu có cấu trúc là điều gì đó bạn implement yourself. Đó dữ liệu cascade (_data/site.js → directory dữ liệu → front quan trọng → eleventyComputed) là đó architecture đó làm đó scalable: declare defaults khi, derive canonicals tự động. Plugin như eleventy-plugin-seo và @11ty/eleventy-img thêm convenience, không khả năng. Pick bất kỳ template language — điều này không ảnh hưởng SEO.

TL;DR — Eleventy emits đơn giản HTML tại xây dựng time với zero client-side JS by default, so nội dung là trong đó phản hồi trước đó đầu tiên crawler yêu cầu — đó lowest-risk indexability setup có. Nhưng Eleventy ships không SEO markup: tiêu đề, mô tả, canonical, robots, OG, sitemap, và JSON-LD là all yours để xây dựng. Đó dữ liệu cascade (_data/site.js → directory dữ liệu files → front quan trọng → eleventyComputed) là đó architecture đó làm này scale — declare defaults khi, derive canonicals trong eleventyComputed. Plugin (eleventy-plugin-seo, @11ty/eleventy-img, @quasibit/eleventy-plugin-sitemap) thêm convenience, không khả năng. robots.txt là một passthrough file. Template language là an SEO non-vấn đề — pick by team familiarity. v3 là ESM-đầu tiên và làm đó Image Transform plugin đó default path để CWV-sạch images. Watch three edge cases: eleventyComputed dependency ordering có thể fail silently, collection membership không bảo đảmột URL đã là emitted, và một local xây dựng không phải proof of điều gì production thực ra serves — verify đó deployed artifact trực tiếp.

Vì sao Eleventy là một mạnh SEO baseline

Eleventy xây dựng mỗi route để static HTML tại xây dựng time và, unlike Tiếp theo.js, Nuxt, Gatsby, hoặc Astro, ships không JavaScript để đó trình duyệt trừ khi bạn thêm điều này. 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 có không client-side kết xuất cho một crawler để chờ on, không kết xuất budget impact, và không hydration bundle taxing Core Web Vitals. Real production Eleventy các trang routinely báo cáo Lighthouse scores of 99–100 across đó board và homepages đó ship 0 KB of JavaScript.

đây là cũng fast để xây dựng, mà matters hơn cho SEO hơn điều này looks: nhanh hơn xây dựng có nghĩa là tighter deploy cycles, so nội dung cácách sửa reach cácông cụ tìm kiếm sooner. On một 4 000-Markdown-file benchmark Eleventy xây dựng trong ~1,93s versus ~22,9s cho Astro, ~29s cho Gatsby, và ~70,6s cho Tiếp theo.js, với một fraction of đó node_modules footprint (34 MB so với Gatsby 583 MB).

Nhưng — và này là đó toàn bộ point of đó trang — none of đó buys bạn SEO markup. Eleventy generates sạch HTML và dừng ở đó. Mỗi <title>, meta mô tả, canonical, sitemap entry, và JSON-LD block là điều gì đó bạn implement. Đó good news là đó Eleventy dữ liệu model làm implementing them khi-và-mọi nơi genuinely pleasant.

Đó dữ liệu cascade: của bạn SEO architecture foundation

Đó single hầu hết quan trọng concept cho scalable Eleventy SEO là đó dữ liệu cascade — đó order trong mà Eleventy resolves một giá trị, lowest priority để highest: 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. Eleventy-supplied global dữ liệu
  2. Global dữ liệu files trong _data/ (e.g. _data/site.js với title, description, url, author)
  3. Directory dữ liệu files (e.g. blog/blog.11tydata.js — cho mỗi blog post og:type: article)
  4. Template front quan trọng (theo-trang overrides)
  5. eleventyComputed (highest — derive các giá trị từ other dữ liệu)

Trong thực tế:

  • Declare của bạn SEO defaults khi trong _data/site.js.
  • Override tại đó directory level cho một nội dung loại (all posts nhận đó bài viết OG loại, một noindex section nhận noindex, etc.).
  • Override theo trang trong front quan trọng nơi một trang là special.
  • Dùng eleventyComputed cho derived các giá trị — đó canonical đang đó canonical ví dụ:
// _data/eleventyComputed.js  (or eleventyComputed in a layout data file)
module.exports = {
  canonical: (data) => `${data.site.url}${data.page.url}`,
};

Hiện tại mỗi trang có một correct self-referencing canonical với zero theo-trang hoạt động. đó là đó leverage đó cascade cho bạn.

Một trường hợp biên worth kiểm thử thay vì assuming: eleventyComputed các giá trị có thể phụ thuộc on other computed các giá trị (một tiêu đề đó feeds vào một computed mô tả, say), và Eleventy có để resolve đó dependency graph trước điều này có thể render bất cứ điều gì. Straightforward chains hoạt động fine, nhưng một computed giá trị đó accidentally phụ thuộc vào itself — trực tiếp hoặc qua một sản phẩm khác computed trường — là một circular reference, và ordering các vấn đề ở đây fail silently as một bị thiếu hoặc sai giá trị thay vì một loud xây dựng lỗi. Nếu bạn lean on multiple layered eleventyComputed các trường, kiểm tra đó được kết xuất output cho đó chính xácác giá trị bạn expect, không chỉ đó xây dựng succeeded. 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

Meta tags trong đó base layout

Tiêu chuẩn architecture là một base layout đó owns đó <head>, với nội dung layouts extending điều này:

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

Đó meta tags bạn cần để implement yourself, tại minimum:

  • <title> — unique theo trang
  • <meta name="description"> — unique theo trang
  • <link rel="canonical"> — Eleventy có không được xây dựng-trong canonical; thêm điều này explicitly
  • <meta name="robots"> — noindex cho draft/preview các trang (và thin paginated các trang, nếu bất kỳ)
  • Open Graph — og:title, og:description, og:image, og:url, og:type
  • Twitter/X Cards — twitter:card, twitter:title, twitter:description, twitter:image

MỘT minimal Nunjucks <head> pulling từ đó 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">

SEO plugin, compared

Bạn không cần một plugin — một manual base layout plus đó dữ liệu cascade cho bạn đầy đủ control với không dependencies, và nhiều practitioners ưu tiên chính xác đó. Nhưng hai plugin là worth knowing:

  • eleventy-plugin-seo (artstorm) — đó hầu hết mature và widely dùng. MỘT single {% seo %} shortcode (Liquid) / {% seo "" %} (Nunjucks) emits tiêu đề, mô tả, canonical, robots, Open Graph, Twitter Card, và tác giả từ một config block (site tiêu đề, mô tả, URL, tác giả, Twitter xử lý, default image). Điều này cũng xử lý robot directives on paginated các trang, một tiêu đề divider, và một minimalistic chế độ. Install: npm install eleventy-plugin-seo.
  • eleventy-plugin-metagen (tannerdolby) — hơn granular, với named shortcode parameters; generates charset, viewport, tiêu đề, tác giả, mô tả, generator, OG, Twitter Card, canonical, và CSS/JS tags.

Đó rule of thumb: plugin thêm convenience, không khả năng. Bất cứ điều gì they làm, bạn có thể làm trong đó base layout. Reach cho một nếu bạn’d rather không maintain đó boilerplate.

robots.txt

Eleventy làm không auto-generate robots.txt. Hai approaches:

1 — Static passthrough (simplest). Drop một robots.txt trong của bạn nguồn và copy điều này verbatim:

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

2 — Template-generated (cho environment-cụ thể output — block mọi thứ on staging, cho phép on production):

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

Remember đó universal rule: Disallow chặn crawling, không lập chỉ mục — và một noindex tag on một crawl-blocked URL là không bao giờ seen.

Sitemap generation

Cũng không được xây dựng trong. Đó hầu hết-control option là một manual template — tạo sitemap.xml.njk với permalink: /sitemap.xml và eleventyExcludeFromCollections: true, loop over collections.all, skip excluded các trang, và emit <loc> / <lastmod> entries:

---
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>

Hoặc dùng @quasibit/eleventy-plugin-sitemap (configure với hostname; điều này cũng hỗ trợ multilingual alternate links). Either way, mark utility các trang với eleventyExcludeFromCollections: true so they không leak trong.

Một điều worth đang precise về: looping over collections.all walks collection membership, không guaranteed output. MỘT template có thể belong để một collection và vẫn không emit một URL — hầu hết commonly vì của nó permalink là set để false, hoặc vì một dữ liệu-chỉ file đã là không bao giờ meant để render một trang ngay từ đầu. Membership trong collections.all không phải proof an item belongs trong đó sitemap; kiểm tra đó được kết xuất <loc> entries so với đó các trang bạn thực ra expect để là crawlable. 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

Image optimization cho Core Web Vitals

MỘT static site HTML là fast, nhưng unoptimized images sẽ vẫn tank LCP và CLS. Đó cách sửa là @11ty/eleventy-img, và trong v3 đó được khuyến nghị path là đó Image Transform plugin, mà post-xử lý mỗi <img> tag trong của bạn được xây dựng HTML tự động — không theo-image shortcode needed:

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

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

Điều gì đó buys bạn cho SEO:

  • Auto-stamped width và height → ngăn layout shift (CLS)
  • srcset với multiple widths → responsive images
  • <picture> với AVIF + WebP + JPEG fallback
  • Không upscaling

Cho trên-đó-fold hero images, override đó lazy default so they load eagerly:

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

Eleventy default là sạch URLs với một trailing slash: about.njk → _site/about/index.html → /about/. Override trong front quan trọng:

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

Hữu ích flags: permalink: false xử lý một template cho collections nhưng skips writing điều này để disk (handy cho dữ liệu-chỉ templates), và dynamicPermalink: false xử lý đó permalink string theo nghĩa đen. Đó một SEO điều để stay disciplined về: trailing-slash consistency — mixing /page và /page/ là một duplicate-nội dung own-goal.

Worth stating plainly vì điều này trips mọi người lên: permalink: false suppresses output hoàn toàn — đó nguồn file compiles và có thể vẫn feed collections và dữ liệu, nhưng không HTML trang là được viết và không URL tồn tại để crawl. MỘT nguồn file sitting trong nội dung của bạn directory không phải proof đó một corresponding trang shipped; nếu một trang là bị thiếu từ tìm kiếm, kiểm tra đó được xây dựng _site output cho đó file trước assuming đây là an lập chỉ mục vấn đề thay vì một permalink một. 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

Pagination SEO

Eleventy pagination splits một collection across output files. Đó đầu tiên trang là /blog/, thì /blog/1/, /blog/2/, và so on (customizable qua permalink). Mỗi trang trong đó set cần một unique URL và pagination.alias để expose theo-trang dữ liệu. Đó SEO decisions:

  • Canonicals. Hai schools: point mỗi trang tại trang 1 (consolidates các tín hiệu nhưng buries legitimate deep-trang nội dung), hoặc self-referencing canonicals nơi mỗi trang canonical là của nó own URL — Google được ưu tiên approach trong hiện tại tài liệu. I default để self-referencing trừ khi đó deeper các trang truly có không có gì worth lập chỉ mục.
  • rel="prev" / rel="next". Google confirmed back trong 2019 điều này không lâu hơn dùng những as các tín hiệu xếp hạng. Some vẫn thêm them để help các crawler understand series structure; nếu bạn làm, wire them từ pagination.href.previous / pagination.href.next.
  • noindex on thin các trang. Nếu sau đó các trang có insufficient nội dung, thêm noindex (qua đó noindex trường nếu bạn là dùng eleventy-plugin-seo, hoặc manually trong đó head).

Dữ liệu có cấu trúc / JSON-LD

Manual là đó hầu hết flexible: define một schema object trong eleventyComputed hoặc một directory dữ liệu file và serialize điều này trong đó layout. Đó sạch nhất types cho một nội dung site là Organization / WebSite sitewide trong đó base layout, BlogPosting / Article theo post, BreadcrumbList nếu bạn có breadcrumbs, và FAQPage on FAQ sections. @quasibit/eleventy-plugin-schema offers một shortcode cho BlogPosting và WebPage nếu bạn’d rather không hand-roll điều này (điều này expects ISO 8601 dates, so register một date filter).

Eleventy v2 so với v3 — điều gì changed cho SEO

v3 (hiện tại ổn định) là ESM-đầu tiên: một config file đó dùng require() hiện tại cần đó .cjs extension, hoặc bạn set "type": "module" trong package.json và dùng import. CommonJS là vẫn fully supported — chỉ là deliberate về điều này. Đó hai SEO-relevant wins:

  • ~38% nhanh hơn cold xây dựng on các trang over 500 các trang → nhanh hơn deploys, fresher chỉ mục.
  • Đó Image Transform plugin là đó default path — declarative post-processing of mỗi <img>, mà làm shipping responsive, CLS-safe images đó path of least resistance thay vì một theo-image chore.

Verify đó production artifact, không chỉ đó local xây dựng

Mọi thứ trên là về getting đó nguồn right — đó dữ liệu cascade, đó layout, đó plugin. None of điều này proves điều gì thực ra ships. MỘT local _site xây dựng (hoặc eleventy --serve) không tell bạn điều gì production serves: đó host và path của bạn deploy nền tảng thực ra dùng, các chuyển hướng điều này injects, các header điều này sets, hoặc liệu một CDN/proxy rewrites bất cứ điều gì on đó way out. Xác nhận đó installed Eleventy version matches điều gì bạn là kiểm thử so với, thì kiểm tra đó deployed site trực tiếp, không chỉ đó xây dựng output:

  • Thô HTML — view-nguồn đó trực tiếp URL, không chỉ _site/index.html; xác nhận đó tiêu đề, mô tả meta, và canonical là ở đó và correct.
  • Absolute canonical host — một canonical được xây dựng từ một staging hoặc localhost site.url sẽ silently ship sai trong production nếu đó giá trị đã không overridden theo environment.
  • Sitemap XML — fetch đó trực tiếp /sitemap.xml và xác nhận điều này resolves, dùng đó production host, và lists đó URLs bạn expect (see đó sitemap section trên on collection membership không guaranteeing an entry).
  • Suppressed/utility các trang — spot-kiểm tra rằng permalink: false và eleventyExcludeFromCollections: true các trang là thực ra absent từ đó trực tiếp site, không chỉ từ của bạn local xây dựng.
  • Assets — CSS, JS, và images referenced trong đó được xây dựng HTML resolve on đó production host (một relative-so với-absolute path mismatch là easy để miss locally).
  • Các mã trạng thái và các chuyển hướng — yêu cầu đó trực tiếp URLs trực tiếp và xác nhận 200s nơi bạn expect 200s; một deploy nền tảng chuyển hướng rules có thể silently turn một canonical trang vào một 301 chain đó không bao giờ cho thấy lên trong một local xây dựng.

Bên thứ ba plugin installation không phải proof of correct output either — điều này thay đổi điều gì nhận generated, không điều gì một cụ thể deploy environment làm với điều này. Treat này as một phát hành-checklist item, không một-time setup. 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

Phổ biến Eleventy SEO mistakes

  • Assuming Eleventy “xử lý SEO” — điều này xử lý HTML; đó SEO markup là all yours.
  • Forgetting đó canonical hoàn toàn (có không được xây dựng-trong một).
  • Shipping không sitemap vì bạn assumed điều này đã là tự động.
  • Letting unoptimized images undo đó speed advantage.
  • Inconsistent trailing slashes creating duplicate URLs.
  • Dùng Disallow trong robots.txt để try để deindex một trang (dùng noindex thay vì).
  • Leaving draft/preview các trang indexable vì không noindex đã là set on đó section.

Cho nơi Eleventy sits among đó other generators, see đó Static Site Generators hub; cho đó kết xuất theory behind vì sao static output là thấp-risk, đó parent JavaScript SEO hub.

Add an expert note

Pin an expert quote

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