Technical SEO Patterns

Patterns SEO technique pour projets web modernes (Next.js App Router, Remix, Nuxt 4, Astro). Ces patterns sont agency-grade : implémenter ces 8 chapitres donne une base SEO solide sans audit Yoast / RankMath / SEMrush nécessaire.

1. Meta tags server-side (par route)

Next.js App Router

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next'

type Props = { params: { slug: string } }

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const post = await getPost(params.slug)

  if (!post) {
    return { title: 'Not found' }
  }

  return {
    title: `${post.title} | My Blog`,
    description: post.excerpt,
    alternates: {
      canonical: `https://example.com/blog/${post.slug}`,
      languages: {
        'en-US': `https://example.com/en/blog/${post.slug}`,
        'fr-FR': `https://example.com/fr/blog/${post.slug}`,
      },
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://example.com/blog/${post.slug}`,
      siteName: 'My Blog',
      type: 'article',
      publishedTime: post.publishedAt,
      authors: [post.author.name],
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    robots: {
      index: post.published,
      follow: true,
    },
  }
}

Remix

// app/routes/blog.$slug.tsx
import type { MetaFunction } from '@remix-run/node'

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  if (!data?.post) return []
  return [
    { title: `${data.post.title} | My Blog` },
    { name: 'description', content: data.post.excerpt },
    { tagName: 'link', rel: 'canonical', href: `https://example.com/blog/${data.post.slug}` },
    { property: 'og:title', content: data.post.title },
    { property: 'og:description', content: data.post.excerpt },
    { property: 'og:image', content: data.post.coverImage },
    { name: 'twitter:card', content: 'summary_large_image' },
  ]
}

Nuxt 4

<script setup lang="ts">
const route = useRoute()
const { data: post } = await useFetch(`/api/posts/${route.params.slug}`)

useSeoMeta({
  title: () => `${post.value?.title} | My Blog`,
  description: () => post.value?.excerpt,
  ogTitle: () => post.value?.title,
  ogDescription: () => post.value?.excerpt,
  ogImage: () => post.value?.coverImage,
  twitterCard: 'summary_large_image',
})

useHead({
  link: [
    { rel: 'canonical', href: () => `https://example.com/blog/${post.value?.slug}` },
  ],
})
</script>

2. JSON-LD structured data (schema.org)

Article schema

const articleSchema = {
  '@context': 'https://schema.org',
  '@type': 'Article',
  headline: post.title,
  description: post.excerpt,
  image: post.coverImage,
  datePublished: post.publishedAt,
  dateModified: post.updatedAt,
  author: {
    '@type': 'Person',
    name: post.author.name,
    url: `https://example.com/authors/${post.author.slug}`,
  },
  publisher: {
    '@type': 'Organization',
    name: 'My Blog',
    logo: {
      '@type': 'ImageObject',
      url: 'https://example.com/logo.png',
    },
  },
}

// Next.js App Router — inject via <script type="application/ld+json">
// Use a helper that escapes JSON output safely (e.g. react-schemaorg or serialize-javascript).
// Avoid building the script tag manually with raw string concatenation.
export default function Page() {
  return (
    <>
      <JsonLd data={articleSchema} /> {/* component provided by react-schemaorg or similar */}
      <article>...</article>
    </>
  )
}

Note sécurité : ne jamais construire le tag <script type="application/ld+json"> par concaténation de chaînes avec du contenu user-generated — utiliser un helper de sérialisation sûre (serialize-javascript, react-schemaorg, ou équivalent) qui échappe </script>, U+2028, U+2029.

Product schema (e-commerce)

const productSchema = {
  '@context': 'https://schema.org',
  '@type': 'Product',
  name: product.name,
  description: product.description,
  image: product.images,
  sku: product.sku,
  brand: { '@type': 'Brand', name: product.brand },
  offers: {
    '@type': 'Offer',
    url: `https://example.com/products/${product.slug}`,
    priceCurrency: 'EUR',
    price: product.price,
    availability: product.inStock
      ? 'https://schema.org/InStock'
      : 'https://schema.org/OutOfStock',
    priceValidUntil: '2026-12-31',
  },
  aggregateRating: product.reviewCount > 0
    ? {
        '@type': 'AggregateRating',
        ratingValue: product.rating,
        reviewCount: product.reviewCount,
      }
    : undefined,
}

