跳到主要内容
版本:Canary 🚧

搜索引擎优化 (SEO)

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

全局元数据

你可以通过站点配置为整个网站提供全局元属性。 每个元数据是一组键值对,在 HTML 的 <head> 中渲染时,键和值会分别变成属性名和属性值。

docusaurus.config.js
module.exports = {
themeConfig: {
metadata: [{name: 'keywords', content: 'cooking, blog'}],
// 在生成的 HTML 中,这会变成 <meta name="keywords" content="cooking, blog">
},
};

Docusaurus 添加了一些开箱即用的元数据。 比如如果你配置了i18n,Docusaurus 就会自动生成hreflang alternate 链接。

想要了解更多meta标签的类型,你可以参考MDN文档

单页元数据

类似于全局元数据, Docusaurus 也允许你为每个页面单独添加元数据。 你可以按照这篇教程配置<head>标签。 一言以蔽:

my-markdown-page.md
# 烹饪指南

<head>
<meta name="keywords" content="cooking, blog">
</head>

一些内容……

Docusaurus 会自动为每个 Markdown 页面添加 descriptiontitle,canonical URL 链接,和其他有用的元数据。 可以用前言进行配置:

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

在创建 React 页面时,给 Layout 添加这些字段也能改善 SEO。

提示

我们建议用前言配置 descriptionkeywords 这样的字段:Docusaurus 会自动把它们用于 descriptionog:description 两个元数据,而如果你用 <head> 标签,你就得手动声明两个元数据标签。

对于 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="页面" description="React 页面示例">
<Head>
<meta property="og:image" content="image.png" />
</Head>
{/* ... */}
</Layout>
);
}
提示

为方便起见,主题的默认 <Layout> 组件接受 titledescription 作为 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 文件

robots.txt 文件规定了搜索引擎的行为,即哪些内容应该能爬取到,哪些不应该。 你可以以静态资源的形式提供这个文件。 下面的例子将会允许对所有子页面的所有请求:

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

如果想了解更多关于 robots 文件的信息,你可以查阅 Google 文档

注意

注意robots.txt文件不会阻止 HTML 页面被索引。

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 提供了 @docusaurus/plugin-sitemap 插件,包含在 preset-classic 中。 它会在生产构建后自动在 https://example.com/[baseUrl]/sitemap.xml 生成一个 sitemap.xml 文件。 站点地图信息可以帮助搜索引擎爬虫更准确地爬取你的网站。

提示

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 前言修改链接内容。这篇教程包含了更多细节。

结构化内容

搜索引擎依赖于像 <h2><table> 这样的 HTML 标记来理解你的网站的结构。 当 Docusaurus 渲染页面时,会用 <aside><nav><main> 这样的语义化标签分隔页面的不同区域,帮助搜索引擎定位诸如侧边栏、导航栏和主要页面内容之类的部分。

大部分 CommonMark 语法都有对应的HTML标签。 在项目中始终使用 Markdown 可以帮助搜索引擎更容易理解页面的内容。