Bahasa

Panduan Eleventy SEO

Eleventy (11ty) ships zero client-side JavaScript oleh default, so Anda konten adalah di mentah HTML pada pertama fetch. catch — ini generates Tidak tag judul, deskripsi meta, canonicals, atau sitemaps. Di sini's cara configure SEO pada sebuah Eleventy situs, dibangun sekitar data cascade.

Pertama kali diterbitkan: 26 Jun 2026 · Terakhir diperbarui: 8 Agu 2026 · Advanced
Bahasa
AIDitulis olehAI v2
1 sinyal bukti di halaman ini

Eleventy outputs plain HTML dengan zero client-side JavaScript oleh default, yang adalah safest mungkin starting poin untuk indexability — konten adalah di pertama byte, tidak ada apa pun untuk render. trade-off: Eleventy generates Tidak SEO markup di semua. setiap judul, deskripsi meta, canonical, sitemap, dan bit dari data terstruktur adalah sesuatu Anda implement yourself. data cascade (_data/situs.js → directory data → front penting → eleventyComputed) adalah architecture itu membuat itu scalable: declare defaults setelah, derive canonicals secara otomatis. Plugins like eleventy-plugin-seo dan @11ty/eleventy-img tambahkan convenience, tidak kemampuan. Pick apa pun template language — ini tidak memengaruhi SEO.

TL;DR — Eleventy emits plain HTML di bangun time dengan zero client-side JS oleh default, so konten adalah di respons sebelum pertama crawler permintaan — lowest-risk indexability setup ada. tetapi Eleventy ships Tidak SEO markup: judul, deskripsi, canonical, robots, OG, sitemap, dan JSON-LD adalah semua yours untuk bangun. data cascade (_data/site.js → directory data files → front penting → eleventyComputed) adalah architecture itu membuat ini scale — declare defaults setelah, derive canonicals di eleventyComputed. Plugins (eleventy-plugin-seo, @11ty/eleventy-img, @quasibit/eleventy-plugin-sitemap) tambahkan convenience, tidak kemampuan. robots.txt adalah sebuah passthrough file. Template language adalah sebuah SEO non-issue — pick oleh team familiarity. v3 adalah ESM-pertama dan membuat Image Transform plugin default path untuk CWV-bersih images. Watch three edge cases: eleventyComputed dependency ordering dapat fail silently, collection membership tidak jaminan sebuah URL adalah emitted, dan sebuah local bangun adalah tidak proof dari apa production sebenarnya menyajikan — verify deployed artifact secara langsung.

Mengapa Eleventy adalah sebuah strong SEO baseline

Eleventy membangun setiap route untuk static HTML di bangun time dan, unlike Berikutnya.js, Nuxt, Gatsby, atau Astro, ships Tidak JavaScript untuk browser unless Anda tambahkan ini. 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 ada Tidak rendering sisi klien untuk sebuah crawler untuk tunggu pada, Tidak rendering budget impact, dan Tidak hydration bundle taxing Core Web Vitals. nyata production Eleventy situs routinely report Lighthouse scores dari 99–100 di seluruh board dan homepages itu ship 0 KB dari JavaScript.

ini adalah juga fast untuk bangun, yang penting lebih untuk SEO daripada ini looks: lebih cepat membangun berarti tighter deploy cycles, so konten memperbaiki reach mesin pencari sooner. pada sebuah 4 000-Markdown-file benchmark Eleventy membangun di ~1,93s versus ~22,9s untuk Astro, ~29s untuk Gatsby, dan ~70,6s untuk Berikutnya.js, dengan sebuah fraction dari node_modules footprint (34 MB vs Gatsby’s 583 MB).

tetapi — dan ini adalah seluruh poin dari halaman — none dari itu buys Anda SEO markup. Eleventy generates bersih HTML dan berhenti di sana. setiap <title>, meta deskripsi, canonical, sitemap entry, dan JSON-LD block adalah sesuatu Anda implement. baik news adalah itu Eleventy’s data model membuat implementing them setelah-dan-di mana-mana genuinely pleasant.

data cascade: Anda SEO architecture foundation

