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.
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 la configuration de la balise <head>. En bref :
# 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>
Un peu de contenu...
Docusaurus ajoute automatiquement description, titre, 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.
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>.
Les plugins officiels supportent tous les éléments du front matter : 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.
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>
);
}
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.
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 :
User-agent: *
Disallow:
Pour en savoir plus sur le fichier robots, consultez la documentation Google.
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 supporte pas).
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 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.
Le plugin sitemap filtre automatiquement les pages contenant un noindex directive meta robots.
Par exemple, /examples/noIndex n'est pas inclus dans le plan du site le fichier sitemap.xml de Docusaurus car il contient les métadonnées de page suivantes :
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
Liens lisible par un humain
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.