@astrojs/ sitemap

Cette intégration Astro génère un sitemap basé sur vos pages lorsque vous construisez votre projet Astro.

Pourquoi Astro Sitemap ?

Titre de la section Pourquoi Astro Sitemap ?

Un plan du site est un fichier XML qui décrit toutes les pages, vidéos et fichiers de votre site. Les moteurs de recherche comme Google lisent ce fichier pour explorer votre site plus efficacement. Pour en savoir plus, consultez les conseils de Google sur les sitemaps.

Il est recommandé d’utiliser un fichier sitemap pour les grands sites multipages. Si vous n’utilisez pas de sitemap, la plupart des moteurs de recherche seront toujours en mesure de lister les pages de votre site, mais un sitemap est un excellent moyen de s’assurer que votre site est aussi convivial que possible pour les moteurs de recherche.

Avec Astro Sitemap, vous n’avez pas à vous soucier de créer ce fichier XML vous-même : l’intégration Astro Sitemap va explorer vos routes générées statiquement et créer le fichier sitemap, y compris les routes dynamiques comme [...slug] ou src/pages/[lang]/[version]/info.astro généré par getStaticPaths().

Cette intégration ne peut pas générer d’entrées sitemap pour les routes dynamiques en mode SSR.

Installation

Titre de la section Installation

Astro inclut une commande astro add pour automatiser l’installation des intégrations officielles. Si vous préférez, vous pouvez installer les intégrations manuellement à la place.

Exécutez l’une des commandes suivantes dans une nouvelle fenêtre de terminal.

npm

npx astro add sitemap

pnpm

pnpm astro add sitemap

Yarn

yarn astro add sitemap

Si vous rencontrez des problèmes, n’hésitez pas à nous les signaler sur GitHub et essayez les étapes d’installation manuelle ci-dessous.

Installation manuelle

Titre de la section Installation manuelle

Tout d’abord, installez le paquet @astrojs/sitemap en utilisant votre gestionnaire de paquets.

npm

npm install @astrojs/sitemap

pnpm

pnpm add @astrojs/sitemap

Yarn

yarn add @astrojs/sitemap

Ensuite, appliquez l’intégration à votre fichier astro.config.* en utilisant la propriété integrations :

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

export default defineConfig({
  // ...
  integrations: [sitemap()],
});

Utilisation

Titre de la section Utilisation

@astrojs/sitemap a besoin de connaître l’URL déployée de votre site pour générer un sitemap.

Ajoutez l’URL de votre site comme option site dans astro.config.mjs. Elle doit commencer par http:// ou https://.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [sitemap()],
  // ...
});

Avec l’intégration du sitemap configurée, les fichiers sitemap-index.xml et sitemap-0.xml seront ajoutés à votre répertoire de sortie lors de la construction de votre site.

sitemap-index.xml renvoie à tous les fichiers sitemap numérotés. sitemap-0.xml liste les pages de votre site. Pour les sites de très grande taille, il peut y avoir des fichiers numérotés supplémentaires comme sitemap-1.xml et sitemap-2.xml.

Exemple de fichiers générés pour un site web de deux pages

sitemap-index.xml

<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://stargazers.club/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>

sitemap-0.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://stargazers.club/</loc>
  </url>
  <url>
    <loc>https://stargazers.club/second-page/</loc>
  </url>
</urlset>

Découverte du plan du site

Titre de la section Découverte du plan du site

Vous pouvez faciliter la recherche de votre sitemap par les robots d’indexation en insérant des liens dans <head> et dans le fichier robots.txt de votre site.

Lien vers le plan du site dans l’élément <head>

Titre de la section Lien vers le plan du site dans l’élément <head>

Ajoutez un élément <link rel="sitemap"> dans le <head> de votre site qui pointe vers le fichier index du sitemap :

src/layouts/Layout.astro

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

Lien vers le plan du site dans le fichier robots.txt

Titre de la section Lien vers le plan du site dans le fichier robots.txt

Si vous avez un fichier robots.txt pour votre site web, vous pouvez ajouter l’URL de l’index du sitemap pour aider les robots d’indexation :

public/robots.txt

User-agent: *
Allow: /

Sitemap: https://<VOTRE SITE>/sitemap-index.xml

Si vous voulez réutiliser la valeur site de astro.config.mjs, vous pouvez aussi générer robots.txt dynamiquement. Au lieu d’utiliser un fichier statique dans le répertoire public/, créez un fichier src/pages/robots.txt.ts et ajoutez le code suivant :

src/pages/robots.txt.ts

import type { APIRoute } from 'astro';

const getRobotsTxt = (sitemapURL: URL) => `
User-agent: *
Allow: /

Sitemap: ${sitemapURL.href}
`;

export const GET: APIRoute = ({ site }) => {
  const sitemapURL = new URL('sitemap-index.xml', site);
  return new Response(getRobotsTxt(sitemapURL));
};

Configuration

Titre de la section Configuration

Pour configurer cette intégration, passez un objet à la fonction sitemap() dans astro.config.mjs.

astro.config.mjs

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