BreadcrumbList

const breadcrumbSchema = {
  '@context': 'https://schema.org',
  '@type': 'BreadcrumbList',
  itemListElement: [
    { '@type': 'ListItem', position: 1, name: 'Home', item: 'https://example.com' },
    { '@type': 'ListItem', position: 2, name: 'Blog', item: 'https://example.com/blog' },
    { '@type': 'ListItem', position: 3, name: post.title },
  ],
}

FAQPage

const faqSchema = {
  '@context': 'https://schema.org',
  '@type': 'FAQPage',
  mainEntity: faqs.map((faq) => ({
    '@type': 'Question',
    name: faq.question,
    acceptedAnswer: {
      '@type': 'Answer',
      text: faq.answer,
    },
  })),
}

Organization (site-wide, dans le layout racine)

const orgSchema = {
  '@context': 'https://schema.org',
  '@type': 'Organization',
  name: 'ATUM SAS',
  url: 'https://example.com',
  logo: 'https://example.com/logo.png',
  sameAs: [
    'https://twitter.com/atum',
    'https://linkedin.com/company/atum',
    'https://github.com/arnwaldn',
  ],
  contactPoint: {
    '@type': 'ContactPoint',
    telephone: '+33-1-00-00-00-00',
    contactType: 'customer service',
    areaServed: 'FR',
    availableLanguage: ['French', 'English'],
  },
}

3. XML Sitemap

Next.js App Router (natif)

// app/sitemap.ts
import { MetadataRoute } from 'next'

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const posts = await getAllPosts()

  const staticRoutes = [
    { url: 'https://example.com', lastModified: new Date(), priority: 1 },
    { url: 'https://example.com/blog', lastModified: new Date(), priority: 0.8 },
    { url: 'https://example.com/about', lastModified: new Date(), priority: 0.5 },
  ]

  const postRoutes = posts.map((post) => ({
    url: `https://example.com/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'monthly' as const,
    priority: 0.6,
  }))

  return [...staticRoutes, ...postRoutes]
}

Multi-sitemap index (> 50 000 URLs)

Quand un sitemap dépasse 50 000 URLs (limite Google), créer un sitemap index qui référence plusieurs sitemaps :

// app/sitemaps/posts.xml/route.ts
export async function GET() {
  const posts = await getAllPosts()
  const xml = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${posts.map((p) => `<url><loc>https://example.com/blog/${p.slug}</loc></url>`).join('')}
  </urlset>`
  return new Response(xml, { headers: { 'Content-Type': 'application/xml' } })
}

4. robots.txt

Next.js App Router (natif)

// app/robots.ts
import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*',
        allow: '/',
        disallow: ['/api/', '/admin/', '/_next/', '/preview'],
      },
      {
        userAgent: 'GPTBot',
        disallow: '/', // Bloque ChatGPT si le client le veut
      },
    ],
    sitemap: 'https://example.com/sitemap.xml',
    host: 'https://example.com',
  }
}

5. Canonical URLs

Règle absolue : chaque page doit avoir une seule URL canonique, définie dans le <head> via rel="canonical".

Cas où la canonical est critique

• Paramètres UTM (?utm_source=x) → canonical sans le paramètre
• Pagination (/blog?page=2) → canonical vers la même page paginée (PAS vers la page 1)
• Filtres de facettes e-commerce → canonical vers la page sans filtre
• Trailing slash inconsistent → choisir une convention et la maintenir

// Next.js dans generateMetadata
alternates: {
  canonical: `https://example.com${pathname.split('?')[0]}`,
}

6. Hreflang (multi-région / multi-langue)

// Next.js
alternates: {
  canonical: 'https://example.com/en-us/blog/post-slug',
  languages: {
    'en-US': 'https://example.com/en-us/blog/post-slug',
    'fr-FR': 'https://example.com/fr-fr/blog/post-slug',
    'de-DE': 'https://example.com/de-de/blog/post-slug',
    'x-default': 'https://example.com/blog/post-slug',
  },
}

x-default = la version à afficher quand aucune locale ne matche.

7. Core Web Vitals

LCP (Largest Contentful Paint) — cible < 2.5s

• Image hero preloadée avec loading="eager" + priority (Next.js <Image priority>)
• Pas de display: none sur l'image LCP — elle doit être rendue dès le premier paint
• Pas de fade-in sur l'image LCP — le navigateur doit la décoder immédiatement
• Pas de lazy-loading sur l'image LCP — casse le LCP

// Next.js
import Image from 'next/image'

<Image
  src="/hero.webp"
  alt="Hero"
  width={1920}
  height={1080}
  priority // <- critique pour LCP
  sizes="100vw"
/>

CLS (Cumulative Layout Shift) — cible < 0.1

• Dimensions explicites sur toutes les images (width + height ou aspect-ratio CSS)
• Fonts via font-display: swap + size-adjust pour minimiser le FOIT/FOUT
• Pas d'injection de banner au-dessus du fold après le render
• Skeleton ou reserved space pour les éléments async (ads, widgets tiers)

INP (Interaction to Next Paint) — cible < 200ms (remplace FID en 2024)

• Pas de JS bloquant > 50ms sur le thread principal
• Code splitting par route via Next.js/Remix
• Defer les scripts tiers non-critiques
• useTransition / startTransition pour les updates React non-urgents

8. Google Search Console

Checklist de setup :

• Property ajoutée (Domain ou URL prefix)
• Verification via DNS TXT, HTML file, ou meta tag
• Sitemap soumis (/sitemap.xml)
• Core Web Vitals report vérifié (mobile + desktop)
• Coverage report — 0 erreur, warnings traités
• Manual actions check (si migration depuis un autre site)

Checklist SEO complet

• Titles uniques, 50-60 chars, keyword principal en premier
• Meta descriptions 120-160 chars, call-to-action inclus
• H1 unique par page, hiérarchie H2-H6 logique
• Canonical URLs sur toutes les pages
• hreflang si multi-langue ou multi-région
• Alt text sur toutes les images (SEO + accessibilité)
• Open Graph + Twitter Card sur toutes les pages
• JSON-LD Article/Product/Organization selon le contexte
• Sitemap.xml avec toutes les URLs publiques, soumis à GSC
• Robots.txt avec Sitemap: directive
• 301 redirects pour les anciennes URLs (migration)
• HTTPS avec HSTS preload
• Core Web Vitals LCP < 2.5s, CLS < 0.1, INP < 200ms (mobile)
• Mobile-first — Lighthouse mobile ≥ 90

Anti-patterns

1. Meta tags côté client uniquement (via document.title) → les crawlers les ignorent
2. Noindex par défaut en dev oublié en prod → disaster
3. JSON-LD avec champs invalides → ignoré par Google, tester via Rich Results Test
4. Canonical pointant vers la homepage depuis une page produit → Google fusionne les signaux
5. Sitemap avec URLs 404 → pénalise la qualité du crawl
6. Images sans dimensions → CLS élevé
7. Préchargement de tous les fonts → blocage du render
8. alt="" sur une image informative → perte SEO + accessibilité
9. Dupliquer les <title> sur plusieurs pages → cannibalisation

Outils recommandés

• Rich Results Test (Google) — https://search.google.com/test/rich-results
• Lighthouse (intégré Chrome DevTools)
• PageSpeed Insights — https://pagespeed.web.dev/
• Google Search Console — https://search.google.com/search-console
• Schema.org validator — https://validator.schema.org/
• Ahrefs / SEMrush / Sitebulb — audits on-page (payants, pour audits clients)

Quand déléguer

• Accessibilité → accessibility-auditor (dans atum-stack-web)
• Performance profonde → skill high-perf-browser (dans atum-stack-web)
• Marketing SEO (keywords research, content strategy) → hors scope de Claude Code, brief client
• Sanity-specific SEO → skill sanity-seo-aeo (dans atum-cms-ecom)
• Shopify SEO → shopify-expert (dans atum-cms-ecom)
• WordPress SEO → Yoast/RankMath côté plugin, skills wordpress-patterns pour les patterns serveur