Guide Svelte SEO

TL;DR — Le la plupart important chose à know à propos de Svelte SEO est que Svelte et SvelteKit ne sont pas le même chose. Plain Svelte construit lune page dans le visitor’s navigateur, donc moteur de recherches premier voir a blank shell. SvelteKit — Svelte’s official framework — construit lune page on le serveur et sends finished HTML. Utiliser SvelteKit pour n’importe quoi vous vouloir à classer.

Svelte vs. SvelteKit

Svelte is a outil pour building utilisateur interfaces. It’s clever: au lieu de shipping a big JavaScript library to le navigateur, it compiles votre components bas to petit, plain JavaScript at construire temps. Que rend Svelte pages fast.

Mais “rapide” et “search-friendly” ne sont pas le même chose. A plain Svelte app est client-side rendu — le serveur sends a nearly vide page, et JavaScript fills dans le contenu une fois il charge dans le navigateur. Si a robot d’exploration semble à le raw HTML, il y a presque rien là.

SvelteKit est le official framework construit on top de Svelte. Il fait le chose que matters la plupart pour le SEO: il renders votre pages on le serveur premier, donc le HTML que arrives déjà a votre contenu, votre titres, et votre liens dans il. Ce est le par défaut behavior. Si vous êtes building a site que nécessite à montrer up dans Google, vous vouloir SvelteKit, pas bare Svelte.

Pourquoi ce matters pour search

• Google peut exécuter JavaScript, donc il va eventually voir a client-rendu Svelte page — mais il y a a delay, et delay hurts fresh contenu.
• Bing et autre moteur de recherches sont moins fiable à running JavaScript.
• AI robots d’exploration (GPTBot, ClaudeBot, PerplexityBot, et similaire) généralement récupérer static HTML, et rendu behavior varies par provider et changements over temps — actuel provider documentation ne fait pas establish un shared rendre étape vous pouvez count on filling dans a blank shell.

SvelteKit’s rendu côté serveur sidesteps tout de ce. Le contenu est dans le HTML depuis le commencer, donc chaque kind de robot d’exploration peut lire il sans selon a rendre étape il peut or peut pas perform.

The simple checklist

• Construire avec SvelteKit, pas plain Svelte, pour contenu que nécessite à classer.
• Donner chaque page a unique <title> et <meta name="description"> en utilisant SvelteKit’s <svelte:head> element.
• ne pas turn off rendu côté serveur (ne pas utiliser “SPA mode”) pour pages vous vouloir trouvé.
• Créer a sitemap et a robots.txt (SvelteKit ne fait pas faire ces pour vous).
• ne pas bloquer votre JavaScript or CSS fichiers dans robots.txt.

Vouloir le deeper version — le four rendu modes, le adapter trade-offs, le ssr: false trap, et le charger-function modèle pour metadata? Switch à le Avancé tab.

TL;DR — Svelte SEO est vraiment a SvelteKit conversation. Bare Svelte est CSR-seulement — contenu n’est pas dans le raw HTML. SvelteKit defaults à SSR, prend en charge prerendering (SSG) per route, et lets vous mix modes. Manage metadata avec <svelte:head> et feed il depuis +page.server.js charger functions donc il lands dans le initial HTML. Le sharpest trap: adapter-static avec ssr: false fait pas prerender — il produces vide shells; SSR doit stay on during le construire. SvelteKit’s propre docs warn SPA fallback a “grand negative performances et SEO impacts.” Utiliser History API routing (le par défaut), configurer trailingSlash, et pick an adapter à match — static pour contenu, node/vercel/cloudflare pour SSR.

