Optimisation des moteurs de recherche (SEO)
Docusaurus prend en charge l'optimisation des moteurs de recherche de plusieurs façons.
Global metadata
Provide global meta attributes for the entire site through the site configuration. The metadata will all be rendered in the HTML <head> using the key-value pairs as the prop name and value.
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
},
};
Docusaurus ajoute quelques métadonnées prêtes à l'emploi. For example, if you have configured i18n, you will get a hreflang alternate link.
To read more about types of meta tags, visit the MDN docs.
Single page metadata
Similar to global metadata, Docusaurus also allows for the addition of meta-information to individual pages. Follow this guide for configuring the <head> tag. En bref :
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog">
</head>
Some content...
Docusaurus automatically adds description, title, canonical URL links, and other useful metadata to each Markdown page. 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]
---
When creating your React page, adding these fields in Layout would also improve SEO.
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.
For JSX pages, you can use the Docusaurus <Head> component.
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>
);
}
For convenience, the default theme <Layout> component accept title and description as props.
Static HTML generation
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.
Image meta description
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.
Rich search information
Docusaurus blogs support rich search results out-of-the-box to get maximum search engine experience. 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. Read more about the meta-information here.
Robots file
A robots.txt file regulates search engines' behavior about which should be displayed and which shouldn't. You can provide it as static asset. L'exemple suivant permettra d'accéder à toutes les sous-pages à partir de toutes les requêtes :
User-agent: *
Disallow:
Read more about the robots file in the Google documentation.
Important: the robots.txt file does not prevent HTML pages from being indexed.
To prevent your whole Docusaurus site from being indexed, use the noIndex site config. Some hosting providers may also let you configure a X-Robots-Tag: noindex HTTP header (GitHub Pages does not support this).
To prevent a single page from being indexed, use <meta name="robots" content="noindex"> as page metadata. Read more about the robots meta tag.
Sitemap file
Docusaurus provides the @docusaurus/plugin-sitemap plugin, which is shipped with preset-classic by default. It autogenerates a sitemap.xml file which will be available at https://example.com/[baseUrl]/sitemap.xml after the production build. Ces métadonnées aident les robots des moteurs de recherche à explorer votre site avec plus de précision.
The sitemap plugin automatically filters pages containing a noindex robots meta directive.
For example, /examples/noIndex is not included in the Docusaurus sitemap.xml file because it contains the following page metadata:
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
Human readable links
Docusaurus uses your file names as links, but you can always change that using slugs, see this tutorial for more details.
Structured content
Search engines rely on the HTML markup such as <h2>, <table>, etc., to understand the structure of your webpage. When Docusaurus renders your pages, semantic markup, e.g. <aside>, <nav>, <main>, are used to divide the different sections of the page, helping the search engine to locate parts like sidebar, navbar, and the main page content.
Most CommonMark syntaxes have their corresponding HTML tags. 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.