搜索引擎优化 (SEO)
Docusaurus 通过多种方式支持搜索引擎优化。
全局元数据
通过 站点配置 为整个站点提供全局元属性。元数据将全部使用键值对作为属性名称和值渲染到 HTML <head> 中。metadata 属性是声明 <meta> 标签的便捷快捷方式，但也可以使用 headTags 属性在 <head> 中注入任意标签。
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 开箱即用地添加了一些元数据。例如，如果你已配置 i18n，你将获得一个 hreflang 备用链接。
要详细了解元标签类型，请访问 MDN 文档。
单页面元数据
与 全局元数据 类似，Docusaurus 还允许向单个页面添加元信息。遵循 本指南 配置 <head> 标签。简而言之
# 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 会自动向每个 Markdown 页面添加 description、title、规范 URL 链接和其他有用的元数据。它们可以通过 前置 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。
建议为 description 和 keywords 等字段使用 前置 matter：Docusaurus 会自动将其应用于 description 和 og:description，而使用 <head> 标签时，则需要手动声明两个元数据标签。
对于 JSX 页面，可以使用 Docusaurus <Head> 组件。
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 博客开箱即用地支持 丰富搜索结果，以获得最佳搜索引擎体验。信息根据博客/全局配置中的元信息创建。为了获得丰富搜索信息的优势，请填写有关帖子发布日期、作者和图像等信息。详细了解元信息 此处。
机器人文件
一个 robots.txt 文件规范了搜索引擎的行为，关于哪些应该显示，哪些不应该显示。你可以将其作为 静态资产 提供。以下将允许从所有请求访问所有子页面
User-agent: *
Disallow:
详细了解机器人文件 Google 文档 中的内容。
重要：robots.txt 文件不会阻止 HTML 页面被索引。
要阻止整个 Docusaurus 站点被索引，请使用 noIndex 站点配置。一些 托管提供商 也可能允许你配置一个 X-Robots-Tag: noindex HTTP 标头（GitHub Pages 不支持此功能）。
要阻止单个页面被索引，请将 <meta name="robots" content="noindex"> 用作 页面元数据。详细了解 robots 元标签。
站点地图文件
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，你可以使搜索引擎更容易理解你的页面内容。