Skip to main content
Version: 3.6.1

搜索引擎优化（SEO）

¥Search engine optimization (SEO)

Docusaurus 以多种方式支持搜索引擎优化。

¥Docusaurus supports search engine optimization in a variety of ways.

全局元数据​

¥Global metadata

通过 站点配置.0 为整个站点提供全局元属性。元数据将全部使用键值对作为 prop 名称和值在 HTML <head> 中渲染。metadata 属性是声明 <meta> 标签的便捷快捷方式，但也可以使用 headTags 属性在 <head> 中注入任意标签。

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

docusaurus.config.js
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 添加了一些开箱即用的元数据。例如，如果你配置了 国际化，你将获得 hreflang 备用链接。

¥Docusaurus adds some metadata out-of-the-box. For example, if you have configured i18n, you will get a hreflang alternate link.

要了解有关元标记类型的更多信息，请访问 MDN 文档。

¥To read more about types of meta tags, visit the MDN docs.

单页元数据​

¥Single page metadata

与 全局元数据 类似，Docusaurus 也允许向各个页面添加元信息。按照 本指南 配置 <head> 标签。简而言之：

¥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.mdx
# 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 会自动将 description、title、规范 URL 链接和其他有用的元数据添加到每个 Markdown 页面。它们可通过 头条新闻 配置：

¥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]
---

创建 React 页面时，在 Layout 中添加这些字段也会改善 SEO。

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

提示

首选将 头条新闻 用于 description 和 keywords 等字段：Docusaurus 会自动将其应用于 description 和 og:description，而你在使用 <head> 标签时必须手动声明两个元数据标签。

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

信息

官方插件均支持以下 头条新闻：title、description、keywords 和 image。有关其他 头条新闻 支持，请参阅各自的 API 文档：

¥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:

对于 JSX 页面，你可以使用 Docusaurus <Head> 组件。

¥For JSX pages, you can use the Docusaurus <Head> component.

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>
  );
}
提示

为了方便起见，默认主题 <Layout> 组件接受 title 和 description 作为 props。

¥For convenience, the default theme <Layout> component accept title and description as props.

静态 HTML 生成​

¥Static HTML generation

Docusaurus 是一个静态站点生成器 - 为每个 URL 路由静态生成 HTML 文件，这有助于搜索引擎更轻松地发现你的内容。

¥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

图片的 alt 标签告诉搜索引擎该图片的内容，并且在无法直观地看到图片时使用，例如 使用屏幕阅读器或图片损坏时。Markdown 中通常支持 Alt 标签。

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

你还可以为图片添加标题 - 这不会对 SEO 产生太大影响，但当鼠标悬停在图片上方时会显示为工具提示，通常用于提供提示。

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


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


http://localhost:3000

Docusaurus banner

丰富的搜索信息​

¥Rich search information

Docusaurus 博客支持 丰富的搜索结果 开箱即用，以获得最大的搜索引擎体验。该信息是根据博客/全局配置中的元信息创建的。为了获得丰富的搜索信息的好处，请填写有关帖子的发布日期、作者和图片等信息。阅读有关元信息 此处 的更多信息。

¥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 文件​

¥Robots file

robots.txt 文件规定搜索引擎的行为，即哪些内容应该显示，哪些内容不应该显示。你可以将其提供为 静态资源。以下将允许从所有请求访问所有子页面：

¥A robots.txt file regulates search engines' behavior about which should be displayed and which shouldn't. You can provide it as static asset. The following would allow access to all sub-pages from all requests:

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

阅读 谷歌文档 中有关 robots 文件的更多信息。

¥Read more about the robots file in the Google documentation.

警告

重要的：robots.txt 文件不会阻止 HTML 页面被索引。

¥Important: the robots.txt file does not prevent HTML pages from being indexed.

要防止整个 Docusaurus 站点被索引，请使用 noIndex 站点配置。某些 托管服务提供商 还可能让你配置 X-Robots-Tag: noindex HTTP 标头（GitHub Pages 不支持此功能）。

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

要防止单个页面被索引，请使用 <meta name="robots" content="noindex"> 作为 页面元数据。了解有关 机器人元标签 的更多信息。

¥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 提供了 @docusaurus/plugin-sitemap 插件，默认情况下随 preset-classic 一起提供。它会自动生成一个 sitemap.xml 文件，该文件将在生产版本后的 https://example.com/[baseUrl]/sitemap.xml 可用。此站点地图元数据可帮助搜索引擎抓取工具更准确地抓取你的网站。

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

提示

站点地图插件会自动过滤包含 noindex 机器人元指令 的页面。

¥The sitemap plugin automatically filters pages containing a noindex robots meta directive.

例如，/examples/noIndex 不包含在 Docusaurus sitemap.xml 文件 中，因为它包含以下 页面元数据：

¥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 使用你的文件名作为链接，但你始终可以使用 slugs 进行更改，请参阅此 tutorial 了解更多详细信息。

¥Docusaurus uses your file names as links, but you can always change that using slugs, see this tutorial for more details.

结构化内容​

¥Structured content

搜索引擎依靠 <h2>、<table> 等 HTML 标记来了解网页的结构。当 Docusaurus 渲染页面时，语义标记，例如 <aside>、<nav>、<main> 用于划分页面的不同部分，帮助搜索引擎定位侧边栏、导航栏和主页内容等部分。

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

大多数 CommonMark 语法都有相应的 HTML 标签。通过在项目中一致使用 Markdown，你将使搜索引擎更容易理解你的页面内容。

¥Most CommonMark syntaxes 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.