single sebagian besar penting concept untuk scalable Eleventy SEO adalah data cascade — order di yang Eleventy resolves sebuah nilai, lowest priority untuk 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 data
  2. Global data files di _data/ (e.g. _data/site.js dengan title, description, url, author)
  3. Directory data files (e.g. blog/blog.11tydata.js — memberikan setiap blog post og:type: article)
  4. Template front penting (per-halaman overrides)
  5. eleventyComputed (highest — derive nilai dari lainnya data)

dalam praktik:

  • Declare Anda SEO defaults setelah di _data/site.js.
  • Override di directory tingkat untuk sebuah konten jenis (semua posts mendapatkan artikel OG jenis, sebuah noindex bagian mendapatkan noindex, dan seterusnya.).
  • Override per halaman di front penting di mana sebuah halaman adalah special.
  • gunakan eleventyComputed untuk derived nilai — canonical menjadi canonical contoh:
// _data/eleventyComputed.js  (or eleventyComputed in a layout data file)
module.exports = {
  canonical: (data) => `${data.site.url}${data.page.url}`,
};

Now setiap halaman memiliki sebuah correct self-referencing canonical dengan zero per-halaman berfungsi. itu’s leverage cascade memberikan Anda.

Satu edge case worth testing alih-alih assuming: eleventyComputed nilai dapat bergantung pada lainnya computed nilai (sebuah judul itu feeds ke sebuah computed deskripsi, say), dan Eleventy memiliki untuk resolve itu dependency graph sebelum ini dapat render apa pun. Straightforward chains berfungsi fine, tetapi sebuah computed nilai itu accidentally bergantung pada itself — secara langsung atau melalui lainnya computed field — adalah sebuah circular reference, dan ordering issues di sini fail silently sebagai sebuah missing atau wrong nilai alih-alih sebuah loud bangun error. jika Anda lean pada multiple layered eleventyComputed fields, periksa dirender output untuk tepat nilai Anda expect, tidak hanya itu bangun 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 di base layout

Standard architecture adalah sebuah base layout itu owns <head>, dengan konten layouts extending ini:

_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 Anda perlu implement yourself, di minimum:

  • <title> — unique per halaman
  • <meta name="description"> — unique per halaman
  • <link rel="canonical"> — Eleventy memiliki Tidak dibangun-di canonical; tambahkan ini explicitly
  • <meta name="robots"> — noindex untuk draft/preview halaman (dan thin paginated halaman, jika apa pun)
  • Open Graph — og:title, og:description, og:image, og:url, og:type
  • Twitter/X Cards — twitter:card, twitter:title, twitter:description, twitter:image

sebuah minimal Nunjucks <head> pulling dari 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 plugins, compared

Anda tidak perlu sebuah plugin — sebuah manual base layout plus data cascade memberikan Anda penuh control dengan Tidak dependencies, dan banyak practitioners prefer persis itu. tetapi dua plugins adalah worth knowing:

  • eleventy-plugin-seo (artstorm) — paling mature dan widely digunakan. sebuah single {% seo %} shortcode (Liquid) / {% seo "" %} (Nunjucks) emits judul, deskripsi, canonical, robots, Open Graph, Twitter Card, dan author dari sebuah config block (situs judul, deskripsi, URL, author, Twitter tangani, default image). ini juga menangani robot directives pada paginated halaman, sebuah judul divider, dan sebuah minimalistic mode. Install: npm install eleventy-plugin-seo.
  • eleventy-plugin-metagen (tannerdolby) — lebih granular, dengan named shortcode parameters; generates charset, viewport, judul, author, deskripsi, generator, OG, Twitter Card, canonical, dan CSS/JS tags.

aturan dari thumb: plugins tambahkan convenience, tidak kemampuan. Apa pun mereka melakukan, Anda dapat melakukan di base layout. Reach untuk satu jika Anda’d rather tidak maintain boilerplate.

robots.txt

Eleventy melakukan tidak auto-generate robots.txt. Dua approaches:

1 — Static passthrough (simplest). Drop sebuah robots.txt di Anda sumber dan copy ini verbatim:

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

2 — Template-generated (untuk environment-spesifik output — block semuanya pada staging, izinkan pada production):

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

