Aller au contenu principal
Version : 3.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é. L'attribut metadata est un raccourci pratique pour déclarer les balises <meta> mais il est également possible d'injecter des balises arbitraires dans <head> avec l'attribut headTags.

docusaurus.config.js
export default {
  themeConfig: {
    // DĂ©clare quelques balises <meta>
    metadata: [
      {name: 'keywords', content: 'cooking, blog'},
      {name: 'twitter:card', content: 'summary_large_image'},
    ],
    headTags: [
      // DĂ©clare une balise <link> preconnect
      {
        tagName: 'link',
        attributes: {
          rel: 'preconnect',
          href: 'https://example.com',
        },
      },
      // Déclare des données structurées json-ld
      {
        tagName: 'script',
        attributes: {
          type: 'application/ld+json',
        },
        innerHTML: JSON.stringify({
          '@context': 'https://schema.org/',
          '@type': 'Organization',
          name: 'Meta Open Source',
          url: 'https://opensource.fb.com/',
          logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
        }),
      },
    ],
  },
};

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
# A cooking guide

<head>
  <meta name="keywords" content="cooking, blog" />
  <meta name="twitter:card" content="summary_large_image" />
  <link rel="preconnect" href="https://example.com" />
  <script type="application/ld+json">
    {JSON.stringify({
      '@context': 'https://schema.org/',
      '@type': 'Organization',
      name: 'Meta Open Source',
      url: 'https://opensource.fb.com/',
      logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
    })}
  </script>
</head>

Some content...

Docusaurus ajoute automatiquement description, title, des liens URL canoniques et d'autres métadonnées utiles à chaque page Markdown. Ils sont configurables via le front matter :

---
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>.

info

Les plugins officiels prennent en charge tous les front matter suivants : title, description, keywords et image. Reportez-vous à leur documentation de l'API respective pour une prise en charge supplémentaire du front matter :

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" />
        <meta name="twitter:card" content="summary_large_image" />
        <link rel="preconnect" href="https://example.com" />
        <script type="application/ld+json">
          {JSON.stringify({
            '@context': 'https://schema.org/',
            '@type': 'Organization',
            name: 'Meta Open Source',
            url: 'https://opensource.fb.com/',
            logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
          })}
        </script>
      </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.