Skip to main content
Version: 2.0.0-beta.10 🚧

Search engine optimization (SEO)

Docusaurus supports search engine optimization in a variety of ways.

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.

docusaurus.config.js
module.exports = {
  themeConfig: {
    metadata: [{name: 'keywords', content: 'cooking, blog'}],
    // This would become <meta name="keywords" content="cooking, blog"> in the generated HTML
  },
};

Docusaurus adds some metadata out-of-the-box. 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. In short:

my-markdown-page.md
# A cooking guide

<head>
  <meta name="keywords" content="cooking, blog">
</head>

Some content...
my-react-page.jsx
import React from 'react';
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>
  );
}

Docusaurus automatically adds description, title, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:

---
title: Title for search engines; can be different from the actual heading
description: A short description of this page
image: a thumbnail image to be shown in social media cards
keywords: [keywords, describing, the main topics]
---

When creating your React page, adding these fields in Layout would also improve SEO.

Static HTML generation

Docusaurus is a static site generator—HTML files are statically generated for every URL route, which helps search engines discover your content more easily.

Image meta description

The alt tag for an image tells the search engine what the image is about, and is used when the image can't be visually seen, e.g. when using a screen reader, or when the image is broken. Alt tags are commonly supported in Markdown.

You may also add a title for your image—this doesn't impact SEO much, but is displayed as tooltip when hovering above the image, usually used to provide hints.

![Docusaurus banner](./assets/docusaurus-asset-example-banner.png 'Image title')

Docusaurus banner

Rich search information

Docusaurus blogs support rich search results out-of-the-box to get maximum search engine experience. The information is created depending on your meta information in blog/global configuration. In order to get the benefits of the rich search information, fill in the information about the post's publish date, authors, and image, etc. Read more about the meta-information here.

Robots file

To add a robots.txt file that regulates search engines' behavior about which should be displayed and which shouldn't, provide it as static asset. The following would allow access to all sub-pages from all requests:

static/robots.txt
User-agent: *
Disallow:

Read more about the robots file in the Google documentation.

caution

Important: the robots.txt file does not prevent HTML pages from being indexed. Use <meta name="robots" content="noindex"> as page metadata to prevent it from appearing in search results entirely.

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. This sitemap metadata helps search engine crawlers crawl your site more accurately.

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 syntax have their corresponding HTML tags. By using Markdown consistently in your project, you will make it easier for search engines to understand your page content.