Guide complet SEO pour sites Astro : des balises meta au classement dans les recherches

Easton editorial illustration: island architecture model

Vous avez passé une semaine à construire un beau blog avec Astro, impatients de le publier. Deux mois plus tard, vous cherchez le titre de votre article sur Google et ne le trouvez pas avant la troisième page. Chaque jour, Google Analytics affiche un nombre de visiteurs à un chiffre. Vous commencez à vous demander : est-ce que quelque chose cloche ?

J’ai vécu cette phase aussi. À l’époque, je venais de migrer de Next.js vers Astro, attiré par ses excellentes performances — un site jusqu’à 40 % plus rapide qu’un framework React traditionnel, avec un score Lighthouse proche de 100. Le site était rapide, mais le classement dans les recherches n’a pas suivi. J’ai fini par comprendre : la performance seule ne suffit pas, la configuration SEO est la clé.

La bonne nouvelle : l’optimisation SEO avec Astro n’est pas si compliquée. Dans cet article, je vous guide pas à pas pour configurer un schéma SEO complet : balises meta, sitemap, robots.txt, données structurées. Chaque section inclut des exemples de code prêts à copier. En suivant le guide, la configuration de base prend 30 minutes. Une à deux semaines plus tard, vous verrez probablement de bonnes nouvelles dans Google Search Console.

Pourquoi Astro est particulièrement adapté au SEO ?

Avant d’entrer dans la configuration, voyons pourquoi j’ai choisi Astro pour les sites orientés contenu.

Les avantages SEO natifs d’Astro

La caractéristique majeure d’Astro, c’est zéro JavaScript par défaut. Oui, zéro. Il génère directement du HTML statique ; les crawlers voient du contenu HTML pur, sans attendre l’exécution du JS.

Cette « architecture Islands » est particulièrement intelligente. Le corps de la page est en HTML statique ; seules les parties interactives (comme un bouton de like) chargent du JS. Le temps de chargement initial est très rapide — les crawlers de Google adorent ça.

Avec Next.js, même en SSR, les fichiers JS restaient volumineux. Après migration vers Astro, le volume JavaScript a diminué de 90 %. Le score Lighthouse est passé de 78 à 98.

90%

Réduction du volume JS

Après migration de Next.js vers Astro

78→98

Amélioration Lighthouse

Gain de 20 points

30 min

Temps de configuration

Configuration SEO de base terminée

Comparaison avec d’autres frameworks

Franchement, chaque framework convient à un usage différent. Voici un rapide comparatif :

Astro : idéal pour les blogs, sites documentaires et sites marketing orientés contenu. Chargement très rapide ; en 2025, l’adoption chez les développeurs a atteint 18 %.

Next.js : mieux adapté aux applications web complexes (back-office, e-commerce). Si vous avez besoin de beaucoup de gestion d’état côté client, Next.js sera plus approprié.

Gatsby : génération statique aussi, similaire à Astro. Mais les bundles Gatsby sont plus volumineux et la construction est plus lente.

Un cas concret : un ami a migré son blog technique de Next.js vers Astro ; la vitesse de chargement a augmenté d’environ 50 %. Google Search Console montrait une durée moyenne de session passant de 1 min 20 s à 2 min 10 s. Un gain bien visible.

Configuration de base — Balises meta complètes

Entrons dans le vif du sujet. Les balises meta sont la première étape du SEO, et aussi celle qu’on oublie le plus souvent.

Le trio essentiel : title, description, keywords

Au début avec Astro, j’ai aussi bloqué sur les balises meta. Face à une multitude de <meta>, difficile de savoir par où commencer. En réalité, l’essentiel tient en trois éléments :

Balise title : la plus importante — c’est le grand titre affiché dans les résultats Google. Idéalement 50-60 caractères, au-delà c’est tronqué. Par exemple, le title de cet article est « Guide complet SEO pour sites Astro : des balises meta au classement dans les recherches ».

Balise description : le texte gris sous le titre dans les résultats. 120-160 caractères, avec les mots-clés principaux. Google utilise le CTR pour évaluer vos résultats. Une description bien optimisée peut augmenter le CTR de 20 à 30 %.

Balise keywords : honnêtement, peu importante aujourd’hui — Google l’ignore largement. Mais 3-5 mots-clés ne font pas de mal.

La configuration dans Astro est simple, directement dans le <head> du fichier .astro :


