SEO Technique

Le dernier chapitre couvre deux sujets pratiques majeurs — le SEO dans les frameworks JavaScript (le piège le plus fréquent en 2026) et Google Search Console — puis une checklist complète et les 20 erreurs les plus courantes à ne pas reproduire.

SEO et JavaScript

Le problème du rendu côté client

Une SPA (Single Page Application) React sans SSR envoie à Googlebot une page HTML quasiment vide :

<!-- Ce que Googlebot reçoit avec un SPA CSR pur -->
<!DOCTYPE html>
<html>
<head>
  <title>Mon App</title>
  <!-- Pas de meta description, pas de canonical -->
</head>
<body>
  <div id="root"></div>
  <!-- Tout le contenu est généré par bundle.js après le chargement -->
  <script src="/bundle.12abc.js"></script>
</body>
</html>

Googlebot peut exécuter JavaScript, mais ce processus est :

• Différé : les pages crawlées en JS sont traitées dans une "second wave" qui peut prendre des jours ou semaines
• Limité : certains patterns JS complexes ne sont pas bien gérés
• Non garanti : si votre JS plante, la page n'est jamais indexée

SSR vs CSR vs SSG — les options

Pour un site de contenu (blog, documentation, formation), SSG est le choix optimal : pages pré-générées au build, servies comme du HTML statique, indexation parfaite.

Next.js — le bon pattern SEO

// generateStaticParams = pré-génère toutes les routes au build
export async function generateStaticParams() {
  const articles = await getAllArticles()
  return articles.map(a => ({ slug: a.slug }))
}
 
// generateMetadata = métadonnées côté serveur, dans le HTML initial
export async function generateMetadata({ params }) {
  const { slug } = await params
  const article = await getArticleBySlug(slug)
 
  return {
    title: `${article.title} — Iducation`,
    description: article.excerpt,
    openGraph: {
      title: article.title,
      description: article.dek,
      type: 'article',
      publishedTime: article.date,
    },
    alternates: {
      canonical: `https://iducation.fr/articles/${slug}`,
    },
  }
}
 
export default async function Page({ params }) {
  const { slug } = await params
  const article = await getArticleBySlug(slug)
  return <ArticleLayout article={article} />
}

Avec ce pattern, Googlebot reçoit un HTML complet avec titre, meta description, canonical et contenu — dès le premier crawl, sans attendre JavaScript.

Erreurs JavaScript fréquentes en SEO

// ❌ Liens en JavaScript — Googlebot ne les suit pas
<button onClick={() => router.push('/articles')}>Voir les articles</button>
 
// ✅ Liens en <a href> — toujours suivis
<Link href="/articles">Voir les articles</Link>
 
// ❌ Titre généré uniquement côté client
useEffect(() => {
  document.title = article.title  // Googlebot voit le titre initial, pas celui-ci
}, [article])
 
// ✅ Titre dans generateMetadata — présent dans le HTML initial
export async function generateMetadata({ params }) {
  return { title: `${article.title} — Iducation` }
}
 
// ❌ Métadonnées dans un composant client
'use client'
export function Head() {
  return <title>{article.title}</title>  // Non rendu côté serveur
}
 
// ✅ Métadonnées dans generateMetadata ou layout côté serveur

Vérifier que votre contenu est bien rendu côté serveur

# Désactiver JavaScript et voir ce que Googlebot voit
curl -s https://iducation.fr/articles/docker-introduction | grep '<h1'
# Doit retourner le H1 de la page
 
# Ou dans Chrome : F12 → Settings → Disable JavaScript → Recharger
# Si la page est blanche ou vide, SSR n'est pas activé

Google Search Console

Accès et vérification

1. Aller sur search.google.com/search-console
2. Ajouter votre propriété (URL prefix ou Domain)
3. Vérifier la propriété par :
   • HTML file upload
   • Meta tag dans <head>
   • DNS TXT record (recommandé — survit aux migrations)

Les rapports essentiels

Performance → Résultats de recherche

Le rapport le plus important. Il montre :

• Clics : nombre de fois où votre site a été cliqué
• Impressions : nombre de fois où il est apparu dans les résultats
• CTR : clics / impressions
• Position moyenne : votre rang moyen sur chaque requête

Exemple de lecture :
Requête : "docker tutorial"
Impressions : 1 200  (votre page apparaît)
Clics :       45     (45 personnes ont cliqué)
CTR :         3,75%  (dans la moyenne pour la position)
Position :    8,2    (en bas de page 1)
 
→ Action : améliorer le title et la meta description
  pour augmenter le CTR depuis la position 8

Indexation → Pages

Montre quelles pages sont indexées et lesquelles sont exclues, avec les raisons :

Expérience → Core Web Vitals

Données réelles des visites Chrome. Plus fiable que Lighthouse. Montre les URLs en rouge, orange, vert.

Liens

• Liens externes : qui vous linke et depuis quelles pages
• Liens internes : vos pages les plus linkées en interne
• Textes d'ancre : les mots-clés utilisés dans les liens vers vous

Flux de travail mensuel avec Search Console

1. Performance → Trier par Impressions ↓
   → Quelles requêtes génèrent beaucoup d'impressions mais peu de clics ?
   → Action : améliorer title/meta description de ces pages
 
2. Performance → Trier par Position ↓ (filtrer > 10)
   → Pages en position 11-20 (page 2)
   → Action : améliorer le contenu pour passer en page 1
 
3. Indexation → Pages → Statut "Erreur"
   → Corriger les 404, redirections cassées
 
4. Indexation → Pages → "Crawlé mais non indexé"
   → Pages que Google a jugées insuffisantes
   → Action : enrichir le contenu ou consolider avec d'autres pages
 