Remember universal aturan: Disallow blocks crawling, tidak pengindeksan — dan sebuah noindex tag pada sebuah crawl-blocked URL adalah tidak pernah seen.

Sitemap generation

juga tidak dibangun di. paling-control option adalah sebuah manual template — buat sitemap.xml.njk dengan permalink: /sitemap.xml dan eleventyExcludeFromCollections: true, loop di atas collections.all, skip excluded halaman, dan 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>

atau gunakan @quasibit/eleventy-plugin-sitemap (configure dengan hostname; ini juga mendukung multilingual alternate tautan). Either cara, mark utility halaman dengan eleventyExcludeFromCollections: true so mereka jangan leak di.

Satu hal worth menjadi precise tentang: looping di atas collections.all walks collection membership, tidak guaranteed output. sebuah template dapat belong untuk sebuah collection dan masih tidak emit sebuah URL — sebagian besar commonly karena -nya permalink adalah atur ke false, atau karena sebuah data-hanya file adalah tidak pernah dimaksudkan untuk render sebuah halaman di pertama place. Membership di collections.all adalah tidak proof sebuah item belongs di sitemap; periksa dirender <loc> entries terhadap halaman Anda sebenarnya expect untuk menjadi dapat di-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

Image optimization untuk Core Web Vitals

sebuah static situs’s HTML adalah fast, tetapi unoptimized images akan masih tank LCP dan CLS. perbaiki adalah @11ty/eleventy-img, dan di v3 recommended path adalah Image Transform plugin, yang post-memproses setiap <img> tag di Anda dibangun HTML secara otomatis — Tidak per-image shortcode needed:

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

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

Apa itu buys Anda untuk SEO:

  • Auto-stamped width dan height → mencegah layout shift (CLS)
  • srcset dengan multiple widths → responsive images
  • <picture> dengan AVIF + WebP + JPEG fallback
  • Tidak upscaling

untuk di atas—fold hero images, override lazy default so mereka muat eagerly:

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

Eleventy’s default adalah bersih URLs dengan sebuah trailing slash: about.njk → _site/about/index.html → /about/. Override di front penting:

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

berguna flags: permalink: false memproses sebuah template untuk collections tetapi skips writing ini untuk disk (handy untuk data-hanya templates), dan dynamicPermalink: false memperlakukan permalink string secara harfiah. satu SEO hal untuk stay disciplined tentang: trailing-slash consistency — mixing /page dan /page/ adalah sebuah duplicate-konten own-goal.

Worth stating plainly karena ini trips orang up: permalink: false suppresses output entirely — sumber file compiles dan dapat masih feed collections dan data, tetapi Tidak HTML halaman adalah ditulis dan Tidak URL ada untuk crawl. sebuah sumber file sitting di Anda konten directory adalah tidak proof itu sebuah corresponding halaman shipped; jika sebuah halaman adalah missing dari penelusuran, periksa dibangun _site output untuk file sebelum assuming ini adalah sebuah pengindeksan masalah alih-alih sebuah permalink satu. 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’s pagination splits sebuah collection di seluruh output files. pertama halaman adalah /blog/, lalu /blog/1/, /blog/2/, dan so pada (customizable melalui permalink). setiap halaman di set perlu sebuah unique URL dan pagination.alias untuk expose per-halaman data. SEO decisions:

  • Canonicals. Dua schools: poin setiap halaman di halaman 1 (consolidates sinyal tetapi buries legitimate deep-halaman konten), atau self-referencing canonicals di mana setiap halaman’s canonical adalah -nya own URL — Google’s preferred approach di saat ini documentation. I default untuk self-referencing unless deeper halaman truly memiliki tidak ada apa pun worth pengindeksan.
  • rel="prev" / rel="next". Google confirmed back di 2019 ini Tidak lebih lama menggunakan ini sebagai sinyal peringkat. beberapa masih tambahkan them untuk help crawler memahami series structure; jika Anda melakukan, wire them dari pagination.href.previous / pagination.href.next.
  • noindex pada thin halaman. jika kemudian halaman memiliki insufficient konten, tambahkan noindex (melalui noindex field jika Anda’re menggunakan eleventy-plugin-seo, atau manually di head).

data terstruktur / JSON-LD