---
const title = "Guide complet SEO pour sites Astro";
const description = "Configurez pas à pas un schéma SEO complet pour votre site Astro, incluant balises meta, sitemap, robots.txt et données structurées.";
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta name="keywords" content="Astro SEO, optimisation Astro, balises meta, sitemap" />
</head>

Open Graph et Twitter Card

Ces balises servent au partage sur les réseaux sociaux. Quand quelqu’un partage un lien sur WeChat ou Twitter, le titre, la description et l’image s’affichent automatiquement — c’est le rôle des balises Open Graph (OG).

Au début, face à toutes ces balises og:xxx, je ne savais pas lesquelles étaient indispensables. Voici l’essentiel :

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content="https://votresite.com/og-image.jpg" />
<meta property="og:url" content="https://votresite.com/chemin-de-la-page" />
<meta property="og:type" content="article" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content="https://votresite.com/twitter-image.jpg" />

Piège og:image : la taille compte. Recommandé : 1200x630 px. La première fois, j’ai utilisé une image 500x300 — le partage WeChat était flou. En passant à 1200x630, la différence était immédiate.

Centraliser avec un composant

Écrire les balises meta page par page, c’est fastidieux. Mieux vaut créer un composant BaseHead.astro pour tout centraliser.

Créez src/components/BaseHead.astro :


---
interface Props {
  title: string;
  description: string;
  image?: string;
}

const { title, description, image = "/default-og-image.jpg" } = Astro.props;
const canonicalURL = new URL(Astro.url.pathname, Astro.site);
---

<head>
  <!-- Meta de base -->
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />

  <!-- SEO -->
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalURL} />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content={canonicalURL} />
  <meta property="og:title" content={title} />
  <meta property="og:description" content={description} />
  <meta property="og:image" content={new URL(image, Astro.site)} />

  <!-- Twitter -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={new URL(image, Astro.site)} />
</head>

Puis importez-le dans vos pages :


---
import BaseHead from '../components/BaseHead.astro';
---

<html>
  <BaseHead
    title="Titre de mon article"
    description="Description de l'article"
    image="/my-article-cover.jpg"
  />
  <body>
    <!-- Contenu de la page -->
  </body>
</html>

Avec Content Collections, vous pouvez extraire automatiquement titre et description du frontmatter — encore plus pratique. Chaque nouvel article aura ses balises meta configurées automatiquement.

Configuration avancée — Sitemap et Robots.txt

Une fois les balises meta en place, il faut que Google trouve votre site. C’est le rôle du sitemap et de robots.txt.

Sitemap : indiquer vos pages aux moteurs de recherche

Un sitemap est un fichier XML listant toutes les pages de votre site. Les crawlers Google savent ainsi quoi indexer. Avec un sitemap, le délai d’indexation peut être réduit d’environ 50 %.

La configuration est très simple : Astro propose l’intégration officielle @astrojs/sitemap, une commande suffit :

npx astro add sitemap

Cette commande modifie automatiquement astro.config.mjs. La configuration ressemble à ceci :

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://votresite.com',  // Remplacez par votre domaine
  integrations: [sitemap()],
});

Important : le champ site est obligatoire, sinon le sitemap ne se génère pas. J’ai oublié de le configurer la première fois — l’erreur au build m’a rappelé à l’ordre.

Après npm run build, Astro génère sitemap-0.xml et sitemap-index.xml dans dist/. Au-delà de 50 000 pages, le sitemap est automatiquement découpé.

N’oubliez pas d’ajouter le lien sitemap dans le <head> :

<link rel="sitemap" href="/sitemap-index.xml" />

Robots.txt : règles de crawl

Robots.txt indique aux moteurs quelles pages indexer et lesquelles ignorer. Vos pages d’administration ou de test ne doivent pas apparaître dans Google.

Trois méthodes ; je recommande la première pour débuter :

Méthode 1 : fichier statique (recommandé pour débuter)

Créez robots.txt dans public/ :

User-agent: *
Allow: /

Sitemap: https://votresite.com/sitemap-index.xml

Signification : tous les moteurs peuvent crawler toutes les pages ; le sitemap est à cette adresse.

Pour interdire certains chemins, ajoutez Disallow :

User-agent: *
Allow: /
Disallow: /admin/
Disallow: /test/

Sitemap: https://votresite.com/sitemap-index.xml

Méthode 2 : génération dynamique