«## Svelte is not SvelteKit — and for SEO that’s everything » (Traduction) (Résumé en français de la section dix-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Svelte is a compiler. It turns your .svelte components into lean vanilla JavaScript with no virtual DOM and no runtime library shipped to the browser. That gives Svelte a real performance edge — but it’s a bundle-size optimization, not a rendering one. A plain Svelte app (Vite-bundled, no meta-framework) is still a client-side-rendered SPA: the server returns a blank HTML shell and the browser constructs the page. View source on one and your content isn’t there. » (Traduction) (Résumé en français de la section vingt, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«This is the #1 source of confusion when people search “Svelte SEO.” The compile step doesn’t put content in the HTML. SvelteKit does. SvelteKit is Svelte’s official meta-framework — the equivalent of Next.js for React or Nuxt for Vue — and it renders pages on the server by default, shipping fully populated HTML before any JavaScript runs. It adds SSR, static prerendering, file-based routing, load functions, and deployment adapters. The headline: bare Svelte = CSR-only; SvelteKit = SSR-first. Everything else in this guide assumes SvelteKit. » (Traduction) (Résumé en français de la section vingt et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Two scoping notes worth stating precisely, because they’re where generic “Svelte SEO” advice goes wrong: SvelteKit’s rendering options (ssr, csr, prerender, trailingSlash) are set per route and inherit hierarchically — a +layout.js or +layout.server.js can set a default for everything beneath it, and a child route can override it. So “is this SvelteKit site SEO-friendly” isn’t a project-level question; check the specific route. And of SvelteKit’s rendering options, it’s specifically ssr: false — not SSR being merely absent, and not “using SvelteKit” in general — that the docs tie to an empty output: “If you set ssr to false, it renders an empty ‘shell’ page instead.” This guide is current for Svelte 5.x and SvelteKit 2.x (the current majors as of this update); Svelte 5 made runes the default reactivity model, but runes are a component-authoring concern, not a rendering mode — they don’t change any of the SEO guidance below. » (Traduction) (Résumé en français de la section vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Why the rendering mode matters comes straight from how search engines work. Google processes JavaScript in three phases — crawling, rendering, and indexing — and “all pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” The render queue adds a delay, and as Google’s own guidance puts it, “server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.” That last clause is doing a lot of work in 2026 — see the AI-crawler section. » (Traduction) (Résumé en français de la section vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The four rendering modes in SvelteKit » (Traduction) (Résumé en français de la section vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«SvelteKit’s strength is that rendering is a per-route decision via page options. These options are hierarchical: set a default in a +layout.js/+layout.server.js and every nested route inherits it, unless a child route exports its own value to override it. Check the option that actually applies to the specific route you care about — not just the value set at the top of the project. » (Traduction) (Résumé en français de la section vingt-cinq, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- SSR (the default). Pages are rendered server-side and the full HTML is in the initial response. Best for dynamic, personalized, or frequently changing content. This is on unless you turn it off. » (Traduction) (Résumé en français de la section vingt-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Prerender (export const prerender = true). Pages are generated as static HTML at build time. Maximum speed and maximum crawlability — ideal for blog posts, docs, and marketing pages. Crucially, prerendering is SSR run at build time, so SSR must remain enabled for it to work. » (Traduction) (Résumé en français de la section vingt-six, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- SPA fallback (ssr: false). A single-page-app shell with no server rendering. The SvelteKit docs are blunt that this mode “has large negative performance and SEO impacts” and is really meant for things like wrapping in a mobile app — not for content you want indexed. » (Traduction) (Résumé en français de la section vingt-six, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Hybrid. Mix modes per route: prerender your marketing pages, SSR your product pages, run an SPA-style admin behind a login. This is SvelteKit’s killer feature — you don’t pick one rendering mode for the whole site. » (Traduction) (Résumé en français de la section vingt-six, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«## The ssr: false trap (the mistake to avoid) » (Traduction) (Résumé en français de la section vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Ce est le la plupart expensive misunderstanding dans SvelteKit SEO, donc il obtient son propre section. Personnes reach pour adapter-static à “make a static site,” et alors définir ssr: false thinking ils sont getting prerendered HTML. Ils ne sont pas.

Prerendering est rendu côté serveur executed à construire temps. Si vous disable SSR, là n’est pashing à rendre — le docs sont explicit que ssr: false “renders an vide ‘shell’ page à la place,” et c’est exactly ce que adapter-static alors ships as votre prerendered sortie. Le contenu seulement apparaît une fois le client-side JavaScript exécute, qui puts vous correct back dans CSR territory (avec tout son robot d’exploration problèmes) despite having a “static” construire. Le règle: avec adapter-static, laisser ssr on (son par défaut) donc prerendering outputs réel HTML. Utiliser ssr: false seulement quand vous genuinely vouloir an SPA shell et accept le SEO coût.

Managing metadata with <svelte:head>

SvelteKit a a special element, <svelte:head>, que injects contenu dans le document <head> — et vous ne pas besoin a tiers library à manage votre titre et meta balises. Chaque page devrait ont a unique <title> et <meta name="description">, plus canonical, Ouvrir Graph, Twitter Card, hreflang, robots directives, et JSON-LD as nécessaire.

Le modèle le official docs recommend pour dynamic metadata:

1. Retourner SEO metadata from a +page.server.js load() function.
2. Accès it via page.data in votre layout.
3. Render it in <svelte:head> in the root +layout.svelte.

<!-- +layout.svelte -->
<script>
  import { page } from '$app/state';
</script>

<svelte:head>
  <title>{page.data.title}</title>
  <meta name="description" content={page.data.description} />
  <link rel="canonical" href={page.data.canonical} />
</svelte:head>

Si vous’d plutôt utiliser a component wrapper, le tiers svelte-seo package wraps <svelte:head> avec props pour le courant balises — mais c’est a convenience, pas a requirement.

<svelte:head> obtient votre balises dans le head; il ne fait pas vérifier vous obtenu les correct. c’est encore votre job: confirmer chaque route renders a unique titre et description (pas un inherited depuis le layout par accident), que le canonical vous emit est consistent entre le direct-requête HTML et ce que a client-side navigation renders, et que robots directives et JSON-LD sont présent dans le raw réponse — pas seulement visible après hydration.

Charger functions: où vous récupérer SEO données matters

Ce est le metadata bug que bites personnes. +page.server.js load() exécute on le serveur, donc son données est dans le initial HTML réponse. +page.js load() exécute on le serveur pour le premier rendre et on le client during client-side navigation. Le mistake est fetching votre titre/description/canonical dans a <script> bloquer avec onMount() — que exécute client-side seulement, donc le initial HTML ships avec aucun metadata et le robot d’exploration voit rien on le premier récupérer. Récupérer SEO-critical données dans a load function (serveur charger pour n’importe quoi que doit être dans le premier réponse), pas dans onMount.

ne pas assume le fichier nom alone proves le boundary, though — +page.js load() aussi exécute on le serveur pour le premier requête, alors re-exécute client-side on navigation, et son retourner valeur a à survive serialization à être reused safely on le client. Si SEO-critical données ever dépend on a valeur que n’est pas safely serializable, vérifier les deux le direct-requête HTML et a client-navigated view de le même route, pas simplement un or le autre.

Routing and Structure d’URL

• Fichier-based routing avec [param] pour dynamic segments donne vous clean, predictable URLs.
• History API routing est le par défaut — SvelteKit ne fait pas utiliser hash/fragment routing, et c’est exactly ce que vous vouloir. Google ne peut pas reliably resolve hash-based (#/page) URLs, donc History API routing est le SEO-sûr choice et SvelteKit rend il le par défaut.
• trailingSlash dans svelte.config.js accepts 'always', 'never', or 'ignore'. SvelteKit handles le canonical redirection pour vous, mais leaving il misconfigured (surtout 'ignore') peut créer duplicate-contenu variants. Pick un et être consistent.
• Dynamic routes vous vouloir prerendered besoin an entries function à enumerate le paths à construire temps, or SvelteKit ne va pas know qui URLs à generate.

Choosing an adapter pour le SEO

Le adapter decides comment et où votre SvelteKit app est deployed, et que a SEO consequences (mostly via TTFB, qui feeds LCP):

Pour a blog or docs site, adapter-static avec prerendering donne vous maximum speed et crawlability. Pour dynamic sites, adapter-cloudflare or adapter-vercel put SSR à le edge, qui peut shrink TTFB et aider Plus grand affichage de contenu — mais le adapter seulement picks le deployment shape. Réel TTFB dépend on votre données fetching, mise en cache, et le runtime’s cold-commencer behavior, donc mesurer le deployed page plutôt que assuming le adapter alone delivers le win.

«An adapter is a boundary, not just a deploy target: streaming, the filesystem, caching, edge/runtime APIs, redirects, and error handling can all behave differently between adapters. A route that looks correct with the local dev server or adapter-node isn’t guaranteed to behave identically once deployed through adapter-cloudflare or adapter-vercel — test the production build on the actual target, not just npm run preview. » (Traduction) (Résumé en français de la section quarante-six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Sitemaps and robots.txt » (Traduction) (Résumé en français de la section quarante-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«SvelteKit has no built-in sitemap or robots.txt — like a headless setup, you build them explicitly. » (Traduction) (Résumé en français de la section quarante-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«- Sitemap, manual: create src/routes/sitemap.xml/+server.js that returns the XML. Add export const prerender = true if you’re on adapter-static. » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Sitemap, dynamic: a server-rendered endpoint that queries your CMS/database and returns fresh XML on each request — best for large or fast-changing sites. » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Sitemap, packages: svelte-sitemap scans routes post-build (for SSG), and sveltekit-static-sitemap generates from prerendered routes. » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- robots.txt: drop a static file in static/ (served at /robots.txt automatically) or generate it from a src/routes/robots.txt/+server.js endpoint. Whichever you choose, don’t block your .js/.css — Google won’t render from blocked files. » (Traduction) (Résumé en français de la section quarante-neuf, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Performance and Core Web Vitals » (Traduction) (Résumé en français de la section cinquante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«SvelteKit’s compiler and framework mechanics give you a structural head start on performance, and Core Web Vitals are a ranking input — but the mechanics themselves don’t guarantee a score. The compiler outputs vanilla JS with no virtual DOM and no runtime library, so a typical SvelteKit page ships less JavaScript than an equivalent React-based app; automatic per-route code splitting, built-in asset and link preloading, file-hashing for long-lived caching, and edge deployment via several adapters are all available. What you build with those mechanics — page weight, image handling, third-party scripts, hydration cost, and the deployment target you actually choose — still decides your measured CWV and your rankings. Treat the framework as removing obstacles, not as delivering the result. The SvelteKit docs point you at the right measurement tools: “Google’s PageSpeed Insights and WebPageTest are excellent ways to understand the performance characteristics of a site.” Image optimization is available via @sveltejs/enhanced-img. » (Traduction) (Résumé en français de la section cinquante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«## AI crawlers and the SSR imperative » (Traduction) (Résumé en français de la section cinquante-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Here’s the 2026 wrinkle the older SvelteKit SEO guides miss. Rendering behavior for GPTBot (OpenAI), ClaudeBot (Anthropic), PerplexityBot, and the Bingbot fetch behind Copilot is provider- and version-specific, and current provider documentation doesn’t establish one shared render step you can rely on. Treat “generally fetches static HTML without executing JavaScript” as the safe planning assumption, not a guarantee about every provider forever. A CSR route (bare Svelte, or SvelteKit with ssr: false) ships every one of these crawlers the same empty shell a first-fetch Googlebot request sees; SvelteKit’s default SSR puts your content in the raw HTML so no crawler has to depend on a render step at all. That’s the argument for keeping SSR on for anything you want AI systems to see — not a promise that SSR guarantees inclusion in an AI answer, which depends on factors well beyond rendering. » (Traduction) (Résumé en français de la section cinquante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Courant SvelteKit SEO mistakes

• Fetching SEO données dans onMount() au lieu de a serveur charger function — metadata n’est pas dans le initial HTML.
• Shipping SPA fallback mode (ssr: false) pour contenu vous vouloir ranked.
• adapter-static avec ssr: false — vide shells, pas prerendered pages.
• Blocking JS/CSS dans robots.txt — breaks rendu.
• Skipping trailingSlash configuration — duplicate-contenu variants.
• En utilisant hash/fragment routing — Googlebot ne peut pas resolve ceux URLs (SvelteKit’s History API par défaut déjà protège vous ici).

Si vous êtes coming à ce depuis le broader framework angle, Svelte/SvelteKit est un de le decoupled frontends a CMS headless pairs avec, et le rendu-mode logic ici est le même logic que governs JavaScript SEO généralement — ceux topics actif alongside ce un dans le cluster.

AI summary

A condensed prendre on the Avancé version:

«- Svelte ≠ SvelteKit. Bare Svelte compiles to lean vanilla JS but is CSR-only — content isn’t in the raw HTML. SvelteKit renders SSR by default and ships full HTML. Use SvelteKit for anything that must rank. » (Traduction) (Résumé en français de la section soixante et un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Why rendering mode matters: Google queues all 200 pages for rendering (delay); Bing is less reliable at JS; AI-crawler rendering (GPTBot, ClaudeBot, PerplexityBot) is provider-specific and generally treated as fetch-only. SSR/prerender puts content in the first response so no crawler depends on a render step. » (Traduction) (Résumé en français de la section soixante et un, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Four modes: SSR (default), prerender/SSG (prerender = true, build-time HTML), SPA fallback (ssr: false, docs warn “large negative performance and SEO impacts”), and hybrid (mix per route — SvelteKit’s killer feature). » (Traduction) (Résumé en français de la section soixante et un, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- The trap: adapter-static + ssr: false produces empty shells, not prerendered HTML. Prerendering is SSR at build time — keep SSR on. » (Traduction) (Résumé en français de la section soixante et un, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Metadata: manage <title>/meta with <svelte:head> (no library needed). Feed it from a +page.server.js load function, not onMount() (client-only). » (Traduction) (Résumé en français de la section soixante et un, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Routing: History API by default (good — hash routing is bad for SEO); configure trailingSlash; prerendered dynamic routes need an entries function. » (Traduction) (Résumé en français de la section soixante et un, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Adapters: adapter-static (SSG, content sites) vs. adapter-node/vercel/ cloudflare (SSR; edge adapters can cut TTFB, which helps LCP — but measure the deployed route, since adapters differ in streaming, caching, and runtime behavior). » (Traduction) (Résumé en français de la section soixante et un, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- No built-in sitemap/robots.txt — build them (manual +server.js route, dynamic endpoint, or a package). Never block .js/.css. » (Traduction) (Résumé en français de la section soixante et un, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.) «- CWV head start: compiler output ships less JS than React; code splitting, preloading, caching, edge deployment are all available — but page weight, images, third-party scripts, and your deployment choice still decide the measured score. » (Traduction) (Résumé en français de la section soixante et un, sous-partie neuf : le texte source est conservé pour vérification lors de la relecture francophone.)

Documentation officielle

Primary-source documentation depuis SvelteKit et le moteur de recherches.

SvelteKit

• SEO • SvelteKit Docs — SSR-par-default, <svelte:head> pour metadata, trailing-slash normalization, performances, et le sitemap endpoint modèle.
• Page options (prerender, ssr, csr) • SvelteKit Docs — comment définir rendu mode per route, et le SPA-mode warning.
• Static site generation (adapter-static) • SvelteKit Docs — prerendering à static fichiers et le ssr requirement.
• Chargement données • SvelteKit Docs — serveur vs. universal charger functions (où votre SEO données devrait être récupéré).
• Performances • SvelteKit Docs — code splitting, preloading, mise en cache, et measurement outils.

Google

• Comprendre JavaScript SEO Basics — le three-phase traiter, le rendre queue, History API routing, et le “pas tous bots peut exécuter JavaScript” guidance.
• Le nouveau evergreen Googlebot — Googlebot’s déplacer à evergreen Chromium et ce que il encore ne fait pas prise en charge.
• SEO Guide pour Web Developers — SSR/prerendering recommendation pour indexable contenu.

Quotes from the source

On-le-record statements depuis le SvelteKit docs et Google. Chaque lien est a deep lien que jumps à le quoted passage on le page source.

SvelteKit docs — rendering & SEO

• “Ce option a grand negative performance et SEO impacts” — on running an app as a client-side-rendu SPA (ssr: false fallback). Jump à citation
• “Google’s PageSpeed Insights et WebPageTest sont excellent ways à understand le performance characteristics de a site.” Jump à citation

Google — JavaScript & rendering

«- “All pages with a 200 HTTP status code are sent to the rendering queue, no matter whether JavaScript is present on the page.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Server-side or pre-rendering is still a great idea because it makes your website faster for users and crawlers, and not all bots can run JavaScript.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Google Search won’t render JavaScript from blocked files or on blocked pages.” Jump to quote » (Traduction) (Résumé en français de la section soixante-quinze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

Patrick Stox (my propre fonctionner — JavaScript SEO: A Definitive Guide)

«- “JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to, and there’s a bit of a learning curve.” » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- On rendering modes: “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines.” » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- On CSR: “The most problematic one is going to be full client-side rendering where all of the rendering happens in the browser. While Google will probably be OK client-side rendering, it’s best to choose a different rendering option to support other search engines.” » (Traduction) (Résumé en français de la section soixante-dix-sept, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

SvelteKit SEO checklist

A rapide réussir to confirmer moteur de recherches and AI robots d’exploration peut voir votre SvelteKit content:

• vous êtes en utilisant SvelteKit, pas bare Svelte, pour n’importe quoi que nécessite à classer.
• SSR est on (le par défaut) pour indexable routes — aucun accidental ssr: false.
• Contenu-heavy pages utiliser prerender (export const prerender = true) où ils peut.
• Avec adapter-static, ssr est left on donc prerendering outputs réel HTML (pas vide shells).
• Chaque page a a unique <title> et <meta name="description"> via <svelte:head>.
• SEO metadata est récupéré dans a +page.server.js charger function, pas dans onMount().
• Canonical, Ouvrir Graph, et JSON-LD sont rendu serveur-side, pas injected client-side.
• trailingSlash est définir explicitly dans svelte.config.js.
• Prerendered dynamic routes ont an entries function enumerating paths.
• A sitemap exists (+server.js route or package) et a robots.txt est dans static/ or a route.
• robots.txt ne fait pas bloquer .js or .css.
• Routing est History API (SvelteKit par défaut) — aucun hash/fragment routes.
• Vous verified le rendu HTML dans GSC Inspection d’URL (contenu + metadata présent on premier récupérer).

The mental models

1. Le Svelte-vs-SvelteKit fork. Avant n’importe quoi sinon, réponse: bare Svelte or SvelteKit? Bare Svelte est CSR-seulement — contenu n’est pas dans le HTML. SvelteKit est SSR-premier. Nearly chaque “Svelte SEO problème” traces back à quelqu’un en utilisant plain Svelte (or disabling SvelteKit’s SSR) pour contenu que nécessite à classer.

2. Prerendering = SSR à construire temps. “Static” doesn’t mean “aucun rendu.” Prerendering exécute votre serveur rendre à construire temps et saves le HTML. c’est pourquoi ssr: false ne peut pas prerender — il y a rien à rendre. Garder SSR on; choisir quand il exécute (requête temps = SSR, construire temps = prerender).

3. Le rendu-mode-per-route décision. SvelteKit lets vous choisir per route, donc match mode à contenu:

• Static-ish contenu (blog, docs, marketing) → prerender (SSG).
• Fresh/dynamic contenu (listings, personalized pages) → SSR.
• Behind-a-login, pas-indexé UI → SPA fallback est acceptable là seulement.

4. HTML-premier metadata. N’importe quoi a robot d’exploration nécessite — titre, description, canonical, JSON-LD — belongs dans le serveur-rendu HTML via <svelte:head> fed par a serveur charger function. onMount() metadata est vu late par Google, et providers que treat AI robots d’exploration as récupérer-seulement ne va pas voir il à tout.

5. Le adapter = le deployment shape. Le adapter decides où SSR exécute (or si c’est tout static). Static pour contenu sites; node/vercel/cloudflare pour SSR. Edge adapters peut shrink TTFB, qui peut aider LCP — mais le adapter est un entrée; votre données fetching, mise en cache, et le runtime’s cold-commencer behavior decide ce que vous en réalité mesurer. Adapters aussi differ dans streaming, filesystem accès, et erreur handling, donc vérifier production behavior per adapter plutôt que assuming fonctionnalité parity.

6. Plan pour robots d’exploration que ne pas exécuter votre JavaScript. Rendu behavior pour AI robots d’exploration est provider- et version-spécifique, et actuel provider documentation ne fait pas guarantee a shared rendre étape. Le sûr planning assumption est récupérer-seulement: si contenu n’est pas dans le initial HTML, treat il as invisible à que class de robot d’exploration. SSR/prerender supprime le dependency on quelconque robot’s rendu capability à tout — le strongest lever vous ont, pas a guarantee à propos de ce que quelconque un AI système fait avec le résultat.

SvelteKit SEO — cheat sheet

Rendering modes (définir per route viune page options)

The trap

• adapter-static + ssr: false → vide shells, pas prerendered HTML. Garder ssr on with adapter-static.

Adapters

Rapide règles

• Metadata → <svelte:head> (aucun library nécessaire); feed depuis +page.server.js charger, jamais onMount(). Confirmer chaque route’s titre/description est unique.
• Routing → History API (par défaut). Jamais hash/fragment routes.
• Définir trailingSlash explicitly.
• Prerendered dynamic routes → ajouter an entries function.
• Aucun built-dans sitemap/robots.txt — construire les (+server.js route or package).
• Jamais bloquer .js/.css dans robots.txt.
• AI robots d’exploration → généralement récupérer-seulement, provider-spécifique → garder SSR on donc contenu ne fait pas depend on a rendre étape.
• Options (ssr/csr/prerender/trailingSlash) sont hierarchical — vérifier le valeur que s’applique à le spécifique route, pas simplement le project par défaut.

Plain Svelte or SvelteKit?

Svelte SEO mistakes

• En utilisant plain client-seulement Svelte pour recherche landing pages. Déplacer rankable routes à SvelteKit SSR or prerendering.
• Paramètre ssr = false globally. Que turns le site dans an SPA et supprime complet initial HTML. Scope client-seulement behavior à routes que ne faites pas besoin recherche visibility.
• Updating <svelte:head> seulement après navigateur récupère. Charger metadata avec le même serveur/construire données que renders lune page.
• En utilisant hash-based URLs pour contenu routes. Hash fragments ne sont pas séparé serveur routes. Utiliser normal pathname routing.
• Testing seulement après hydration. Comparer raw HTML avec rendu DOM donc client code ne peut pas hide manquant source contenu.

Raw HTML is an vide app shell

Probable causer: plain Svelte SPA sortie or ssr = false. Corriger: utiliser SvelteKit SSR/prerendering pour le route et déplacer essential chargement à serveur-compatible load. Confirmer: curl renvoie le titre, contenu, et lien internes.

Titles and canonicals apparaître seulement après JavaScript

Probable causer: head valeurs depend on client lifecycle or navigateur-seulement fetching. Corriger: retourner le données during SSR/prerender et rendre il via <svelte:head>. Confirmer: raw et rendu head valeurs agree.

A dynamic route is manquant from a static construire

Probable causer: le prerenderer ne peut pas découvrir le parameterized chemin. Corriger: expose crawlable liens or configurer entries, or rendre que route on demand. Confirmer: le deployed route renvoie a complet 200 page.

Lune page fonctionne locally but fails après deployment

Probable causer: adapter mismatch, manquant serveur prise en charge, or environment-dependent données fetching. Corriger: tester le production adapter sortie et son runtime variables. Confirmer: production source HTML matches le testé construire.

Confirmer SvelteKit is en réalité serving rendered HTML

Le entier point de SvelteKit’s SSR est que contenu est dans le raw HTML — avant quelconque JavaScript exécute. Le fastest façon à confirmer vous n’a pas accidentally ship a CSR shell est à récupérer le raw réponse et regarder pour votre contenu. A plain curl ne fait pas exécuter JavaScript, donc il voit exactly ce que a non-rendu robot d’exploration voit.

macOS / Linux

# Raw HTML as the server sends it (no JS executed)
curl -sL "https://example.com/your-page/" -o raw.html

# Is your real content in the raw HTML? (empty result = you're shipping a CSR shell)
grep -o "Your unique headline text" raw.html

# Is your title/description in the initial response?
grep -iE "<title>|name=\"description\"" raw.html

Windows (PowerShell)

Invoke-WebRequest -Uri "https://example.com/your-page/" -OutFile raw.html
Select-String -Path raw.html -Pattern "Your unique headline text"
Select-String -Path raw.html -Pattern "<title>","name=`"description`""

Si votre headline et metadata sont présent dans raw.html, SSR/prerendering est fonctionnement. Si ils sont manquant mais visible dans le navigateur, votre contenu dépend on client-side rendu — vérifier que ssr n’est pas définir à false et que vous êtes pas fetching contenu seulement dans onMount().

Vérifier you’re pas blocking JS/CSS

curl -sL "https://example.com/robots.txt" | grep -iE "disallow.*\.(js|css)|Disallow:\s*/(_app|assets)"

A Disallow matching /_app/ (SvelteKit’s bundled output) or votre CSS signifie Google can’t render lune page — almost toujours a mistake.

Outils pour debugging SvelteKit SEO

• Inspection d’URL (Recherche Google Console) — le source de truth. Exécuter a actif tester, alors vérifier le rendu HTML, screenshot, et page resources à confirmer votre contenu et metadata sont présent (et que rien est bloqué).
• PageSpeed Insights — le SvelteKit docs explicitly recommend il; vérifications Core Web Vitals (LCP/INP/CLS) que SvelteKit’s lean sortie est construit à win.
• WebPageTest — le autre outil le SvelteKit docs nom; waterfall + filmstrip view pour diagnosing TTFB et rendre timing.
• Résultats enrichis Tester — rapide façon à confirmer JSON-LD fait il dans le rendu sortie.
• Screaming Frog SEO Spider — explorer avec JS rendu on/off à diff raw vs. rendu HTML à travers le entier SvelteKit site.
• Ahrefs Site Audit — surfaces broken canonicals, manquant metadata, redirection chains, et indexability problèmes à scale.
• View source / curl — le quickest “est mon contenu dans le raw HTML?” vérifier (voir le Scripts tab).

Testez vos connaissances: Svelte SEO

Five rapide questions on how Svelte and SvelteKit affecter search visibility. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon connexe writing

• JavaScript SEO: A Definitive Guide — mon complet référence on rendu, DOM parity, et le rendu-mode trade-offs que underpin tout ici. Il mentions Svelte alongside React, Vue, et Angular as frameworks avec head/meta modules pour le SEO.
• Le Beginner’s Guide à SEO technique — où rendu et exploration fit dans le bigger picture.

Mon speaking

• Comment Recherche Fonctionne (SlideShare) — mon walkthrough de exploration, rendu, indexation, et classement. (Mon standing disclaimer s’applique: “This is my understanding of systems… not going to be 100% complete or accurate.”)

«From around the industry » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- SEO • SvelteKit Docs — the official, authoritative starting point: SSR by default, <svelte:head>, trailing slashes, and the sitemap pattern. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Page options (prerender, ssr, csr) • SvelteKit Docs — the per-route rendering controls and the SPA-mode SEO warning, in the team’s own words. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Understand JavaScript SEO Basics (Google Search Central) — the render queue, “not all bots can run JavaScript,” and the History API guidance. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- SvelteKit SEO: Your Secret Weapon (Okupter) — a practitioner guide covering meta tags, prerendering, rendering modes, structured data, and sitemaps. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- SvelteKit SEO: Search Engine Optimization Metadata (Rodney Lab) — the essential meta tags, an SEO component pattern, social cards, and language declaration. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- How to add a basic SEO component to SvelteKit (Thilo Maier) — a code-focused walkthrough of a reusable SEO component. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Creating a Sitemap in SvelteKit (Bryan Anthonio) — a clear, current guide to the +server.js sitemap-endpoint approach. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.) «- Rich Harris explains why SvelteKit pushes for SSR (DEV Community) — context on why SvelteKit’s creator made SSR the default and pushes against SPA/CSR. » (Traduction) (Résumé en français de la section cent quarante-trois, sous-partie neuf : le texte source est conservé pour vérification lors de la relecture francophone.)

Journal des modifications