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é. The metadata attribute is a convenient shortcut to declare <meta> tags, but it is also possible to inject arbitrary tags in <head> with the headTags attribute.
export default {
themeConfig: {
// Declare some <meta> tags
metadata: [
{name: 'keywords', content: 'cooking, blog'},
{name: 'twitter:card', content: 'summary_large_image'},
],
headTags: [
// Declare a <link> preconnect tag
{
tagName: 'link',
attributes: {
rel: 'preconnect',
href: 'https://example.com',
},
},
// Declare some json-ld structured data
{
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 :
# 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. They are configurable through 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.
Prefer to use front matter for fields like description and keywords: Docusaurus will automatically apply this to both description and og:description, while you would have to manually declare two metadata tags when using the <head> tag.
The official plugins all support the following front matter: title, description, keywords and image. Refer to their respective API documentation for additional front matter support:
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.
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 :
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 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.
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>
Liens lisibles 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.