SEO technique avec Nuxt : le guide pour un site rapide et bien référencé

Un site Nuxt bien construit part avec de sérieux atouts pour le référencement : du HTML complet côté serveur, un routage propre et d'excellentes performances. Mais ces atouts ne se transforment en positions que si les détails techniques sont soignés : balises, URL canoniques, redirections, sitemap, données structurées, vitesse de chargement. Voici la checklist que nous appliquons sur nos projets Nuxt 4, avec des exemples de code prêts à adapter.

Choisir le bon mode de rendu

Les moteurs de recherche savent exécuter du JavaScript, mais un contenu présent dans le HTML initial reste indexé plus vite et plus sûrement. Nuxt propose trois stratégies, combinables page par page.

• SSR (rendu côté serveur) : le HTML est généré à chaque requête. Adapté aux contenus dynamiques ou personnalisés.
• SSG / pré-rendu : le HTML est généré au build. Idéal pour un site vitrine ou un blog : réponse instantanée, hébergement simple, aucun serveur applicatif à surveiller.
• SPA : à réserver aux zones privées (espace client), qui n'ont pas vocation à être indexées.

La configuration se fait avec routeRules, ce qui permet de mélanger les approches dans le même projet :

// nuxt.config.ts
export default defineNuxtConfig({
  routeRules: {
    '/': { prerender: true },
    '/blog/**': { prerender: true },
    '/mentions-legales': { prerender: true },
    '/app/**': { ssr: false }, // espace connecté, hors indexation
  },
})

Pour un site entièrement statique, nuxt generate produit un dossier prêt à être servi par n'importe quel CDN.

Titres et meta descriptions avec useSeoMeta

Chaque page doit avoir un title unique et une meta description rédigée pour donner envie de cliquer (environ 140 à 160 caractères). Le composable useSeoMeta est typé et évite les fautes de frappe sur les noms de propriétés :

<script setup lang="ts">
useSeoMeta({
  title: 'SEO technique avec Nuxt',
  description:
    'Les réglages SEO techniques à maîtriser sur un site Nuxt 4 : rendu, canoniques, sitemap, données structurées et performances.',
  ogTitle: 'SEO technique avec Nuxt',
  ogDescription:
    'Les réglages SEO techniques à maîtriser sur un site Nuxt 4.',
  ogImage: 'https://www.example.com/images/og-seo-nuxt.jpg',
  ogType: 'article',
  twitterCard: 'summary_large_image',
})
</script>

Quelques règles utiles : un seul h1 par page, une hiérarchie de titres cohérente, et une image Open Graph au format 1200 par 630 pour des partages réussis.

URL canoniques et redirections entre domaines

Un contenu accessible à plusieurs adresses (avec et sans www, en HTTP et en HTTPS, ancien et nouveau domaine) dilue les signaux de référencement. Deux mécanismes se complètent.

La balise canonique indique l'adresse de référence de la page :

<script setup lang="ts">
const route = useRoute()
const siteUrl = 'https://www.example.com'

useHead({
  link: [{ rel: 'canonical', href: `${siteUrl}${route.path}` }],
})
</script>

Les redirections, elles, font converger les visiteurs et les robots. Utilisez un code 301 (permanent) ou 308 (permanent, qui conserve la méthode HTTP) pour une migration définitive, et jamais un 302 pour un changement durable. Au sein d'un même site, routeRules suffit :

export default defineNuxtConfig({
  routeRules: {
    '/ancienne-page': { redirect: { to: '/nouvelle-page', statusCode: 301 } },
  },
})

Pour une redirection entre domaines (par exemple un ancien nom de domaine vers le nouveau), la règle se place au niveau de l'hébergeur ou du CDN : elle doit conserver le chemin et la query string, afin que ancien.tld/blog/article mène à nouveau.tld/blog/article et non à la page d'accueil. Pensez à la déclarer aussi dans la Search Console avec l'outil de changement d'adresse lorsque c'est pertinent.

Sitemap et robots.txt

Le sitemap aide les robots à découvrir vos pages, le robots.txt leur indique ce qu'ils ne doivent pas explorer. Les modules @nuxtjs/sitemap et @nuxtjs/robots couvrent ces besoins :

export default defineNuxtConfig({
  modules: ['@nuxtjs/sitemap', '@nuxtjs/robots'],
  site: {
    url: 'https://www.example.com',
    name: 'Mon site',
  },
  robots: {
    disallow: ['/app'],
  },
})

Avec un site de contenu, branchez les URL dynamiques (articles, catégories) sur le sitemap pour qu'il reste à jour sans intervention. Ajoutez la ligne Sitemap: au robots.txt et soumettez l'adresse dans la Search Console. Attention : un robots.txt n'est pas un outil de confidentialité, et bloquer une page n'empêche pas son indexation si elle est liée ailleurs. Pour l'exclure, utilisez une balise noindex.

Données structurées JSON-LD

Les données structurées aident les moteurs à comprendre la nature du contenu et peuvent déclencher des résultats enrichis. Le format recommandé est JSON-LD, injecté via useHead :

<script setup lang="ts">
const article = {
  title: 'SEO technique avec Nuxt',
  date: '2026-09-10',
}

useHead({
  script: [
    {
      type: 'application/ld+json',
      innerHTML: JSON.stringify({
        '@context': 'https://schema.org',
        '@type': 'Article',
        headline: article.title,
        datePublished: article.date,
        author: { '@type': 'Organization', name: 'Mon entreprise' },
        mainEntityOfPage: 'https://www.example.com/blog/seo-technique-nuxt',
      }),
    },
  ],
})
</script>

Trois types sont particulièrement utiles :

• Organization : à placer une fois, au niveau du site (nom, logo, adresse, réseaux sociaux).
• Article : pour chaque contenu de blog, avec titre, date de publication et auteur.
• FAQPage : pour une page qui présente de vraies questions et leurs réponses, visibles dans la page. Le balisage doit toujours refléter le contenu affiché.

Validez vos balisages avec le test des résultats enrichis de Google avant la mise en production.

Core Web Vitals et images

Les Core Web Vitals mesurent l'expérience réelle des visiteurs :

• LCP (Largest Contentful Paint) : vitesse d'affichage du plus gros élément visible, souvent une image ou un titre.
• INP (Interaction to Next Paint) : réactivité aux interactions.
• CLS (Cumulative Layout Shift) : stabilité visuelle, c'est-à-dire l'absence de sauts de mise en page.

Les images sont le premier levier. Le module @nuxt/image fournit le composant NuxtImg (et NuxtPicture) qui génère les formats modernes, redimensionne et applique le chargement différé :

<template>
  <NuxtImg
    src="/images/hero.jpg"
    alt="Équipe en réunion devant un tableau d'architecture"
    width="1200"
    height="630"
    format="avif"
    sizes="100vw sm:50vw"
    fetchpriority="high"
    preload
  />

  <NuxtImg
    src="/images/illustration.jpg"
    alt="Schéma d'architecture"
    width="600"
    height="400"
    format="webp"
    loading="lazy"
  />
</template>

Réservez fetchpriority="high" et preload à l'image qui compose le LCP, et laissez toutes les autres en chargement différé. Renseignez toujours width et height pour éviter les décalages de mise en page (CLS), et un texte alt pertinent.

Polices auto-hébergées

Charger des polices depuis un service tiers ajoute une connexion externe, ralentit le rendu et pose des questions de protection des données. Le module @nuxt/fonts télécharge les polices au build, les sert depuis votre domaine et génère des polices de secours ajustées pour limiter les sauts visuels :

export default defineNuxtConfig({
  modules: ['@nuxt/fonts', '@nuxt/image'],
  fonts: {
    families: [{ name: 'Inter', provider: 'google', weights: [400, 700] }],
  },
})

Limitez le nombre de graisses, privilégiez le format WOFF2 et vérifiez que le texte reste visible pendant le chargement.

Suivre et mesurer avec la Search Console

La Google Search Console est l'outil de contrôle indispensable. Après la mise en ligne :

1. Validez la propriété du domaine (de préférence par enregistrement DNS).
2. Soumettez le sitemap.
3. Inspectez les pages clés avec l'outil d'inspection d'URL pour voir le rendu tel que Google le perçoit.
4. Surveillez les rapports d'indexation, d'expérience sur la page et de Core Web Vitals.
5. Après toute migration, suivez les erreurs 404 et les redirections.

Complétez avec des mesures de laboratoire (Lighthouse) et, si possible, des données réelles d'utilisateurs, car seules elles reflètent l'expérience vécue.

Besoin d'un coup de main ?

Un audit SEO technique, une migration de domaine ou l'optimisation des performances de votre site Nuxt demandent de la méthode et un peu d'outillage. Nous pouvons vous accompagner de l'audit à la mise en production. N'hésitez pas à nous contacter.