Pour réutiliser la config site de astro.config.mjs, créez src/pages/robots.txt.ts :

import type { APIRoute } from 'astro';

const robotsTxt = `
User-agent: *
Allow: /

Sitemap: ${import.meta.env.SITE}/sitemap-index.xml
`.trim();

export const GET: APIRoute = () => {
  return new Response(robotsTxt, {
    headers: { 'Content-Type': 'text/plain' },
  });
};

Méthode 3 : plugin

Le plugin astro-robots-txt évite l’écriture manuelle :

npm install astro-robots-txt

Puis dans astro.config.mjs :

import robotsTxt from 'astro-robots-txt';

export default defineConfig({
  site: 'https://votresite.com',
  integrations: [
    sitemap(),
    robotsTxt(),
  ],
});

Particularités SEO pour Baidu

Baidu a une exigence spécifique : il ne prend pas en charge sitemap-index.xml. Si robots.txt pointe vers sitemap-index.xml, Baidu affiche « Robots bloqué » et ne peut pas crawler.

Deux solutions si vous ciblez Baidu :

Dans robots.txt, indiquer uniquement un fichier sitemap unique (ex. sitemap-0.xml), pas sitemap-index.xml
Soumettre manuellement un sitemap simplifié via la plateforme Baidu Webmaster

Mon approche : Google en priorité, soumission manuelle à Baidu. Pour la plupart des blogs techniques, le trafic Google est dominant.

Soumettre à Google Search Console

Après sitemap et robots.txt, soumettez le sitemap dans Google Search Console :

Ajoutez votre site et vérifiez la propriété
Menu « Sitemaps » à gauche
Entrez sitemap-index.xml et soumettez

En général, Google commence à crawler sous 1 à 3 jours. Vous verrez la progression et les problèmes détectés. La première fois que « Découvertes » est passé à « Indexées », c’était une vraie satisfaction.

Optimisation avancée — Données structurées (JSON-LD)

Les données structurées semblent intimidantes, mais la configuration est simple — et l’effet est notable.

Qu’est-ce que les données structurées ? Pourquoi les configurer ?

Certains résultats de recherche sont particulièrement riches : note, date de publication, photo de l’auteur, temps de cuisson d’une recette… Ce sont les « extraits enrichis » (Rich Snippets), alimentés par les données structurées.

En bref, vous indiquez à Google dans un format qu’il comprend : « ceci est un article de blog », « voici l’auteur », « voici la date de publication ». Comme des étiquettes sur votre site.

Google recommande le format JSON-LD, basé sur JSON et intuitif. Après configuration, le CTR des résultats augmente sensiblement — sur mon blog, environ 15 %.

Implémenter JSON-LD dans Astro

Dans Astro, utilisez la directive set:html. Créez par exemple src/components/StructuredData.astro :


---
interface Props {
  type: 'WebSite' | 'BlogPosting' | 'Article';
  title: string;
  description: string;
  author?: string;
  datePublished?: string;
  image?: string;
}

const {
  type = 'Article',
  title,
  description,
  author = 'Votre nom',
  datePublished,
  image
} = Astro.props;

const canonicalURL = new URL(Astro.url.pathname, Astro.site);

const structuredData = {
  "@context": "https://schema.org",
  "@type": type,
  "headline": title,
  "description": description,
  "author": {
    "@type": "Person",
    "name": author
  },
  "datePublished": datePublished,
  "image": image ? new URL(image, Astro.site).href : undefined,
  "url": canonicalURL.href,
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": canonicalURL.href
  }
};
---

<script type="application/ld+json" set:html={JSON.stringify(structuredData)} />

Puis dans vos pages d’article :


---
import StructuredData from '../components/StructuredData.astro';

const frontmatter = {
  title: "Guide complet SEO pour sites Astro",
  description: "Configurez pas à pas le SEO Astro",
  author: "Zhang San",
  pubDate: "2025-12-02",
  coverImage: "/cover.jpg"
};
---

<html>
  <head>
    <StructuredData
      type="BlogPosting"
      title={frontmatter.title}
      description={frontmatter.description}
      author={frontmatter.author}
      datePublished={frontmatter.pubDate}
      image={frontmatter.coverImage}
    />
  </head>
  <body>
    <!-- Contenu de l'article -->
  </body>
</html>

Attention : utilisez impérativement set:html, sinon Astro échappera le JSON en texte et ça ne fonctionnera pas.

