搜索引擎优化 (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,将使搜索引擎更容易理解你的页面内容。