export default defineConfig({
  integrations: [
    sitemap({
      // options de configuration
    }),
  ],
});

filter

Titre de la section filter

Toutes les pages sont incluses par défaut dans votre sitemap. En ajoutant une fonction filter personnalisée, vous pouvez filtrer les pages incluses par URL.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge/',
    }),
  ],
});

La fonction sera appelée pour chaque page de votre site. Le paramètre page de la fonction est l’URL complète de la page en cours d’examen, y compris votre domaine site. Retournez true pour inclure la page dans votre sitemap, et false pour la laisser de côté.

Pour filtrer plusieurs pages, ajoutez des arguments avec des URLs cibles.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      filter: (page) =>
        page !== 'https://stargazers.club/secret-vip-lounge-1/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-2/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-3/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-4/',
    }),
  ],
});

customPages

Titre de la section customPages

Dans certains cas, une page peut faire partie de votre site déployé, mais pas de votre projet Astro. Si vous souhaitez inclure dans votre sitemap une page qui n’a pas été créée par Astro, vous pouvez utiliser cette option.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
    }),
  ],
});

entryLimit

Titre de la section entryLimit

Nombre maximal d’entrées par fichier sitemap. La valeur par défaut est 45000. Un index sitemap et plusieurs sitemaps sont créés si vous avez plus d’entrées. Voir cette explication de la division d’un grand sitemap.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      entryLimit: 10000,
    }),
  ],
});

changefreq, lastmod, et priority

Titre de la section changefreq, lastmod, et priority

Ces options correspondent aux balises <changefreq>, <lastmod> et <priority> de la spécification XML du plan du site.

Notez que changefreq et priority sont ignorés par Google.

Note

En raison des limitations de l’API d’intégration d’Astro, cette intégration ne peut pas analyser le code source d’une page donnée. Cette option de configuration peut définir changefreq, lastmod et priority sur une base site-wide ; voir l’option suivante serialize pour savoir comment définir ces valeurs sur une base par page.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date('2022-02-24'),
    }),
  ],
});

serialize

Titre de la section serialize

Une fonction appelée pour chaque entrée du plan du site juste avant l’écriture sur le disque. Cette fonction peut être asynchrone.

Elle reçoit en paramètre un objet SitemapItem qui peut avoir ces propriétés :

• url (URL absolue de la page). C’est la seule propriété dont la présence est garantie sur SitemapItem.
• changefreq
• lastmod (date formatée ISO, type String)
• priority
• links.

Cette propriété links contient une liste LinkItem de pages alternatives, y compris une page parent.

Le type LinkItem a deux champs : url (l’URL pleinement qualifiée de la version de cette page pour la langue spécifiée) et lang (un code de langue supporté et ciblé par cette version de la page).

La fonction serialize doit retourner SitemapItem, touché ou non.

L’exemple ci-dessous montre la possibilité d’ajouter individuellement des propriétés spécifiques au sitemap.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      serialize(item) {
        if (/exclude-from-sitemap/.test(item.url)) {
          return undefined;
        }
        if (/your-special-page/.test(item.url)) {
          item.changefreq = 'daily';
          item.lastmod = new Date();
          item.priority = 0.9;
        }
        return item;
      },
    }),
  ],
});

i18n

Titre de la section i18n

Pour traduire un sitemap, passez un objet à cette option i18n.

Cet objet a deux propriétés obligatoires :

• defaultLocale : String. Sa valeur doit exister comme l’une des clés locales.
• locales : Record<String, String>, paires clé/valeur. La clé est utilisée pour rechercher une partie locale dans un chemin de page. La valeur est un attribut de langue, seuls l’alphabet anglais et le trait d’union sont autorisés.

En savoir plus sur les attributs de la langue.

En savoir plus sur la localisation.

astro.config.mjs

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

export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      i18n: {
        defaultLocale: 'en', // Tous les urls qui ne contiennent pas `es` ou `fr` après `https://stargazers.club/` seront traités comme la locale par défaut, c'est-à-dire `en`
        locales: {
          en: 'en-US', // La valeur `defaultLocale` doit être présente dans les clés `locales`.
          es: 'es-ES',
          fr: 'fr-CA',
        },
      },
    }),
  ],
});

Le plan du site qui en résulte ressemble à ceci :

sitemap-0.xml

...
  <url>
    <loc>https://stargazers.club/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/es/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/fr/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/es/second-page/</loc>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/second-page/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/second-page/"/>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/second-page/"/>
  </url>
...

xslURL

Titre de la section xslURL

L’URL d’une feuille de style XSL pour styliser et embellir votre sitemap.

La valeur définie peut être soit un chemin relatif à l’URL configurée pour votre site dans le cas d’une feuille de style locale, soit une URL absolue vers une feuille de style externe.

astro.config.mjs

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

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

Exemples

Titre de la section Exemples

• Le site officiel d’Astro utilise Astro Sitemap pour générer son plan du site.
• Parcourir les projets avec Astro Sitemap sur GitHub pour plus d’exemples !

Plus d'intégrations

Framework d'interface utilisateur

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adaptateurs SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Autres intégrations

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind