跳到主要内容
版本：Canary 🚧

搜索引擎优化 (SEO)

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

全局元数据​

通过 站点配置为整个站点提供全局元属性。 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 备用链接。

如需阅读更多关于元标签类型的信息，请访问 MDN 文档。

单页元数据​

Similar to global metadata, Docusaurus also allows for the addition of meta-information to individual pages. Follow this guide for configuring the <head> tag. 一言以蔽：

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 automatically adds description, title, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:

---
title: 给搜索引擎看的标题；可能和正文标题不一样
description: 关于此页的简短描述
image: 在社交媒体卡片中显示的缩略图
keywords: [描述, 中心的, 关键词]
---

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.

信息

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:

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

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

静态 HTML 生成​

Docusaurus 是一个静态网站生成器——每个 URL 路径都会静态生成对应的 HTML 文件，这有助于搜索引擎更容易地找到你的内容。

图像描述​

图片的 alt 标签会告诉搜索引擎图片的内容，同时它也用在图片无法通过视觉被观看时，比如使用屏幕阅读器，或者图片损坏时。 Markdown 广泛地支持 alt 标签。

你也可以给图片添加一个 title——这不太会影响 SEO，不过会在鼠标悬停在图片上的时候显示浮窗，通常用于提供提示信息。

![Docusaurus banner](./assets/docusaurus-asset-example-banner.png '图片标题')
http://localhost:3000

Docusaurus banner

丰富搜索信息​

Docusaurus 博客支持丰富的搜索结果，开箱即用，以获得最佳的搜索引擎体验。 这些信息是基于你的博客和全局配置中的元数据创建的。 为了能享受丰富搜索信息，你需要填写每篇帖子的发布日期、作者和缩略图等信息。 你可以在这里了解更多关于元数据的内容。

Robots 文件​

A robots.txt file regulates search engines' behavior about which should be displayed and which shouldn't. You can provide it as static asset. 下面的例子将会允许对所有子页面的所有请求：

static/robots.txt
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 文件​

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. 站点地图信息可以帮助搜索引擎爬虫更准确地爬取你的网站。

提示

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>

Docusaurus 使用你的文件名作为链接，但你总是可以使用 slug 来修改它，查阅这篇教程来了解更多细节。

结构化内容​

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. 在项目中始终使用 Markdown 可以帮助搜索引擎更容易理解页面的内容。