Types Schema courants

Selon le type de site :

WebSite : pour la page d’accueil

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Nom de votre site",
  "url": "https://votresite.com",
  "description": "Description du site"
}

BlogPosting : pour les articles de blog

{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "Titre de l'article",
  "author": {
    "@type": "Person",
    "name": "Nom de l'auteur"
  },
  "datePublished": "2025-12-02",
  "image": "URL de l'image de couverture"
}

Article : pour les contenus type actualité, similaire à BlogPosting mais avec des exigences Google plus strictes.

Pour le typage TypeScript, le package astro-seo-schema :

npm install schema-dts astro-seo-schema

Il fournit des définitions TypeScript complètes avec autocomplétion.

Validation et tests

Après configuration, validez impérativement :

Validateur Schema.org : collez l’URL, vérifiez la conformité JSON-LD
Google Rich Results Test : indique si Google reconnaît correctement vos données structurées

Utilisez les deux — parfois l’un passe et l’autre signale un avertissement. Les deux doivent être OK.

Erreurs courantes :

Champs obligatoires manquants (ex. datePublished)
URL d’image incomplète (chemin absolu, pas relatif)
Erreur de format JSON (virgule en trop ou guillemet manquant)

La première fois que mon site affichait note et date de publication dans Google, la satisfaction était réelle. La configuration demande un peu de travail, mais le résultat le vaut.

Les performances font aussi partie du SEO

Beaucoup ignorent que la performance influence le classement. Google l’a confirmé : la vitesse de chargement compte.

Core Web Vitals : les trois métriques Google

LCP (Largest Contentful Paint) : temps de chargement du contenu principal. Standard : moins de 2,5 s. Au-delà de 4 s, c’est mauvais.

FID (First Input Delay) : délai entre le premier clic et la réponse du navigateur. Standard : moins de 100 ms.

CLS (Cumulative Layout Shift) : décalages visuels inattendus — vous voulez cliquer un bouton, une image se charge et le bouton descend. Standard : moins de 0,1.

Ces trois métriques influencent directement le classement. Astro performe naturellement bien ; avec un peu d’attention, l’objectif est facilement atteignable.

Astuces d’optimisation des performances Astro

Optimisation des images

Les images ralentissent souvent un site. L’intégration @astrojs/image (désormais intégrée au cœur d’Astro) optimise automatiquement :

# Anciennes versions — désormais intégré
# npm install @astrojs/image

Utilisez le composant <Image> d’Astro :


---
import { Image } from 'astro:assets';
import myImage from '../assets/my-image.jpg';
---

<Image
  src={myImage}
  alt="Description de l'image"
  width={800}
  height={600}
  loading="lazy"
/>

Ce composant :

Génère plusieurs tailles selon l’appareil
Convertit en WebP (plus léger)
Applique le lazy loading

Sur un projet avec 10 grandes images en page d’accueil, le LCP est passé de 4,2 s à 1,8 s après migration vers <Image>.

Optimisation des polices

Les polices personnalisées pénalisent aussi les performances. Solution simple : font-display: swap :

@font-face {
  font-family: 'MyFont';
  src: url('/fonts/my-font.woff2') format('woff2');
  font-display: swap; /* Clé */
}

font-display: swap : afficher d’abord la police système, puis basculer une fois la police chargée — pas de page blanche.

Mieux encore avec la version optimisée de Google Fonts :

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

Notez le &display=swap à la fin de l’URL.

Découpage du code et lazy loading

L’architecture Islands d’Astro est déjà une excellente stratégie de code splitting. Si vous utilisez des composants React ou Vue, ajoutez le lazy loading :


---
import MyHeavyComponent from '../components/MyHeavyComponent.jsx';
---

<!-- Charge uniquement quand le composant entre dans le viewport -->
<MyHeavyComponent client:visible />

La directive client:visible charge le JS seulement quand le composant est visible — gain significatif sur le temps de chargement initial.

Surveiller avec Lighthouse

Comment mesurer l’effet ? Lancez Lighthouse.

Dans Chrome, F12 → onglet « Lighthouse » → « Analyze page load ». Score sur 100 et liste des problèmes de performance.

Avant chaque release, je vérifie que le score reste au-dessus de 90. En dessous, j’identifie la cause et j’optimise.

L’outil en ligne PageSpeed Insights accepte une URL et affiche aussi les données de performance réelles des utilisateurs.

L’avantage d’Astro : zéro JS par défaut, excellente base de performance. Après reconstruction de mon blog, le score Lighthouse est passé de 78 à 98 — un gain immédiat.

Checklist pratique et problèmes courants

Voici une checklist pour avancer point par point.

Checklist SEO (15 vérifications essentielles)

Configuration de base

Champ site configuré dans astro.config.mjs
Composant BaseHead.astro créé pour centraliser les balises meta
Title unique sur chaque page (50-60 caractères)
Description sur chaque page (120-160 caractères)
Balises Open Graph (title, description, image, url)
Balises Twitter Card

Sitemap et Robots

@astrojs/sitemap installé et configuré
Lien sitemap ajouté dans <head>
Fichier robots.txt créé
Sitemap soumis dans Google Search Console

Données structurées

JSON-LD WebSite sur la page d’accueil
JSON-LD BlogPosting/Article sur les pages d’article
Validation Schema.org OK
Google Rich Results Test OK

Performances

Score Lighthouse ≥ 90
Core Web Vitals OK (LCP < 2,5 s, FID < 100 ms, CLS < 0,1)

Imprimez cette liste et cochez chaque point. Une fois tout validé, le SEO de base de votre site Astro est en place.

Dépannage des problèmes courants

Q1 : Mon site n’est pas indexé par Google ?

Causes et solutions possibles :

robots.txt bloque le crawl : vérifiez s’il y a Disallow: / — supprimez-le
Sitemap non soumis : soumettez-le dans Google Search Console
Site trop récent : comptez 1-2 semaines pour l’indexation
Contenu de faible qualité : Google ignore le contenu sans valeur — assurez-vous que vos articles apportent quelque chose

Q2 : Erreur après soumission du sitemap ?

Vérifiez :

Le champ site dans astro.config.mjs
L’URL du sitemap est accessible (votresite.com/sitemap-index.xml)
Aucune page ne renvoie 404
Pour Baidu : pas de sitemap-index (non supporté)

Q3 : Comment faire le SEO Baidu ?

Quelques différences avec Google :

Dans robots.txt, un fichier sitemap unique, pas sitemap-index.xml
Soumission manuelle via Baidu Webmaster Platform
Baidu est plus strict pour les nouveaux sites, indexation plus lente
Baidu accorde plus d’importance à la qualité et l’originalité du contenu chinois

Q4 : SEO pour site multilingue ?

Configurez les balises hreflang :

<link rel="alternate" hreflang="zh-CN" href="https://votresite.com/zh/article" />
<link rel="alternate" hreflang="en-US" href="https://votresite.com/en/article" />
<link rel="alternate" hreflang="x-default" href="https://votresite.com/en/article" />

x-default indique la version linguistique par défaut. Google identifie ainsi les relations entre versions linguistiques.

Optimisation continue

Le SEO n’est pas un réglage unique — il faut itérer :

Mettre à jour le contenu régulièrement : les sites mis à jour se classent environ 30 % mieux. Publiez au moins 1-2 articles par semaine.

Surveiller Google Search Console :

Mots-clés générateurs de trafic
Pages à faible CTR — optimiser title et description
Erreurs de crawl à corriger

Analyser les requêtes de recherche :

Quels termes amènent les visiteurs
Créer du contenu autour de ces termes
Enrichir les articles existants

Optimiser les pages à faible CTR :

Beaucoup d’impressions mais peu de clics → title ou description peu attractifs
Réécrire une description plus convaincante
Ajouter chiffres, questions ou mots émotionnels au title

Chaque semaine, je consacre une heure à Search Console pour repérer les optimisations. Cette habitude paie clairement sur le classement.

Conclusion

En résumé : Astro est naturellement adapté au SEO, et la configuration reste accessible.

Trois piliers :

Balises meta de base : title, description, OG — centralisez avec BaseHead
Sitemap et robots.txt : intégration officielle en une commande, n’oubliez pas Search Console
Données structurées : JSON-LD pour viser les extraits enrichis

Ne négligez pas les performances : score Lighthouse 90+ requis. Lazy loading des images, font-display: swap — ces détails comptent.

La configuration SEO demande un peu de patience, mais le gain de classement le justifie. Suivez cet article : 30 minutes pour l’essentiel. Une à deux semaines plus tard, vous verrez probablement votre site indexé dans Google Search Console.

