跳到主要内容

搜索引擎优化 (SEO)

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

全局元数据​

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

docusaurus.config.js
export default {
  themeConfig: {
    // 声明一些 <meta> 标签
    metadata: [
      {name: 'keywords', content: 'cooking, blog'},
      {name: 'twitter:card', content: 'summary_large_image'},
    ],
  },
  headTags: [
    // 声明一个 <link> preconnect 标签
    {
      tagName: 'link',
      attributes: {
        rel: 'preconnect',
        href: 'https://example.com',
      },
    },
    // 声明一些 json-ld 结构化数据
    {
      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 默认添加了一些元数据。例如，如果您已配置 i18n ，您将获得一个 hreflang 备用链接。

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

单页面元数据​

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

my-markdown-page.mdx
# 食谱指南

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

一些内容...

Docusaurus 会自动为每个 Markdown 页面添加 description、title、规范 URL 链接和其他有用的元数据。它们可以通过 前置 matter 进行配置：

---
title: 搜索引擎的标题；可以与实际标题不同
description: 此页面的简短描述
image: 要在社交媒体卡片中显示的缩略图
keywords: [关键词, 描述, 主要主题]
---

在创建您的 React 页面时，在 Layout 中添加这些字段也可以提高 SEO。

提示

最好使用 前置 matter 来设置 description 和 keywords 等字段：Docusaurus 会自动将其应用于 description 和 og:description，而使用 <head> 标签时则必须手动声明两个元数据标签。

信息

所有官方插件都支持以下 前置 matter ：title、description、keywords 和 image。请参阅其各自的 API 文档以了解其他 前置 matter 支持：

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

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 作为属性。

静态 HTML 生成​

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

图片元描述​

图片的 alt 标签告诉搜索引擎图片的内容，当无法看到图片时（例如，使用屏幕阅读器或图片损坏时）就会使用它。alt 标签通常在 Markdown 中受支持。

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

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

Docusaurus 横幅

丰富的搜索信息​

Docusaurus 博客默认支持 丰富的搜索结果 ，以获得最佳的搜索引擎体验。信息会根据您在博客/全局配置中的元信息创建。为了获得丰富的搜索信息的益处，请填写有关文章发布日期、作者和图片等信息。 此处 了解更多关于元信息的内容。

robots 文件​

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

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

在 Google 文档 中了解更多关于 robots 文件的信息。

注意

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

要阻止整个 Docusaurus 站点被索引，请使用 noIndex 站点配置。一些 托管提供商 也可能允许您配置 X-Robots-Tag: noindex HTTP 标头（GitHub Pages 不支持此功能）。

要阻止单个页面被索引，请使用 <meta name="robots" content="noindex"> 作为 页面元数据 。详细了解 robots 元标签 。

Sitemap 文件​

Docusaurus 提供了 @docusaurus/plugin-sitemap 插件，它默认包含在 preset-classic 中。它会自动生成一个 sitemap.xml 文件，该文件将在生产构建后位于 https://example.com/[baseUrl]/sitemap.xml。此站点地图元数据有助于搜索引擎爬虫更准确地抓取您的网站。

提示

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

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

<head>
  <meta name="robots" content="noindex, nofollow" />
</head>

Docusaurus 使用您的文件名作为链接，但您始终可以使用 slug 更改它，请参阅本 教程 了解更多详细信息。

结构化内容​

搜索引擎依赖于 HTML 标记（例如 <h2>、<table> 等）来理解网页的结构。当 Docusaurus 呈现您的页面时，会使用语义标记（例如 <aside>、<nav>、<main>）来划分页面的不同部分，帮助搜索引擎找到侧边栏、导航栏和主要页面内容等部分。

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

编辑此页
最后由 HomeUbuntu 于 更新