Skip to content

Latest commit

 

History

History
754 lines (557 loc) · 23.8 KB

File metadata and controls

754 lines (557 loc) · 23.8 KB
type integration
title @astrojs/sitemap
description Apprenez à utiliser l'intégration @astrojs/sitemap dans votre projet Astro.
sidebar
label
Sitemap
githubIntegrationURL https://github.com/withastro/astro/tree/main/packages/integrations/sitemap/
category other
i18nReady true

import PackageManagerTabs from '/components/tabs/PackageManagerTabs.astro'; import Since from '/components/Since.astro';

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

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

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.

```sh npx astro add sitemap ``` ```sh pnpm astro add sitemap ``` ```sh 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

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

```sh npm install @astrojs/sitemap ``` ```sh pnpm add @astrojs/sitemap ``` ```sh 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

@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://.

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

export default defineConfig({
  site: 'https://example.com',
  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 compilation 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
<?xml version="1.0" encoding="UTF-8"?>
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://example.com/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>
<?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://example.com/</loc>
  </url>
  <url>
    <loc>https://example.com/deuxieme-page/</loc>
  </url>
</urlset>

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>

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

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

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 :

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

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

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

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

filter()

Type : (page: string) => boolean

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.

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      filter: (page) => page !== 'https://example.com/salon-prive-secret/',
    }),
  ],
});

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.

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      filter: (page) =>
        page !== 'https://example.com/salon-prive-secret-1/' &&
        page !== 'https://example.com/salon-prive-secret-2/' &&
        page !== 'https://example.com/salon-prive-secret-3/' &&
        page !== 'https://example.com/salon-prive-secret-4/',
    }),
  ],
});

customPages

Type : string[]

Un tableau de pages générées en externe à inclure dans le fichier sitemap généré.

Utilisez cette option pour inclure dans votre sitemap des pages qui font partie de votre site déployé mais qui ne sont pas créées par Astro.

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      customPages: ['https://example.com/page-externe1', 'https://example.com/page-externe2'],
    }),
  ],
});

customSitemaps

Type : string[]
Par défaut : []

Un tableau de sitemaps générés en externe à inclure dans le fichier sitemap-index.xml au côté des entrées de sitemap générées.

Utilisez cette option pour inclure des sitemaps externes dans le fichier sitemap-index.xml créé par Astro pour les sections de votre site déployé qui possèdent leurs propres sitemaps non créés par Astro. Cette option est utile lorsque vous hébergez plusieurs services sous le même domaine.

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      customSitemaps: ['https://example.com/blog/sitemap.xml', 'https://example.com/boutique/sitemap.xml'],
    }),
  ],
});

entryLimit

Type : number
Par défaut : 45000

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

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

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

changefreq, lastmod et priority

Type : { changefreq?: ChangeFreq; lastmod?: Date; priority?: number; }

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 des intégrations 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 à l'échelle du site ; voir l'option suivante serialize pour savoir comment définir ces valeurs page par page. :::

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

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

serialize()

Type : (item: SitemapItem) => SitemapItem | Promise<SitemapItem | undefined> | undefined

Génère une représentation modifiable de chaque entrée du plan de site avant de renvoyer un SitemapItem ou undefined pour la supprimer du plan de site. Cette fonction peut être asynchrone et est appelée pour chaque entrée du plan de site juste avant l'écriture sur le disque.

L'exemple suivant filtre une page du plan de site et met à jour une entrée spécifique pour modifier ses propriétés changefreq, lastmod et priority :

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      serialize(item) {
        if (/exclus-du-plan-de-site/.test(item.url)) {
          return undefined;
        }
        if (/votre-page-speciale/.test(item.url)) {
          item.changefreq = ChangeFreqEnum.DAILY;
          item.lastmod = new Date().toISOString();
          item.priority = 0.9;
        }
        return item;
      },
    }),
  ],
});

chunks

Type : Record<string, (item: SitemapItem) => SitemapItem | undefined>

Une association de fonctions qui vous permet de diviser votre plan de site en plusieurs fichiers selon une logique personnalisée. Chaque nom de propriété dans l'objet devient le nom d'un fichier sitemap distinct, et sa fonction correspondante détermine quelles URL seront incluses dans ce fragment. Cela peut s'avérer utile, par exemple, si une section spécifique de votre site web change très souvent et que vous souhaitez spécifier une fréquence de changement différente pour ses entrées.

Chaque fonction de fragment reçoit un SitemapItem et, pour chaque élément, renvoie soit :

  • l'élément SitemapItem modifié, si l'URL doit être incluse dans ce fragment
  • undefined, si l'URL ne doit pas être incluse dans ce fragment

L'exemple ci-dessous montre comment répartir les URL dans différents fichiers sitemap en fonction de leur chemin :

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      chunks: {
        'blog': (item) => {
          if (/blog/.test(item.url)) {
            item.changefreq = ChangeFreqEnum.WEEKLY;
            item.lastmod = new Date().toISOString();
            item.priority = 0.9;
            return item;
          }
        },
        'glossaire': (item) => {
          if (/glossaire/.test(item.url)) {
            item.changefreq = ChangeFreqEnum.MONTHLY;
            item.lastmod = new Date().toISOString();
            item.priority = 0.7;
            return item;
          }
        }
      },
    }),
  ],
});