Ouvrez votre projet Astro maintenant, suivez la checklist, soumettez le sitemap et attendez. Une semaine plus tard, vous constaterez probablement une amélioration du classement.

Bon courage !

Processus complet d'optimisation SEO pour site Astro

Configuration SEO complète en 30 minutes, des balises meta à l'amélioration du classement, incluant sitemap, robots.txt et données structurées JSON-LD

⏱️ Estimated time: 30 min

1
Step 1: Comprendre les avantages SEO d'Astro et configurer les balises meta de base
Avantages SEO natifs d'Astro :
• Zéro JavaScript par défaut, génération d'HTML statique
• Les crawlers voient du HTML pur
• L'architecture Islands : corps de page en HTML statique, JS uniquement pour l'interactivité
• Volume JS réduit de 90 %, score Lighthouse de 78 à 98

Trio essentiel :

title (titre)
• Titre unique et descriptif sur chaque page
• Longueur : 50-60 caractères
• Inclure des mots-clés

description
• Description sur chaque page
• Longueur : 150-160 caractères
• Inciter au clic

keywords
• Google ne les utilise plus, mais d'autres moteurs si
• À conserver, 3-5 mots-clés suffisent

Configuration dans Astro :
• Ajouter un composant Head dans le Layout
• Lire title et description depuis le frontmatter
• Générer dynamiquement les balises meta
2
Step 2: Configurer les balises Open Graph et Twitter Card
Balises Open Graph :
• og:title : titre au partage, généralement identique au title
• og:description : description au partage
• og:image : image au partage, 1200x630 px recommandé
• og:url : URL complète de la page
• og:type : type de page, article pour un blog, website pour l'accueil

Balises Twitter Card :
• twitter:card : type de carte, summary_large_image ou summary
• twitter:title : titre sur Twitter
• twitter:description : description sur Twitter
• twitter:image : image sur Twitter

Configuration dans Astro :
• Créer un composant SEO avec title, description, image, etc.
• Générer toutes les balises Open Graph et Twitter Card
• L'utiliser dans le composant Layout
3
Step 3: Configurer le sitemap et robots.txt
Installer l'intégration Sitemap :
• Exécuter : npm install @astrojs/sitemap
• Ajouter l'intégration sitemap dans astro.config.mjs
• Configurer l'URL du site

Génération automatique de sitemap.xml :
• Astro scanne toutes les pages
• Génère le fichier sitemap.xml
• Inclut URL, date de modification, priorité, etc.

Créer robots.txt :
• Créer robots.txt dans le dossier public
• Règles de crawl (autoriser tous les crawlers, indiquer le sitemap)

Soumettre le sitemap :
• Se connecter à Google Search Console
• Soumettre l'URL du sitemap.xml
• Vérifier régulièrement l'indexation
4
Step 4: Ajouter les données structurées JSON-LD
Pourquoi les données structurées :
• Enrichir les résultats de recherche
• Afficher plus d'infos (note, auteur, date de publication, etc.)
• Améliorer le taux de clic

Types courants :

