Aller au contenu principal
Version: 2.4.3

Optimisation des moteurs de recherche (SEO)

Docusaurus prend en charge l'optimisation des moteurs de recherche de plusieurs façons.

Métadonnées globales​

Fournir des méta-attributs globaux pour l'ensemble du site à travers la configuration du site. Les métadonnées seront toutes rendues dans le code HTML <head> en utilisant les paires clé-valeur comme nom et valeur de la propriété.

docusaurus.config.js
module.exports = {
  themeConfig: {
    metadata: [{name: 'keywords', content: 'cooking, blog'}],
    // Cela deviendrait <meta name="keywords" content="cooking, blog"/> dans le code HTML généré
  },
};

Docusaurus ajoute quelques métadonnées prêtes à l'emploi. Par exemple, si vous avez configuré i18n, vous obtiendrez un lien alternatif hreflang.

Pour en savoir plus sur les types de balises méta, consultez les docs MDN.

Métadonnées d'une seule page​

Tout comme les métadonnées globales, Docusaurus permet également d'ajouter des méta-informations à des pages individuelles. Suivez ce guide pour configurer la balise <head>. En bref :

my-markdown-page.md
# Un guide de recettes

<head>
  <meta name="keywords" content="recette, blog"/>
</head>

Du contenu ...

Docusaurus ajoute automatiquement description, title, des liens URL canoniques et d'autres métadonnées utiles à chaque page Markdown. Elles peuvent être configurées par le biais de la frontmatter :

---
title: Titre destiné aux moteurs de recherche ; peut être différent de l'intitulé réel.
description: Une brève description de cette page
image: une image miniature à afficher dans les cartes de médias sociaux
keywords: [mots-clés, description, principaux sujets]
---

Lors de la création de votre page React, l'ajout de ces champs dans Layout permettra également d'améliorer le référencement.

astuce

Préférez l'utilisation du front matter pour les champs comme description et keywords : Docusaurus l'appliquera automatiquement à description et og:description, alors que vous devrez déclarer manuellement deux balises de métadonnées lorsque vous utiliserez la balise <head>.

Pour les pages JSX, vous pouvez utiliser le composant <Head> de Docusaurus.

my-react-page.jsx
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';

export default function page() {
  return (
    <Layout title="Page" description="A React page demo">
      <Head>
        <meta property="og:image" content="image.png" />
      </Head>
      {/* ... */}
    </Layout>
  );
}
astuce

Pour des raisons pratiques, le composant du thème par défaut<Layout> accepte title et description comme props.

Génération de HTML statique​

Docusaurus est un générateur de sites statiques : les fichiers HTML sont générés de manière statique pour chaque route URL, ce qui permet aux moteurs de recherche de découvrir votre contenu plus facilement.

Méta description de l'image​

La balise alt d'une image indique au moteur de recherche de quoi il s'agit. Elle est utilisée lorsque l'image n'est pas visible visuellement, par exemple lorsqu'on utilise un lecteur d'écran, ou lorsque l'image est endommagée. Les balises Alt sont généralement prises en charge dans le format Markdown.

Vous pouvez également ajouter un titre à votre image. Ce titre n'a pas une grande incidence sur le référencement, mais il s'affiche sous la forme d'une info-bulle lorsque vous survolez l'image, généralement utilisée pour fournir des indications.

![Bannière de Docusaurus](./assets/docusaurus-asset-example-banner.png 'Titre de l'image')
http://localhost:3000

![Bannière de Docusaurus](./assets/docusaurus-asset-example-banner.png 'Titre de l'image')

Informations de recherche enrichies​

Les blogs Docusaurus prennent en charge dès le départ les résultats de recherche enrichies pour bénéficier d'une expérience maximale dans les moteurs de recherche. Les informations sont créées en fonction de vos méta-informations dans la configuration du blog/globale. Afin de bénéficier des avantages de la recherche riche, remplissez les informations relatives à la date de publication de l'article, des auteurs, de l'image, etc. Pour en savoir plus sur la méta-information, lisez ceci.

Fichier robots​

Un fichier robots.txt régule le comportement des moteurs de recherche sur ce qui doit être affiché et ce qui ne doit pas l'être. Vous pouvez le fournir en tant que ressource statique. L'exemple suivant permettra d'accéder à toutes les sous-pages à partir de toutes les requêtes :

static/robots.txt
User-agent: *
Disallow:

Pour en savoir plus sur le fichier robots, consultez la documentation Google.

attention

Important : le fichier robots.txt n'empêche pas les pages HTML d'être indexées.

Pour empêcher l'indexation de l'ensemble de votre site Docusaurus, utilisez la configuration de site noIndex. Certains hébergeurs peuvent également vous permettre de configurer une entête HTTP X-Robots-Tag: noindex (GitHub Pages ne le prend pas en charge).

Pour éviter qu'une seule page ne soit indexée, utilisez <meta name="robots" content="noindex"> comme métadonnées de page. En savoir plus sur la balise méta robots.

Fichier sitemap​

Docusaurus fournit le plugin @docusaurus/plugin-sitemap qui est fourni avec preset-classic par défaut. Il génère automatiquement un fichier sitemap.xml qui sera disponible depuis https://example.com/[baseUrl]/sitemap.xml après la construction de la production. Ces métadonnées aident les robots des moteurs de recherche à explorer votre site avec plus de précision.

astuce

Le plugin sitemap filtre automatiquement les pages contenant une directive méta robots noindex.

Par exemple, /examples/noIndex n'est pas inclus dans le fichier sitemap.xml de Docusaurus car il contient les métadonnées de page suivantes :

<head>
  <meta name="robots" content="noindex, nofollow" />
</head>

Docusaurus utilise vos noms de fichiers comme liens, mais vous pouvez toujours changer cela en utilisant des slugs, voir ce tutoriel pour plus de détails.

Contenu structuré​

Les moteurs de recherche s'appuient sur les balises HTML telles que <h2>, <table>, etc pour comprendre la structure de votre page Web. Lorsque Docusaurus rend vos pages, des balises sémantiques, par exemple <aside>, <nav>, <main>, sont utilisées pour diviser les différentes sections de la page, aidant ainsi le moteur de recherche à localiser des parties comme la barre latérale, la barre de navigation et le contenu principal de la page.

La plupart des syntaxes CommonMark ont leurs balises HTML correspondantes. En utilisant systématiquement le format Markdown dans votre projet, vous faciliterez la compréhension du contenu de vos pages par les moteurs de recherche.