搜索引擎优化 (SEO)
道格龙（Docusaurus）通过多种方式支持搜索引擎优化。
全局元数据
通过站点配置为整个站点提供全局元属性。这些元数据将全部以键值对作为属性名和值呈现在 HTML 的 <head> 标签中。metadata 属性是声明 <meta> 标签的便捷方式，但也可以通过 headTags 属性在 <head> 中注入任意标签。
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> 标签。简而言之：
# 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 链接以及其他有用的元数据。这些都可以通过 front matter 进行配置：
---
title: 用于搜索引擎的标题；可以与实际标题不同
description: 此页面的简短描述
image: 将在社交媒体卡片中显示的缩略图
keywords: [描述, 主要, 主题的, 关键词]
---
在创建你的 React 页面时，在 Layout 中添加这些字段也会改善 SEO。
对于像 description 和 keywords 这样的字段，推荐使用 front matter：道格龙（Docusaurus）会自动将其应用于 description 和 og:description，而如果使用 <head> 标签，你将需要手动声明两个元数据标签。
官方插件都支持以下 front matter：title、description、keywords 和 image。有关其他 front matter 支持，请参阅它们各自的 API 文档：
对于 JSX 页面，你可以使用道格龙（Docusaurus）的 <Head> 组件。
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="页面" description="一个 React 页面示例">
<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。
静态 HTML 生成
道格龙（Docusaurus）是一个静态站点生成器——HTML 文件是为每个 URL 路由静态生成的，这有助于搜索引擎更容易地发现你的内容。
图片元描述
图片的 alt 标签告诉搜索引擎图片的内容是什么，并且在图片无法视觉显示时使用，例如使用屏幕阅读器时，或者图片损坏时。Alt 标签在 Markdown 中通常受支持。
你也可以为你的图片添加一个标题——这对 SEO 影响不大，但在鼠标悬停在图片上时会显示为工具提示，通常用于提供提示。
富搜索信息
道格龙（Docusaurus）博客开箱即用地支持富搜索结果，以获得最佳的搜索引擎体验。该信息是根据你在博客/全局配置中的元信息创建的。为了获得富搜索信息的好处，请填写有关文章发布日期、作者、图片等信息。在此处阅读更多关于元信息的信息这里。
Robots 文件
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 meta 标签的信息。
Sitemap 文件
道格龙（Docusaurus）提供了 @docusaurus/plugin-sitemap 插件，该插件默认与 preset-classic 一起提供。它会自动生成一个 sitemap.xml 文件，该文件在生产构建后将在 https://example.com/[baseUrl]/sitemap.xml 处可用。此 sitemap 元数据有助于搜索引擎爬虫更准确地爬取你的网站。
sitemap 插件会自动过滤掉包含 noindex robots meta 指令的页面。
例如，/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，将使搜索引擎更容易理解你的页面内容。