Article (page d'article)
• Titre, auteur, date, catégorie, etc.

BreadcrumbList (fil d'Ariane)
• Aide à comprendre la structure du site

Organization (informations organisation)
• Logo, coordonnées, etc.

Configuration dans Astro :
• Créer un composant de données structurées
• Générer le JSON-LD selon le type de page
• L'utiliser dans le Layout

Validation :
• Google Rich Results Test pour vérifier le JSON-LD
• Contrôler erreurs et avertissements
5
Step 5: Bonnes pratiques SEO et optimisation continue
Bonnes pratiques SEO : title et description uniques et descriptifs sur chaque page, HTML sémantique (<article>, <section>, <header>, etc.), optimisation des images (alt, WebP, lazy loading), structure d'URL significative avec mots-clés, liens internes vers des articles connexes. Optimisation continue : mettre à jour le contenu régulièrement (selon les études, les sites mis à jour régulièrement se classent environ 30 % mieux que les sites statiques, publier 1-2 articles par semaine), surveiller Google Search Console (mots-clés générateurs de trafic, pages à faible CTR, optimiser title et description, corriger les erreurs de crawl), analyser les requêtes de recherche des utilisateurs. Ne pas négliger les performances : score Lighthouse 90+ requis, lazy loading des images, font-display: swap — ces détails améliorent le classement.

FAQ

Pourquoi Astro est-il particulièrement adapté au SEO ? Quels sont ses avantages natifs ?

Avantages SEO natifs d'Astro :
• Zéro JavaScript par défaut, génération d'HTML statique
• Les crawlers voient du HTML pur, sans attendre l'exécution du JS

L'architecture Islands est particulièrement intelligente :
• Le corps de page est en HTML statique, seules les parties interactives (comme un bouton like) chargent du JS
• Temps de chargement initial très rapide, apprécié par Google

Avec Next.js, même en SSR, les fichiers JS restaient volumineux. Après migration vers Astro, le volume JS a diminué de 90 %, le score Lighthouse est passé de 78 à 98.

Comparaison avec d'autres frameworks :
• Astro convient aux blogs, sites documentaires et sites marketing orientés contenu ; en 2025, son adoption chez les développeurs a atteint 18 %
• Next.js convient mieux aux applications web complexes (back-office, e-commerce)
• Gatsby génère aussi du statique, similaire à Astro, mais avec des bundles plus volumineux et une construction plus lente

Comment configurer les balises meta d'un site Astro ?

Trio essentiel :
• title (titre unique et descriptif, 50-60 caractères, avec mots-clés)
• description (150-160 caractères, inciter au clic)
• keywords (Google ne les utilise plus, mais d'autres moteurs si — à conserver)

Configuration dans Astro : ajouter un composant Head dans le Layout, lire title et description depuis le frontmatter, générer dynamiquement les balises meta.

Balises Open Graph :
• og:title, og:description, og:image (1200x630 px), og:url, og:type (article pour un blog, website pour l'accueil)

Balises Twitter Card :
• twitter:card (summary_large_image ou summary), twitter:title, twitter:description, twitter:image

Configuration dans Astro : créer un composant SEO, générer toutes les balises, l'utiliser dans le Layout.

Comment configurer le sitemap et robots.txt ?

Installer l'intégration Sitemap :
• npm install @astrojs/sitemap
• Ajouter l'intégration dans astro.config.mjs, configurer l'URL du site

Génération automatique de sitemap.xml :
• Astro scanne toutes les pages et génère sitemap.xml
• Inclut URL, date de modification, priorité, etc.

Créer robots.txt :
• Créer robots.txt dans public
• Règles de crawl (autoriser tous les crawlers, indiquer le sitemap)

Soumettre le sitemap :
• Google Search Console, soumettre l'URL du sitemap.xml
• Vérifier régulièrement l'indexation

Notes SEO Baidu :
• Ne pas mettre sitemap-index.xml dans robots.txt, utiliser un fichier sitemap unique
• Soumettre manuellement via la plateforme Baidu Webmaster
• Baidu est plus strict pour les nouveaux sites, indexation plus lente que Google
• Baidu accorde plus d'importance à la qualité et l'originalité du contenu chinois

Comment ajouter les données structurées JSON-LD ?

Pourquoi les données structurées :
• Enrichir les résultats de recherche
• Afficher plus d'informations (note, auteur, date, etc.)
• Améliorer le taux de clic

Types courants :
• Article (titre, auteur, date, catégorie)
• BreadcrumbList (fil d'Ariane)
• Organization (logo, coordonnées)

Configuration dans Astro :
• Créer un composant de données structurées
• Générer le JSON-LD selon le type de page
• L'utiliser dans le Layout

Validation :
• Google Rich Results Test
• Vérifier erreurs et avertissements

Problèmes courants :
• Format incorrect (vérifier le JSON-LD)
• Champs obligatoires manquants

Quelles sont les bonnes pratiques SEO ? Comment optimiser en continu ?

Bonnes pratiques SEO :
• Title et description uniques et descriptifs sur chaque page
• HTML sémantique (<article>, <section>, <header>, etc.)
• Optimisation des images (alt, WebP, lazy loading)
• Structure d'URL significative avec mots-clés
• Liens internes vers des articles connexes

Optimisation continue :
• Mettre à jour le contenu régulièrement (sites mis à jour : ~30 % de meilleur classement, 1-2 articles par semaine)
• Surveiller Google Search Console (mots-clés, pages à faible CTR, erreurs de crawl)
• Analyser les requêtes de recherche des utilisateurs

Performances : score Lighthouse 90+, lazy loading des images, font-display: swap.

Comment configurer le SEO d'un site multilingue ?

Pour un site multilingue, configurer les balises hreflang :
• <link rel="alternate" hreflang="zh-CN" href="https://votresite.com/zh/article" />
• <link rel="alternate" hreflang="en-US" href="https://votresite.com/en/article" />
• <link rel="alternate" hreflang="x-default" href="https://votresite.com/en/article" />

x-default indique la version linguistique par défaut. Google identifie ainsi les relations entre versions.

Chaque langue doit avoir son propre sitemap, soumis séparément dans Google Search Console.

15 min de lecture · Publié le: 2 déc. 2025 · Mis à jour le: 27 juil. 2026

Easton

Technologie

Guide complet SEO pour sites Astro : des balises meta au classement dans les recherches

Pourquoi Astro est particulièrement adapté au SEO ?

Les avantages SEO natifs d’Astro

Comparaison avec d’autres frameworks

Configuration de base — Balises meta complètes

Le trio essentiel : title, description, keywords

Open Graph et Twitter Card

Centraliser avec un composant

Configuration avancée — Sitemap et Robots.txt

Sitemap : indiquer vos pages aux moteurs de recherche

Robots.txt : règles de crawl

Particularités SEO pour Baidu

Soumettre à Google Search Console

Optimisation avancée — Données structurées (JSON-LD)

Qu’est-ce que les données structurées ? Pourquoi les configurer ?

Implémenter JSON-LD dans Astro

Types Schema courants

Validation et tests

Les performances font aussi partie du SEO

Core Web Vitals : les trois métriques Google

Astuces d’optimisation des performances Astro

Surveiller avec Lighthouse

Checklist pratique et problèmes courants

Checklist SEO (15 vérifications essentielles)

Dépannage des problèmes courants

Optimisation continue

Conclusion

Processus complet d'optimisation SEO pour site Astro

Step 1: Comprendre les avantages SEO d'Astro et configurer les balises meta de base

Step 2: Configurer les balises Open Graph et Twitter Card

Step 3: Configurer le sitemap et robots.txt

Step 4: Ajouter les données structurées JSON-LD

Step 5: Bonnes pratiques SEO et optimisation continue

FAQ

Guide Astro

Guide i18n Astro : site multilingue en 30 minutes (avec sélecteur de langue)

Guide complet d'optimisation des performances Astro : 8 astuces pour passer de 60 à un Lighthouse parfait

Qu'est-ce qu'Astro ? Zéro JS, architecture Islands et priorité au contenu en 3 minutes

Créer un blog Astro de zéro : guide complet de la page d'accueil au déploiement en 1 heure

Commentaires

Pourquoi Astro est particulièrement adapté au SEO ?

Les avantages SEO natifs d’Astro

Comparaison avec d’autres frameworks

Configuration de base — Balises meta complètes

Le trio essentiel : title, description, keywords

Open Graph et Twitter Card

Centraliser avec un composant

Configuration avancée — Sitemap et Robots.txt

Sitemap : indiquer vos pages aux moteurs de recherche

Robots.txt : règles de crawl

Particularités SEO pour Baidu

Soumettre à Google Search Console

Optimisation avancée — Données structurées (JSON-LD)

Qu’est-ce que les données structurées ? Pourquoi les configurer ?

Implémenter JSON-LD dans Astro

Types Schema courants

Validation et tests

Les performances font aussi partie du SEO

Core Web Vitals : les trois métriques Google

Astuces d’optimisation des performances Astro

Surveiller avec Lighthouse

Checklist pratique et problèmes courants

Checklist SEO (15 vérifications essentielles)

Dépannage des problèmes courants

Optimisation continue

Conclusion

Processus complet d'optimisation SEO pour site Astro

Step 1: Comprendre les avantages SEO d'Astro et configurer les balises meta de base

Step 2: Configurer les balises Open Graph et Twitter Card

Step 3: Configurer le sitemap et robots.txt

Step 4: Ajouter les données structurées JSON-LD

Step 5: Bonnes pratiques SEO et optimisation continue

FAQ

Guide Astro

Guide i18n Astro : site multilingue en 30 minutes (avec sélecteur de langue)

Guide complet d'optimisation des performances Astro : 8 astuces pour passer de 60 à un Lighthouse parfait

Articles liés

Qu'est-ce qu'Astro ? Zéro JS, architecture Islands et priorité au contenu en 3 minutes

Créer un blog Astro de zéro : guide complet de la page d'accueil au déploiement en 1 heure

Commentaires