Manual adalah paling flexible: define sebuah schema object di eleventyComputed atau sebuah directory data file dan serialize ini di layout. paling bersih jenis untuk sebuah konten situs adalah Organization / WebSite sitewide di base layout, BlogPosting / Article per post, BreadcrumbList jika Anda memiliki breadcrumbs, dan FAQPage pada FAQ bagian. @quasibit/eleventy-plugin-schema offers sebuah shortcode untuk BlogPosting dan WebPage jika Anda’d rather tidak hand-roll ini (ini expects ISO 8601 dates, so register sebuah date filter).

Eleventy v2 vs v3 — apa changed untuk SEO

v3 (saat ini stable) adalah ESM-pertama: sebuah config file itu menggunakan require() now perlu .cjs extension, atau Anda set "type": "module" di package.json dan gunakan import. CommonJS adalah masih fully didukung — hanya menjadi deliberate tentang ini. dua SEO-relevant wins:

  • ~38% lebih cepat cold membangun pada situs di atas 500 halaman → lebih cepat deploys, fresher indeks.
  • ** Image Transform plugin adalah default path** — declarative post-processing dari setiap <img>, yang membuat shipping responsive, CLS-safe images path dari least resistance alih-alih sebuah per-image chore.

Verify production artifact, tidak hanya local bangun

Semuanya di atas adalah tentang getting sumber right — data cascade, layout, plugins. None dari ini proves apa sebenarnya ships. sebuah local _site bangun (atau eleventy --serve) tidak tell Anda apa production menyajikan: host dan path Anda deploy platform sebenarnya menggunakan, redirects ini injects, headers ini sets, atau apakah sebuah CDN/proxy rewrites apa pun pada cara out. Konfirmasi installed Eleventy versi matches apa Anda’re testing terhadap, lalu periksa deployed situs secara langsung, tidak hanya bangun output:

  • Mentah HTML — view-sumber langsung URL, tidak hanya _site/index.html; konfirmasi judul, deskripsi meta, dan canonical adalah di sana dan correct.
  • Absolute canonical host — sebuah canonical dibangun dari sebuah staging atau localhost site.url akan silently ship wrong di production jika itu nilai tidak overridden per environment.
  • Sitemap XML — fetch langsung /sitemap.xml dan konfirmasi ini resolves, menggunakan production host, dan lists URLs Anda expect (see sitemap bagian di atas pada collection membership tidak guaranteeing sebuah entry).
  • Suppressed/utility halaman — spot-periksa bahwa permalink: false dan eleventyExcludeFromCollections: true halaman adalah sebenarnya absent dari langsung situs, tidak hanya dari Anda local bangun.
  • Assets — CSS, JS, dan images referenced di dibangun HTML resolve pada production host (sebuah relative-vs-absolute path mismatch adalah easy untuk miss locally).
  • kode status dan redirects — permintaan langsung URLs secara langsung dan konfirmasi 200s di mana Anda expect 200s; sebuah deploy platform’s redirect aturan dapat silently turn sebuah canonical halaman ke sebuah 301 chain itu tidak pernah menampilkan up di sebuah local bangun.

ketiga-party plugin installation adalah tidak proof dari correct output either — ini perubahan apa mendapatkan generated, tidak apa sebuah spesifik deploy environment melakukan dengan ini. Treat ini sebagai sebuah rilis-checklist item, tidak sebuah satu-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

umum Eleventy SEO mistakes

  • Assuming Eleventy “handles SEO” (terjemahan) “menangani SEO” — ini menangani HTML; SEO markup adalah semua yours.
  • Forgetting canonical entirely (ada Tidak dibangun-di satu).
  • Shipping Tidak sitemap karena Anda assumed ini terasa otomatis.
  • Letting unoptimized images undo speed advantage.
  • Inconsistent trailing slashes membuat duplicate URLs.
  • menggunakan Disallow di robots.txt untuk try untuk deindex sebuah halaman (gunakan noindex alih-alih).
  • Leaving draft/preview halaman dapat diindeks karena Tidak noindex adalah set pada bagian.

untuk di mana Eleventy sits among lainnya generators, see Static situs Generators hub; untuk rendering theory behind mengapa static output adalah rendah-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.