Aller au contenu principal
Version: 2.0.1

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 la configuration de 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, titre, 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 frontmatter 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="Une page de démo React">
<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')

Des informations de recherche riches

Les blogs Docusaurus prennent en charge dès le départ les résultats de recherche riches 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. Utilisez <meta name="robots" content="noindex"> comme metadata de page pour l'empêcher d'apparaître entièrement dans les résultats de recherche.

Fichier sitemap

Docusaurus fournit le plugin @docusaurus/plugin-sitemap, qui est livré 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.

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.