5. Core Web Vitals → Pages "Mauvaises"
   → Identifier et corriger les problèmes de performance

Les 20 erreurs SEO les plus fréquentes

1. Disallow: / en production — robots.txt de staging copié en prod. Vérifiez après chaque déploiement.

2. <title> identique sur toutes les pages — "Mon Site" partout. Chaque page a besoin d'un titre unique.

3. Pas de <meta name="description"> — Google génère une description médiocre depuis le contenu brut.

4. Plusieurs <h1> par page — problème fréquent avec les frameworks composant qui incluent un H1 dans chaque section.

5. Images sans alt — invisible pour Google Images, problème d'accessibilité.

6. Images sans dimensions — cause du CLS. width et height obligatoires.

7. loading="lazy" sur l'image hero — retarde le LCP. Lazy uniquement sous la ligne de flottaison.

8. Pas de balise canonical — HTTP/HTTPS, www/sans www, slash final : toutes ces variantes créent du contenu dupliqué.

9. Liens de navigation en JavaScript pur — <button onClick> sans <a href>. Googlebot ne les suit pas.

10. Redirections en chaîne — A → B → C → D. Chaque saut consomme du budget de crawl et dilue l'autorité. Maximum : 1 redirect par URL.

11. Pas de sitemap — sur un site de 30+ pages récent, Googlebot peut mettre des semaines à tout découvrir.

12. Pages orphelines — contenu accessible uniquement via la recherche interne ou du JS dynamique.

13. Textes d'ancre "cliquez ici" — aucune valeur SEO. Toujours décrire la destination.

14. Contenu trop court (< 300 mots) — les pages "thin content" sont généralement exclues de l'index.

15. Pas de HTTPS — depuis 2018, HTTP est un facteur négatif. Chrome marque ces sites "Non sécurisé".

16. URLs avec majuscules — /Mon-Article et /mon-article = deux URLs différentes pour Google.

17. Paramètres UTM dans l'index — si /article?utm_source=twitter est indexé, c'est du contenu dupliqué. Utilisez canonical ou robots.txt.

18. Images en PNG lourd — convertissez en WebP. Un PNG de 2Mo → WebP 200Ko, même qualité.

19. Données structurées invalides — JSON-LD avec erreurs de syntaxe. Testez sur search.google.com/test/rich-results.

20. Site non vérifié dans Search Console — vous naviguez à l'aveugle. Vérifiez et monitorez.

Checklist SEO technique complète

Fondations

• HTTPS activé, HTTP redirigé en 301
• robots.txt correct et testé
• Sitemap XML soumis dans Search Console
• Site vérifié dans Google Search Console
• lang="fr" sur la balise <html>
• metadataBase configuré (Next.js)

Par page

• <title> unique, 50-60 caractères, mot-clé en début
• <meta name="description"> unique, 120-155 caractères
• Un seul <h1> par page
• Hiérarchie des titres H1 → H2 → H3 logique
• <link rel="canonical"> sur toutes les pages
• Données structurées JSON-LD appropriées
• Open Graph (og:title, og:description, og:image)

Images

• Attribut alt descriptif sur toutes les images
• width et height sur toutes les images
• Format WebP ou AVIF
• fetchpriority="high" sur l'image LCP
• loading="lazy" uniquement sous la ligne de flottaison

Performance

• LCP ≤ 2,5s (Search Console ou PageSpeed)
• CLS ≤ 0,1
• INP ≤ 200ms
• TTFB ≤ 600ms
• Compression Gzip ou Brotli activée
• font-display: swap pour les polices

JavaScript (si framework JS)

• SSR ou SSG activé — pas de CSR pur
• Titre et meta générés côté serveur
• Tous les liens importants en <a href> (pas en JS pur)
• Code splitting pour le JS non-critique

Maillage

• 2-4 liens internes contextuels par article
• Textes d'ancre descriptifs
• Aucune page importante orpheline
• Sitemap complet et à jour

FAQ

Combien de temps avant de voir les effets des optimisations SEO ? 3 à 6 mois en général pour les nouveaux sites, 4 à 8 semaines pour les sites établis qui corrigent des problèmes techniques existants. Le SEO est un investissement long terme.

Faut-il créer du contenu souvent ou peu mais de qualité ? Qualité prime toujours sur quantité. Un article complet de 2000 mots sur un sujet précis surclassera dix articles de 200 mots. Google favorise les "articles de fond" (comprehensive content).

Les meta keywords servent-ils encore à quelque chose ? Non. Google a annoncé en 2009 ignorer la balise <meta name="keywords">. Bing non plus. Supprimez-la si vous l'avez — elle ne fait pas de mal mais ne sert à rien.

Comment savoir si mon site est pénalisé par Google ? Une chute brutale de trafic (visible dans Search Console → Performance) peut indiquer une pénalité (Google Core Update) ou un problème technique (robots.txt, indexation). Comparez les dates avec les annonces de mises à jour Google.

Est-ce que la vitesse du serveur affecte le SEO ? Oui. Le TTFB (Time To First Byte) et le LCP entrent dans les Core Web Vitals. Un serveur lent signifie des CWV mauvais, qui peuvent impacter le classement. Utilisez un CDN, un cache (Redis, Nginx) et un hébergeur proche de vos utilisateurs.

À faire : Ouvrez Google Search Console. Parcourez les rapports Indexation et Performance. Identifiez : (1) les pages avec des erreurs à corriger, (2) les requêtes avec beaucoup d'impressions et peu de clics, (3) vos pages avec des CWV mauvais. Ces trois listes sont votre backlog SEO prioritaire.