Cette configuration générera les fichiers suivants :

  • sitemap-blog-0.xml
  • sitemap-glossaire-0.xml

Les URL qui ne correspondent à aucun fragment seront placées dans un fichier sitemap-pages-0.xml par défaut.

i18n

Type : { defaultLocale: string; locales: Record<string, string>; }

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

Cet objet a deux propriétés obligatoires :

  • defaultLocale : Sa valeur doit correspondre à l'une des clés de locales.
  • locales : paires clé/valeur. La clé est utilisée pour rechercher une partie correspondant aux paramètres régionaux dans un chemin de page. La valeur est un attribut de langue, seuls l'alphabet anglais et le trait d'union sont autorisés.
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      i18n: {
        defaultLocale: 'en', // Toutes les URL qui ne contiennent pas `es` ou `fr` après `https://example.com/` seront traitées comme le paramètre régional 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 :

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

xslURL

Type : string

L'URL d'une feuille de style XSL pour mettre en forme 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.

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

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

filenameBase

Type : string
Par défaut : sitemap

La chaîne de caractères utilisée comme préfixe de nom lors de la génération des fichiers XML du sitemap. La valeur par défaut est sitemap.

Cette option peut être utile lors de l'intégration d'un site Astro à un domaine comportant des fichiers de sitemap préexistants.

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

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

La configuration donnée générera des fichiers de sitemap aux adresses https://example.com/sitemap-astronomie-0.xml et https://example.com/sitemap-astronomie-index.xml.

namespaces

Type : { news?: boolean; xhtml?: boolean; image?: boolean; video?: boolean; }
Par défaut : { news: true, xhtml: true, image: true, video: true }

Un objet d’espaces de noms XML à exclure du sitemap généré.

L'exclusion des espaces de noms inutilisés peut aider à créer des sitemaps plus ciblés, plus rapides à analyser par les moteurs de recherche et utilisant moins de bande passante. Par exemple, si votre site ne propose pas des actualités, des vidéos ou de contenu multilingue, vous pouvez exclure ces espaces de noms pour réduire la surcharge XML.

Par défaut, tous les espaces de noms configurables (news, xhtml, image et video) sont inclus dans le sitemap généré en XML. Pour exclure un ou plusieurs de ces espaces de noms de la génération de votre sitemap, ajoutez un objet de configuration namespaces et définissez les options individuelles sur false.

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      namespaces: {
        news: false,
        xhtml: false, 
      }
    })
  ]
});

Référence des utilitaires d'Astro Sitemap

import {
  ChangeFreqEnum,
} from "@astrojs/sitemap";

ChangeFreqEnum

Une énumération Typescript où chaque nom de propriété est la version en majuscules d'une valeur valide définie dans la spécification de <changefreq>.

L'exemple suivant utilise serialize() pour mettre à jour la valeur changefreq de l'index du blog :

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

export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      serialize(item) {
        if (/blog/.test(item.url)) {
          item.changefreq = ChangeFreqEnum.DAILY;
        }

        return item;
      },
    }),
  ],
});

Référence des types d'Astro Sitemap

import type {
  ChangeFreq,
  LinkItem,
  SitemapItem,
  SitemapOptions,
} from "@astrojs/sitemap";

ChangeFreq

Type : "daily" | "monthly" | "always" | "hourly" | "weekly" | "yearly" | "never"

Une union de valeurs valides permettant d'indiquer la fréquence de mise à jour d'une entrée.

LinkItem

Type : { lang: string; hreflang?: string; url: string; }

Décrit l'URL d'une page. Il peut s'agir de la version par défaut du document ou de l'une de ses traductions.

LinkItem.lang

Type : string

Spécifie le code de langue pris en charge par cette version de la page. Lorsqu'une valeur est définie, vous n'avez pas besoin de définir également hreflang.

LinkItem.hreflang

Type : string

Spécifie le code de langue pris en charge par cette version de la page. Lorsqu'une valeur est définie, vous n'avez pas besoin de définir également lang.

LinkItem.url

Type : string

Indique l'URL absolue de la page pour la langue spécifiée.

SitemapItem

Type : { url: string; lastmod?: string | undefined; changefreq?: ChangeFreqEnum | undefined; priority?: number | undefined; links?: LinkItem[] | undefined; }

Décrit une entrée dans un plan de site. Ceci contient son url et des propriétés optionnelles supplémentaires.

SitemapItem.url

Type : string

Spécifie l'URL absolue de la page.

SitemapItem.lastmod

Type : string | undefined

Définit la date de dernière modification de la page au format ISO sous forme de chaîne de caractères.

SitemapItem.changefreq

Type : ChangeFreqEnum | undefined

Définit la fréquence probable de modification de la page.

SitemapItem.priority

Type : number | undefined

Définit la priorité de cette URL par rapport aux autres URL de votre site. La valeur doit être un nombre compris entre 0.0 et 1.0.

SitemapItem.links

Type : LinkItem[] | undefined

Définit une liste de pages alternatives, y compris la page actuelle.

SitemapOptions

Type : object

Décrit les options de configuration.

Exemples