Guide Nuxt SEO

TL;DR — Nuxt est le framework construit on top de Vue, et c’est bon pour le SEO pour un principal raison: on a route que garde le par défaut, il construit pages on le serveur, donc moteur de recherches obtenir a finished HTML page au lieu de a blank un ils’d ont à fill dans themselves. c’est a per-route paramètre, pas a site-wide guarantee — routeRules or a mondial ssr: false peut turn quelconque donné route back dans a plain-Vue-style vide shell. Vérifier le réel route, pas simplement le project nom. Le la plupart important choice vous’ll faire est comment chaque route obtient rendu; tout sinon (meta balises, sitemaps) comes après que.

Pourquoi Nuxt est bon pour le SEO — on le routes que garder le par défaut

Vue, on son propre, construit a unique-page app: le serveur sends an presque-empty HTML shell, et JavaScript fills dans le contenu une fois il exécute dans le navigateur. c’est tricky pour recherche, parce que lune page semble vide jusqu’à le JavaScript executes.

«Nuxt is Vue’s “meta-framework” — a fuller toolkit built around Vue — and its default fixes that problem. Nuxt renders your pages on the server first (server-side rendering, or SSR), so when Google or a visitor asks for a page on a route that hasn’t been switched off SSR, they get the complete HTML right away. Preuve à l’appui de cette affirmation Nuxt universal rendering returns server-rendered HTML to the browser by default. Portée : Nuxt default universal rendering. Niveau de confiance : élevé · Vérifié : 2026-07-14 Nuxt: Rendering modes No waiting for JavaScript. That’s the single biggest reason a Nuxt site can be easier to get indexed than a plain Vue app — but it’s a route-by-route outcome, not something the framework name guarantees. A route with ssr: false, or one that leans on <ClientOnly> for its main content, gives up that advantage and ships the same empty-shell problem plain Vue has. » (Traduction) (Résumé en français de la section six, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

The un decision que matters la plupart: rendering, per route

Quand someone demande pour a spécifique page, où fait its HTML obtenir construit? That’s a routeRules-level question, pas a project-wide un — a Nuxt app peut mix modes à travers routes. Nuxt donne vous a few options:

• Rendu côté serveur (SSR) — le par défaut. Le serveur construit le complet page on chaque requête. Great pour le SEO.
• Static generation (SSG) — exécuter nuxt generate et Nuxt construit tout votre pages dans plain HTML fichiers ahead de temps. Aussi great pour le SEO, et perfect pour blogs et docs que ne pas modifier chaque minute.
• SPA mode — lune page est construit dans le navigateur, comme plain Vue. Éviter ce pour n’importe quoi vous vouloir trouvé dans recherche.

Le bon news est le defaults sont déjà pointed le correct façon. Vous mostly ont à éviter switching les off.

Ajout titles and meta tags

Dans Nuxt vous définir votre page titre et meta description avec a built-dans function appelé useSeoMeta(). Preuve à l’appui de cette affirmation Nuxt provides useSeoMeta for defining SEO and social metadata. Portée : Current Nuxt composable. Niveau de confiance : élevé · Vérifié : 2026-07-14 Nuxt: useSeoMeta Vous drop il dans une page et réussir dans votre titre, description, et social-share image:

useSeoMeta({
  title: 'My Page Title',
  description: 'A concise, page-specific summary with the key information first',
})

c’est le modern, recommended façon. (il y a an older function appelé useHead() que encore fonctionne et est utilisé pour autre choses dans lune page’s <head>, mais pour le SEO meta balises reach pour useSeoMeta().) Google a aucun fixed meta-description character limite; extraits sont requête-dependent et truncated à fit le device, donc preview pages importantes dans leur prévu langue et script au lieu de coding à a quota.

Le optional ajouter-on: le Nuxt SEO modules

«Nuxt core doesn’t generate a robots.txt, an XML sitemap, social-share images, structured data, or canonical URLs — those are jobs for separate, optional packages, not something nuxt.config.ts gives you by default. A developer named Harlan Wilton maintains a free, community bundle of those packages — installed as @nuxtjs/seo — that covers all of them at once. It’s a third-party toolkit, not part of Nuxt itself, so installing it doesn’t automatically make any of that output correct; you still confirm the sitemap, robots rules, and schema it generates match what you actually want. » (Traduction) (Résumé en français de la section seize, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

The chose personnes obtenir incorrect

Personnes assume “Vue/Nuxt ne peut pas être dans Google.” Que était sort de vrai pour plain Vue apps années ago — il n’est pas vrai pour Nuxt avec son serveur rendu. Le réel mistakes sont choses comme turning SSR off par accident, or blocking votre JavaScript fichiers donc Google ne peut pas construire lune page.

Vouloir le deeper version — le complet menu de rendu modes, le module ecosystem dans detail, Core Web Vitals, et le Erreurs fréquentes avec corrections? Switch à le Avancé tab.

TL;DR — Nuxt’s par défaut est rendu côté serveur, donc a route que garde que par défaut obtient a complet DOM au lieu de le vide shell a plain Vue SPA ships — mais c’est a per-route résultat: ssr: false or a routeRules override peut turn quelconque route dans CSR or hybrid, donc tester le réel route, pas le project nom. Rendu stratégie est le foundational décision — SSR (par défaut), SSG (nuxt generate), or hybrid routeRules — parce que meta, schema, et sitemaps tout come après il. Utiliser useSeoMeta() pour meta balises (useHead() pour le rest de le head, serveur-seulement variants quand vous ne pas besoin reactivity), et treat Harlan Wilton’s @nuxtjs/seo bundle as an optional tiers toolkit pour robots/sitemap/OG/schema/canonical — pas partie de Nuxt core, et pas proof son sortie est correct jusqu’à vous vérifier il. Jamais utiliser dynamic rendu (Google deprecated il). AI-robot rendu varies par provider — SSR/SSG maximizes raw-HTML coverage. Au-delà le initial HTML, vérifier hydration/payload, Nitro deployment presets et mise en cache, et direct HTTP status independently — serveur HTML alone ne fait pas prove quelconque de ceux. Le usual JS-SEO règles encore appliquer: réel <a href> liens, ne pas bloquer JS/CSS, watch rendu vs. raw HTML.

Nuxt is Vue’s réponse to the SPA problem

Vue, par itself, ships a application monopage: an HTML shell plus JavaScript que construit le DOM dans le navigateur. Nuxt est le meta-framework on top de Vue (running on le Nitro serveur moteur dans Nuxt 3, avec Nuxt 4 suivant dans 2025), et son entier raison pour existing — depuis an SEO standpoint — est que il renders on le serveur par par défaut. Chaque page arrives as a fully-formed HTML document, qui est exactly ce que Googlebot veut à lire sans having à execute JavaScript premier. Plain Vue SEO est son propre topic avec son propre échec modes; ici Je’m assuming vous avez picked Nuxt precisely donc vous ne pas ont à fight le SPA problème.

Ce est le même point Je faire à propos de JavaScript généralement: “quelconque kind de SSR, static rendu, et prerendering setup est going à être fine pour moteur de recherches. Gatsby, Suivant, Nuxt, etc., sont tout great.” Nuxt’s defaults sont pointed le correct façon. La plupart Nuxt SEO problèmes sont personnes turning ceux defaults off, or layering mistakes on top de les.

Rendu stratégie est le foundation — decided per route, pas per project

Avant meta balises, avant schema, avant sitemaps, le question que decides tout est comment fait le HTML obtenir produced pour ce spécifique route? Nuxt documents universal (serveur) rendu as le app-wide par défaut, mais que par défaut n’est pas a route-level guarantee: a mondial ssr: false switches le entier app à client rendu, et routeRules peut assign a différent mode à quelconque URL modèle. “Ce est a Nuxt app” indique vous rien à propos de comment un particulier page renders — vous ont à vérifier le route. Nuxt donne vous five strategies:

Le official Nuxt docs sont blunt à propos de pourquoi rendu côté client est le incorrect choice pour contenu: “Indexation et updating le contenu delivered via rendu côté client takes plus temps”, whereas avec serveur (universal) rendu “web robots d’exploration peut directement indexer lune page’s contenu.” Preuve à l’appui de cette affirmation Nuxt documents that universal rendering delivers HTML content immediately and allows crawlers to index it directly. Portée : Nuxt rendering; no indexing guarantee. Niveau de confiance : élevé · Vérifié : 2026-07-14 Nuxt: Rendering modes (Nuxt rendu docs.) CSR (ssr: false) est positioned pour back-office, dashboards, et games — pas n’importe quoi vous vouloir indexé.

Hybrid rendu est le power déplacer pour grand sites. Route règles dans nuxt.config.ts let vous définir le rendu et mise en cache mode per URL modèle:

routeRules: {
  '/blog/**':     { prerender: true },        // SSG for the blog
  '/product/**':  { swr: 3600 },              // ISR-style: regenerate hourly
  '/admin/**':    { ssr: false },             // SPA for the admin area
  '/checkout/**': { ssr: true },              // always-fresh SSR
}

swr (stale-tandis que-revalidate) et isr (incremental static regeneration) generate une page statically alors refresh il dans le background — ideal pour élevé page-count e-commerce or news où a complet rebuild on chaque modifier n’est pas practical. Nuxt Islands (<NuxtIsland>) rendre components sans shipping client-side JavaScript, cutting hydration coût et helping INP — le Core Web Vital c’est la plupart souvent le problème on Nuxt apps.

Comment vérifier ce que vous en réalité shipped: View Source montre le raw HTML le serveur sent; si votre contenu est là, vous êtes serveur-rendu. DevTools’ Elements panel montre le rendu DOM. Et GSC’s Inspection d’URL outil montre ce que Google en réalité récupéré et rendu — le source de truth. ne pas confiance “il semble fine dans mon navigateur.”

Comment Googlebot handles a Nuxt app

Google processes quelconque JavaScript app dans three phases — explorer, rendre, indexer — et le catch est timing: rendu se produit dans a queue, pas instantly. As Je put il dans mon JavaScript SEO guide, le renderer est patient — “là est aucun fixed timeout pour le renderer… c’est vraiment patient, et vous ne doit pas être concerned.” Mais patient n’est pas le même as rapide pour fresh contenu. Si vous ship a client-rendu page, votre contenu ne fait pas exist pour Google jusqu’à que rendre wave exécute; SSR et SSG fermer que gap parce que le HTML est complet on le premier récupérer.

Deux plus choses matter à scale. Rendu JavaScript est expensive — depuis mon 2019 JavaScript SEO talk (Ungagged), explorer coûts go up par roughly 20× une fois Google a à rendre (directional, mais le order de magnitude encore holds). Et Google takes le la plupart restrictive directive à travers raw et rendu HTML — donc a noindex injected par JavaScript va win over an index dans le raw HTML, et vice versa. A canonical injected via JavaScript est respected seulement si il y a aucun canonical dans le raw HTML déjà. Garder votre robots et canonical signaux dans le serveur-rendu HTML, qui Nuxt fait pour vous quand SSR est on.

The AI-crawler reality

Ce est le 2026 wrinkle. AI robots d’exploration — GPTBot, ClaudeBot, PerplexityBot, et le rest — généralement ne pas execute JavaScript à tout. Ils indexer le raw HTML et rien sinon. Donc a client-rendu Nuxt page est effectively invisible à AI réponse moteurs. SSR or SSG n’est pas simplement meilleur pour Google ici; c’est le price de entry pour réponse moteur optimization aussi. Si vous vouloir votre contenu cited par ChatGPT, Perplexity, or Claude, il a à être dans le HTML on premier récupérer.

Au-delà le initial HTML: payload, hydration, et code d’états

Getting serveur HTML avec votre contenu dans il est necessary mais pas sufficient — plusieurs choses peut encore go incorrect downstream de que premier réponse, et “Je vérifié View Source” ne fait pas cover les:

• Payload et hydration. Universal rendu sends le HTML et a serialized données payload le client utilise à hydrate — attach event listeners et pick up où le serveur left off — sans re-fetching. Serveur HTML looking correct ne fait pas prove hydration succeeded, que client navigation reproduces le même contenu, or que le payload n’est pas stale. Si une page feels fine on premier charger mais breaks après a client-side route modifier, c’est a hydration/payload problème, pas a rendu-mode problème.
• <ClientOnly> et navigateur-seulement contenu. Wrapping quelque chose dans <ClientOnly> — courant pour navigateur-API-dependent widgets — signifie c’est absent depuis le serveur réponse même on an otherwise-universal route. Si votre principal contenu, a clé lien, or votre meta balises fin up à l’intérieur a client-seulement boundary, robots d’exploration et AI bots que seulement lire le raw HTML miss il, regardless de votre rendu mode paramètre. Inspect le réel réponse, pas simplement le rendu mode config.
• Code d’états et redirections ne sont pas self-certifying. A Nuxt erreur page rendu dans le navigateur, or a navigateTo()/composable-driven redirection, ne fait pas par itself prove ce que HTTP status le direct serveur réponse sent. Google’s guidance est explicit que meaningful code d’états matter pour exploration et indexation — confirmer le réel header avec curl -I, pas ce que le client-rendu erreur page displays.

None de ce est an argument contre universal rendu — c’est le reminder que “le HTML est serveur-rendu” est le premier vérifier, pas le dernier un.

Nitro, deployment presets, et cache boundaries

Nuxt’s serveur sortie est construit par Nitro, et Nitro compiles differently selon le deployment preset vous cible (Node serveur, Cloudflare, Vercel, Netlify, static, et others). Que matters pour le SEO parce que presets et adapters peut differ dans runtime APIs disponible, mise en cache behavior, streaming prise en charge, regional deployment, et filesystem accès — a route règle or serveur handler que fonctionne sous un preset n’est pas guaranteed à behave identically sous un autre. Deux consequences worth testing explicitly plutôt que assuming:

• Cache keys et invalidation sont route-spécifique, pas automatic. swr et isr route règles cache et regenerate sortie, mais a incorrect cache clé, manquant invalidation, or a mise en cache header définir par votre deployment plateforme peut servir stale, personalized, or inconsistent HTML à robots d’exploration. Vérifier le réel réponse age et quelconque Cache-Control/Age headers on a actif URL, pas simplement le routeRules config.
• Production parity n’est pas guaranteed par staging behavior. A route rendu correctement dans local dev or a preview deployment ne fait pas confirmer le production preset produces le même sortie — serveur routes, redirections, et erreur handling actif dans Nitro’s serveur couche, et que couche est le partie la plupart probable à differ par cible. Tester le production URL directement après quelconque deployment modifier, le même façon vous’d vérifier rendu mode.

Meta balises: useSeoMeta() et useHead()

Nuxt’s head management runs on Unhead, and it donne vous two composables pour différent jobs.

useSeoMeta() est le un à reach pour pour le SEO et social meta balises. c’est a flat, type-sûr API avec typed parameters. Preuve à l’appui de cette affirmation useSeoMeta is a typed Nuxt API for SEO and social meta tags. Portée : Current Nuxt composable. Niveau de confiance : élevé · Vérifié : 2026-07-14 Nuxt: useSeoMeta Il aide éviter le classic Ouvrir Graph bug de en utilisant name où vous nécessaire property:

useSeoMeta({
  title: 'My Page Title',
  ogTitle: 'My Page Title',
  description: 'Concise page-specific description with the key information first',
  ogDescription: 'Concise social description tailored to this page',
  ogImage: 'https://mysite.com/og-image.png', // must be an absolute URL
  twitterCard: 'summary_large_image',
})

useHead() est le general-purpose head outil pour tout sinon — scripts, lien balises, corps attributs, et titre templates:

useHead({
  titleTemplate: '%s · My Site Name',
  htmlAttrs: { lang: 'en' },
})

Le fiable layering modèle est: static defaults (charset, viewport, favicon) dans nuxt.config.ts → site-wide titre template et mondial OG defaults dans app.vue → page-spécifique overrides via useSeoMeta() dans lune page component. A courant bug est putting useSeoMeta() dans a layout au lieu de lune page, qui overwrites spécifique page balises avec générique ones. Et since moteur de recherches lire le initial charger, SEO meta généralement ne fait pas besoin à être reactive — useServerHead() skips le client-side re-execution.

Qui API, and ce que it en réalité proves:

Appel un de ces composables indique vous le API ran — il ne fait pas par itself tell vous ce que a direct serveur réponse or a client-side route modifier en réalité emits. Confirmer avec View Source or curl, pas simplement “Je called useSeoMeta().”

Le @nuxtjs/seo module ecosystem (Harlan Wilton) — optional, pas core

Nuxt core ne fait pas ship a sitemap, a robots.txt, OG image generation, or Schema.org out de le box — ceux sont à l’extérieur Nuxt’s propre primitives (useHead, useSeoMeta, route règles, rendu modes). Le community fills que gap avec Harlan Wilton’s @nuxtjs/seo — a séparément-installed, tiers umbrella package (nuxtseo.com, currently à v5.x, actively maintained, targeting Nuxt 3,16+ et Nuxt 4) que bundles six modules. Installing il donne vous sitemap, robots, OG-image, et schema generation — il ne fait pas par itself guarantee le sortie est correct pour votre routes; vérifier ce que il produces le même façon vous’d vérifier n’importe quoi sinon:

Install le entier bundle avec npx nuxt module add seo, or grab individual modules (npx nuxt module add sitemap robots). A quelques behaviors worth knowing:

«- @nuxtjs/sitemap auto-generates from your pages/ directory plus dynamic routes, splits into a sitemap index automatically past 50,000 URLs, supports i18n multi-language sitemaps, and has built-in IndexNow support. One thing to get right: Google ignores changefreq and priority; only an accurate lastmod matters, and only when content genuinely changes. » (Traduction) (Résumé en français de la section soixante, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- @nuxtjs/robots generates robots.txt, the robots meta tag, and the X-Robots-Tag header — and by default it disallows all crawlers on non-production environments, which is exactly the staging-indexation footgun that bites headless builds. It also gives you per-bot rules, so you can block GPTBot specifically while leaving everyone else alone (be intentional — block an AI crawler and it won’t cite you). » (Traduction) (Résumé en français de la section soixante, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- nuxt-seo-utils handles canonical URLs and, usefully, strips tracking parameters (utm_*, fbclid, gclid) from canonicals automatically. » (Traduction) (Résumé en français de la section soixante, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

nuxt/image et Core Web Vitals

@nuxt/image est le image module: automatic responsive srcset, modern formats (WebP/AVIF), built-dans optimization via CDN providers, et lazy chargement. Deux règles carry la plupart de le SEO valeur:

• Jamais lazy-charger le LCP image. Votre hero image devrait charger eagerly; lazy-loading il delays votre Plus grand affichage de contenu.
• Toujours définir width et height donc le navigateur reserves space et vous ne pas prendre a Décalage cumulatif de mise en page hit.

<NuxtImg
  src="/hero.jpg"
  width="1200"
  height="630"
  alt="Descriptive alt text"
  :loading="isHeroImage ? 'eager' : 'lazy'"
  format="webp"
/>

Le 2026 targets à aim pour (p75): LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1. On Nuxt apps, INP est le un que tends à suffer parce que hydration crée entrée lag — qui est exactly ce que Nuxt Islands et <NuxtIsland> sont pour.

Nuxt Content + SEO

Si vous êtes en utilisant @nuxt/content (le markdown/MDX contenu module), le integration avec @nuxtjs/seo est straightforward mais a un ordering gotcha: charger @nuxtjs/seo avant @nuxt/content dans votre modules array. Vous pouvez alors définir SEO dans contenu frontmatter (title, description, robots, ogImage, schemaOrg) et pull il dans votre [slug].vue template avec useSeoMeta() après fetching le contenu. Ce est le Nuxt-native version de le headless-CMS modèle, et le même “rebuild ce que le plugin a fait” discipline s’applique.

Courant Nuxt SEO mistakes

«1. Using SPA mode (ssr: false) for content you want indexed. The most expensive mistake — and the one that makes you invisible to AI crawlers. 2. Relative URLs for OG images. ogImage must be an absolute URL or social previews break. 3. useSeoMeta() in a layout instead of the page — generic tags overwrite page-specific ones. 4. Not verifying rendered HTML — View Source ≠ DevTools ≠ what Google rendered. Use URL Inspection. 5. Blocking JS/CSS in robots.txt — Google won’t render from blocked files. 6. Leaving the staging noindex/disallow in place after launch (or, conversely, forgetting @nuxtjs/robots blocks non-prod by default and wondering why prod is fine but a custom env isn’t). 7. Lazy-loading the LCP image — tanks your LCP. 8. Missing width/height on images — CLS. 9. changefreq/priority in sitemaps — Google ignores them; only lastmod counts. 10. Reaching for dynamic rendering. Google deprecated it — “dynamic rendering is a workaround and not a long-term solution” — and it only serves the engines you configure it for, missing Bing and every AI crawler. With Nuxt you never need it: SSR and SSG already give crawlers complete HTML. » (Traduction) (Résumé en français de la section soixante-neuf, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

llms.txt and AEO

llms.txt est a plain-texte fichier — robots.txt’s cousin — que aide AI outils navigate votre contenu. Le nuxt-llms module auto-generates /llms.txt et /llms-full.txt depuis Nuxt Contenu. As de late 2025 son principal consumers sont MCP serveurs et AI coding outils (Cursor, Claude Code) plutôt que ChatGPT or Perplexity directement, et c’est la plupart utile pour documentation sites et technique blogs — moins donc pour e-commerce or news. Worth ajout si vous êtes a docs/dev site; pas a priority sinon.

Où ce fits

Nuxt SEO est vraiment a concrete application de JavaScript SEO via Nuxt’s propre conventions — et il overlaps heavily avec le SEO pour a CMS headless topic quand votre Nuxt frontend pulls depuis a headless backend. Le principles ne pas modifier; Nuxt simplement donne vous bon defaults et a strong module ecosystem à implement les avec.

AI summary

A condensed prendre on the Avancé version:

«- Nuxt is Vue’s meta-framework, and its SEO advantage is one default: server-side rendering. A route that keeps that default ships complete HTML, not the empty shell a plain Vue SPA ships — but it’s a per-route outcome, not a project-wide guarantee. ssr: false or a routeRules override can flip any route to CSR or hybrid, so verify the actual route. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Rendering strategy is the foundation, decided per route — it decides everything before meta, schema, or sitemaps. Modes: SSR (default), SSG (nuxt generate), hybrid (routeRules), SPA (ssr: false, avoid for indexed content), edge. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Hybrid routeRules mix modes per URL; swr/isr regenerate in the background; Nuxt Islands cut hydration cost and help INP. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Googlebot crawls → renders (queued, not instant) → indexes; takes the most restrictive directive across raw vs. rendered HTML. Rendering is ~20× crawl cost. SSR/SSG close the timing gap. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- AI-crawler rendering is provider-specific — CSR depends on client execution that is not covered by one shared contract, so SSR/SSG maximizes AI visibility. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Beyond first-load HTML: verify hydration/payload independently (server HTML ≠ proof of successful hydration or client-nav parity), watch for <ClientOnly> hiding content from crawlers even on universal routes, and confirm direct HTTP status/redirects with curl -I rather than trusting a client-rendered error page. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nitro and deployment presets (Node, Cloudflare, Vercel, Netlify, static) can differ in runtime APIs, caching, streaming, and regions — test cache headers and production parity per route, don’t assume presets behave identically. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- Meta tags: useSeoMeta() for SEO/social (type-safe), useHead() for the rest of the head, server-only variants when reactivity isn’t needed. Layer: nuxt.config.ts → app.vue → page. Don’t put useSeoMeta() in a layout. OG images need absolute URLs. Calling an API proves the API ran, not what a direct response emits — confirm with View Source/curl. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.) «- @nuxtjs/seo (Harlan Wilton) is an optional third-party toolkit (v5.x, actively maintained, Nuxt 3.16+/4.x) — not part of Nuxt core. It bundles robots, sitemap, OG image, Schema.org, canonical, and link-checker, but installing it doesn’t itself prove correct output. Sitemap: only lastmod matters. Robots: blocks non-prod by default; per-bot AI rules. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie neuf : le texte source est conservé pour vérification lors de la relecture francophone.) «- @nuxt/image + CWV: never lazy-load the LCP image; always set width/height (CLS). Targets: LCP ≤ 2.5s, INP ≤ 200ms, CLS ≤ 0.1. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie dix : le texte source est conservé pour vérification lors de la relecture francophone.) «- Don’t use dynamic rendering — Google deprecated it; Nuxt’s SSR/SSG already serve full HTML. » (Traduction) (Résumé en français de la section soixante-dix-huit, sous-partie onze : le texte source est conservé pour vérification lors de la relecture francophone.)

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

«Primary-source documentation from Nuxt and the search engines. » (Traduction) (Résumé en français de la section quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Nuxt » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt — Rendering Concepts — universal, client-side, and hybrid (routeRules) rendering, and why crawlers prefer server-rendered routes. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt — SEO and Meta (getting started) — useSeoMeta(), useHead(), and head management. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt — useSeoMeta composable — the type-safe meta API reference, including server-only usage. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie quatre : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt — Server Engine (Nitro) — deployment presets, cross-platform output, and where runtime/caching behavior can diverge. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie cinq : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt — Nuxt Lifecycle — server render, payload transfer, and hydration as distinct stages. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie six : le texte source est conservé pour vérification lors de la relecture francophone.) «- Nuxt Image — <NuxtImg>, responsive formats, and provider config for Core Web Vitals. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie sept : le texte source est conservé pour vérification lors de la relecture francophone.) «- @nuxtjs/seo on Nuxt Modules — the module catalog entry: current version, downloads, and that it’s a separately-installed package. » (Traduction) (Résumé en français de la section quatre-vingt-trois, sous-partie huit : le texte source est conservé pour vérification lors de la relecture francophone.)

«Google » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- Understand the JavaScript SEO basics — the crawl → render → index pipeline and crawlable links (framework-agnostic; Google’s docs don’t mention Nuxt by name). » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- Dynamic Rendering (deprecated workaround) — why Google deprecated it and what to use instead (SSR, static rendering, hydration). » (Traduction) (Résumé en français de la section quatre-vingt-quatre, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«## Quotes from the source » (Traduction) (Résumé en français de la section quatre-vingt-sept, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

On-le-record statements depuis Nuxt, Google, et mon propre writing. Chaque recherche-moteur / Nuxt lien est a deep lien que jumps à le quoted passage on le page source.

Nuxt — rendering pour le SEO

«- “Indexing and updating the content delivered via client-side rendering takes more time.” — Nuxt rendering docs. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Web crawlers can directly index the page’s content, which makes Universal rendering a great choice for any content that you want to index quickly.” — Nuxt rendering docs. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-dix, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

Google — JavaScript processing & dynamic rendu

«- “Google processes JavaScript web apps in three main phases: 1. Crawling 2. Rendering 3. Indexing.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “Dynamic rendering is a workaround and not a long-term solution for problems with JavaScript-generated content in search engines. Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.” — Google Search Central docs. Jump to quote » (Traduction) (Résumé en français de la section quatre-vingt-douze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.)

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

«- “Any kind of SSR, static rendering, and prerendering setup is going to be fine for search engines. Gatsby, Next, Nuxt, etc., are all great.” » (Traduction) (Résumé en français de la section quatre-vingt-quatorze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.) «- “There is no fixed timeout for the renderer… It’s really patient, and you should not be concerned.” » (Traduction) (Résumé en français de la section quatre-vingt-quatorze, sous-partie deux : le texte source est conservé pour vérification lors de la relecture francophone.) «- “JavaScript is not bad for SEO, and it’s not evil. It’s just different from what many SEOs are used to.” » (Traduction) (Résumé en français de la section quatre-vingt-quatorze, sous-partie trois : le texte source est conservé pour vérification lors de la relecture francophone.)

«Note: the Nuxt and Google source pages are themselves JavaScript-rendered and can resist automated text-fragment checking; quotes were verified against the brief’s research and should be confirmed against the live pages before being treated as final. The “20× crawl cost for rendering” figure comes from my 2019 JavaScript SEO talk — treat it as directional rather than a current measured number. » (Traduction) (Résumé en français de la section quatre-vingt-quinze, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Nuxt SEO checklist

A rapide réussir to confirmer a Nuxt site is définir up pour search and AI robots d’exploration:

• Contenu vous vouloir indexé est rendu on le serveur or à construire temps (SSR or SSG) — pas SPA mode (ssr: false).
• Confirmed via View Source que important contenu est dans le raw HTML, et via Inspection d’URL que Google renders il.
• useSeoMeta() est dans page components, pas a shared layout overwriting page balises.
• ogImage utilise an absolute URL (pas relative).
• A titre template est définir une fois dans app.vue; per-page titles/descriptions sont unique.
• @nuxtjs/sitemap est generating an XML sitemap; lastmod est précis et vous êtes pas relying on changefreq/priority.
• @nuxtjs/robots est configuré; le non-prod auto-disallow n’est pas accidentally applying à production.
• robots.txt fait pas bloquer votre JS/CSS.
• Canonicals sont absolute et per-page (nuxt-seo-utils).
• LCP image charge eagerly (pas lazy); tout images ont width/height (CLS).
• Réel <a href> liens / <NuxtLink> pour navigation — aucun <div @click> routing.
• Si en utilisant @nuxt/content, @nuxtjs/seo est chargé avant il dans le modules array.
• Dynamic rendu est pas dans utiliser anywhere.

The mental models

1. Rendu stratégie comes premier. Meta balises, schema, et sitemaps sont downstream de un décision: comment le HTML obtient produced. Réponse “est ce contenu serveur-rendu, statically generated, or client-rendu?” avant debugging n’importe quoi sinon.

2. SSR est le par défaut — votre job est mostly pas à break il. Nuxt points le defaults le correct façon. La plupart Nuxt SEO échecs sont quelqu’un paramètre ssr: false, blocking JS/CSS, or injecting signaux via JavaScript que conflict avec le raw HTML.

3. Pick le rendu mode par contenu type.

• Mostly-static (blog, docs, marketing) → SSG (prerender: true).
• Toujours-fresh / dynamic → SSR.
• Hourly/daily contenu wanting static speed → swr/isr.
• Behind a login, non indexée → SPA (ssr: false) est fine.
• Public contenu vous vouloir ranked or cited par AI → jamais SPA.

4. HTML-premier, JS-deuxième pour chaque signal. Contenu, meta, canonical, robots directives, et liens tout belong dans le serveur-rendu HTML. Google takes le la plupart restrictive directive à travers raw vs. rendu; AI robots d’exploration voir seulement le raw. JS-injected SEO est a fallback, pas le plan.

5. Utiliser le modules, mais comprendre ce que ils faire. @nuxtjs/seo saves fonctionner, mais le non-prod robots auto-disallow, le lastmod-seulement sitemap reality, et absolute-URL canonicals sont encore le vôtre à obtenir correct.

Nuxt SEO — cheat sheet

Rendering modes

Composables

@nuxtjs/seo modules

Fast rules

• Install everything: npx nuxt module add seo.
• OG images: absolute URLs seulement.
• LCP image: loading="eager"; tout images besoin width/height (CLS).
• CWV targets: LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1.
• Jamais block JS/CSS in robots.txt.
• Dynamic rendering: deprecated — Nuxt’s SSR/SSG replace it.
• AI robots d’exploration: aucun JavaScript → SPA content is invisible to les.

Voir ce que a Nuxt page en réalité ships

Le entier Nuxt SEO question reduces à un vérifier: est votre contenu dans le raw HTML le serveur sends, or seulement après JavaScript exécute? Si c’est dans le raw HTML, vous êtes serveur-rendu et robots d’exploration (et AI bots) peut lire il.

Récupérer le raw HTML et regarder pour votre contenu

macOS / Linux:

# Raw HTML as the server sends it — before any client JS runs
curl -sL -A "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)" \
  https://example.com/page/ -o raw.html

# Is your headline actually in the server HTML? (empty = client-rendered)
grep -o "Your headline text" raw.html

Windows (PowerShell):

$ua = "Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)"
Invoke-WebRequest -Uri "https://example.com/page/" -UserAgent $ua -OutFile raw.html
Select-String -Path raw.html -Pattern "Your headline text"

Si votre texte montre dans le navigateur mais est manquant depuis raw.html, lune page est client-rendu — flip le route à SSR or prerender il. (A plain curl ne peut pas exécuter JS; pour le rendu DOM utiliser Inspection d’URL or a headless-Chrome robot d’exploration.)

Confirmer vous aren’t blocking JS/CSS

macOS / Linux:

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

A Disallow matching /_nuxt/ (Nuxt’s construire output) or /_ipx/ (the @nuxt/image optimizer) va break rendering — almost toujours a mistake.

Static config extrait (nuxt.config.ts)

export default defineNuxtConfig({
  modules: ['@nuxtjs/seo'],          // robots, sitemap, og-image, schema-org, utils
  site: { url: 'https://mysite.com' }, // required for absolute canonicals + sitemap
  routeRules: {
    '/blog/**':  { prerender: true },  // SSG for content
    '/admin/**': { ssr: false },       // SPA for the dashboard (won't be indexed)
  },
})

Outils pour Nuxt SEO

• Inspection d’URL (Recherche Google Console) — le source de truth. Exécuter a actif tester et vérifier le rendu HTML, screenshot, et page resources à confirmer votre Nuxt contenu en réalité rendu et rien’s bloqué.
• @nuxtjs/seo / nuxtseo.com — Harlan Wilton’s module bundle; le dev outils panel montre votre generated robots, sitemap, schema, et OG images dans development.
• Nuxt DevTools — inspect head balises, route règles, et qui rendu mode chaque route est en utilisant.
• Résultats enrichis Tester — confirmer nuxt-schema-org JSON-LD est présent dans le rendu sortie après quelconque rendu modifier.
• Ahrefs Site Audit / Screaming Frog (JS-rendu mode) — explorer avec JS rendu on vs. off à diff raw vs. rendu HTML à travers le entier Nuxt app et catch CSR gaps.
• Lighthouse / PageSpeed Insights — Core Web Vitals (LCP, INP, CLS) pour le @nuxt/image et Nuxt Islands fonctionner.
• Bing Webmaster Outils — Bing’s explorer/indexer view et où IndexNow submissions montrer up.

Nuxt SEO mistakes to éviter

Concrete mistakes que montrer up repeatedly on réel Nuxt sites — prevent ces avant ils ship, plutôt que diagnosing les après trafic drops.

Flipping ssr: false on content vous vouloir indexé

Le unique la plupart expensive Nuxt SEO mistake. SPA mode ships le même empty-shell problème plain Vue a — moteur de recherches ont à wait pour a rendre queue à fill dans le contenu. AI-robot rendu contracts vary par provider, donc a robot d’exploration que récupère seulement le initial HTML va miss lune page contenu.

Pourquoi c’est incorrect: vous êtes voluntarily giving up le un par défaut (SSR) que rend Nuxt easier à indexer que plain Vue.

Que faire à la place: laisser ssr: true (le par défaut) pour n’importe quoi public et indexable. Reserve ssr: false pour genuinely non-indexé surfaces — logged-dans dashboards, admin panels — via routeRules, pas a mondial config flip.

Putting useSeoMeta() dans a shared layout

Paramètre titre/description à l’intérieur a layout component feels efficient — un placer, s’applique everywhere — mais il signifie chaque page que utilise que layout obtient le même générique balises, et page-level useSeoMeta() calls peut obtenir overwritten selon rendre order.

Pourquoi c’est incorrect: unique, page-spécifique titles et descriptions sont basic pertinence signaux; a layout-level par défaut collapses les tout à un string.

Que faire à la place: définir mondial fallbacks une fois dans app.vue (titre template, OG defaults), alors appel useSeoMeta() à l’intérieur chaque page component avec que page’s réel titre et description.

Shipping a relative ogImage URL

ogImage: '/social.png' semble fine in le navigateur and complètement fails quand Facebook, LinkedIn, or X essayer to récupérer it, parce que social robots d’exploration don’t resolve relative paths contre votre site.

Pourquoi it’s incorrect: social platforms besoin an absolute URL to récupérer the image; a relative chemin resolves to nothing from leur side.

Que faire à la place: toujours réussir a complet https:// URL, and définir site.url in nuxt.config.ts so @nuxtjs/seo’s modules peut construire absolute URLs pour vous automatically.

Reaching pour dynamic rendering

Diffusion a prerendered snapshot à connu bots et le SPA à everyone sinon était a legitimate workaround années ago. Google a since appelé il out directement: “dynamic rendu est a workaround et pas a à long terme solution.”

Pourquoi c’est incorrect: il seulement sert le bots vous configurer, misses tout sinon (Bing, la plupart AI robots d’exploration), et ajoute réel infrastructure à maintain — pour a problème Nuxt’s propre SSR/SSG déjà solves.

Que faire à la place: utiliser SSR or nuxt generate et skip dynamic rendu entirely. il y a aucun scenario où a Nuxt site nécessite il.

Blocking /_nuxt/ or /_ipx/ in robots.txt

A blanket Disallow: /assets/ or an overzealous robots rule peut accidentally catch Nuxt’s construire output directory (/_nuxt/) or the @nuxt/image optimizer chemin (/_ipx/).

Pourquoi c’est incorrect: si Googlebot ne peut pas récupérer le JS/CSS que construit lune page, il ne peut pas confirmer votre SSR sortie est ce que il semble comme — et quelconque client-side enhancements silently arrêter rendu pour il.

Que faire à la place: jamais disallow build-output or image-optimizer paths. Vérifier robots.txt après every deploy que touches routing or module config, pas simplement une fois at launch.

Leaving le non-production robots bloquer active après launch

@nuxtjs/robots disallows tout robots d’exploration on non-production environments by par défaut — a bon safety net pour staging, but it reads environment variables to decide, and a misconfigured NODE_ENV or preview-deploy setting peut faire it fire in production aussi.

Pourquoi c’est incorrect: le site semble complètement fine dans a navigateur pendant que robots.txt quietly disallows tout, et rien obtient indexé jusqu’à quelqu’un notices.

Que faire à la place: après quelconque deploy or environment modifier, récupérer https://yoursite.com/robots.txt directement and confirmer it’s pas a blanket Disallow: /.

Standing KPIs pour Nuxt SEO

Le ongoing numbers à track une fois votre rendu setup est correct — pas un-time vérifications, mais recurring signaux que catch regressions as le app changements.

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

Ce que il indique vous: si réel visitors sont getting a rapide, stable page — directement affected par Nuxt Islands/hydration coût (INP) et image-loading choices (LCP, CLS).

Comment pull il: champ données depuis le Chrome UX Rapport via /outils/crux-tracker/ or /outils/cwv-checker/; lab données depuis Lighthouse pour pre-release vérifications.

Benchmark / realistic range: Google’s publié “bon” thresholds sont LCP ≤ 2,5s, INP ≤ 200ms, CLS ≤ 0,1 à le 75th percentile — ceux sont le réussir/échouer lines CrUX itself utilise, pas a number Je’m inventing. Où vous land dans “bon” dépend heavily on votre image weight et comment beaucoup vous hydrate.

Cadence: CrUX field données updates on a rolling 28-day window — vérifier monthly, and immédiatement après quelconque modifier to images, fonts, or hydration.

Rendered-vs-raw HTML parity

Ce que il indique vous: si le contenu moteur de recherches et AI robots d’exploration peut en réalité voir (le raw HTML) matches ce que a visitor voit dans le navigateur (le rendu DOM) — le core Nuxt SEO risque si ssr obtient flipped or a route regresses à CSR.

How to pull it: /outils/render-gap/ diffs raw vs. rendered HTML pour une URL; pour the authoritative Google-side view, utiliser GSC’s Inspection d’URL → “View Crawled Page.”

Benchmark / realistic range: ce est a binary vérifier, pas a range — votre clé contenu (headline, corps copy, lien internes) devrait être présent dans le raw HTML, complet arrêter. Quelconque gap on une page vous vouloir indexé or cited est a regression à corriger, pas a number à tolerate.

Cadence: après every deploy que touches routeRules, layouts, or the ssr config; spot-check clé templates monthly sinon.

Index coverage (Page Indexation report)

Ce que il indique vous: comment nombreux de votre submitted URLs Google a en réalité indexé, et pourquoi le rest étaient excluded (duplicate, exploré-pas-indexé, bloqué, etc.) — le downstream signal que rendu problèmes eventually surface as.

«How to pull it: Search Console → Page Indexing report, filtered to your Nuxt site’s URL patterns. » (Traduction) (Résumé en français de la section cent quatre-vingts, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Benchmark / realistic range: there’s no universal healthy percentage — it depends on how many near-duplicate or thin URLs your route structure generates. Watch the trend and the exclusion reasons, not a target number. » (Traduction) (Résumé en français de la section cent quatre-vingt-un, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«Cadence: weekly during and after a rendering-mode migration; monthly otherwise. » (Traduction) (Résumé en français de la section cent quatre-vingt-deux, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

«### AI crawler access » (Traduction) (Résumé en français de la section cent quatre-vingt-trois, sous-partie un : le texte source est conservé pour vérification lors de la relecture francophone.)

Ce que il indique vous: si GPTBot, ClaudeBot, PerplexityBot, et similaire AI robots d’exploration peut en réalité récupérer votre pages — séparé depuis Google, since ces bots généralement ne pas execute JavaScript et lire seulement le raw HTML votre robots.txt lets les reach.

How to pull it: /outils/ai-crawler-checker/ to confirmer aucun AI user-agent is disallowed; server logs to confirmer the bots are en réalité requesting pages, pas simplement permitted to.

Benchmark / realistic range: il y a aucun citation-rate benchmark Je peut donner vous honestly — comment souvent an AI réponse moteur cites vous dépend on le requête space et competition, pas quelque chose Nuxt configuration contrôle directement. Track accès (allowed vs. bloqué), pas a fait-up citation percentage.

Cadence: après every robots.txt or @nuxtjs/robots config modifier; monthly log spot-check sinon.

Testez vos connaissances: Nuxt SEO

Five rapide questions on optimizing a Nuxt site pour search. Pick an réponse pour chaque, alors vérifier.

Ressources utiles

Mon connexe writing

• JavaScript SEO: A Definitive Guide — mon complet guide à rendu, DOM parity, le la plupart-restrictive-directive règle, et pourquoi SSR/static/prerender (Nuxt inclus) sont tout fine pour recherche.
• Le Beginner’s Guide à SEO technique — où rendu et exploration fit dans le bigger picture.

Mon speaking

• JavaScript SEO — Ungagged 2019 (SlideShare) — Googlebot’s evergreen Chromium, le ~20× explorer coût de rendu, History API over hash routing, et comment Google handles JS-injected canonicals. (Standing disclaimer: le dynamic-rendu advice dans que deck est maintenant outdated — Google deprecated il.)

Depuis autour le industry

• Nuxt — Rendu Concepts (official) — universal vs. rendu côté client et pourquoi robots d’exploration préférer SSR.
• Nuxt — SEO et Meta (official) — useSeoMeta() et useHead(), le getting-started référence.
• Apprendre SEO avec Nuxt (Harlan Wilton / nuxtseo.com) — le la plupart comprehensive developer-focused Nuxt SEO guide, kept actuel.
• harlan-zw/nuxt-seo (GitHub) — le source pour le @nuxtjs/seo module bundle.
• Nuxt Image (official) — <NuxtImg> et Core Web Vitals optimization.
• Optimize Nuxt Performances (DebugBear) — a practitioner walkthrough de Nuxt Core Web Vitals corrections.
• Nuxt 3 Rendu Modes (RisingStack) — a technique comparaison de SSR, SSG, et hybrid rendu.
• r/TechSEO — le community pour rendu/indexation debugging.

Videos

• Recherche Google Central (YouTube) — Martin Splitt’s JavaScript SEO series est le meilleur official walkthrough de comment Google explore, renders, et indexes JS apps; c’est framework-agnostic mais s’applique directement à Nuxt. Channel

Journal des modifications