跳到主要内容

Docusaurus 搜索引擎优化（SEO）

本文介绍在 Docusaurus v2/v3 中实现 SEO 的几种方法。

配置全局 SEO 设置​

你可以在站点全局配置中增加 Meta 信息，设置站点级别的元信息。Docusaurus 的配置允许在 themeConfig 或站点根目录配置中指定 metadata，从而为整个站点添加通用的 <meta> 标签。

示例配置：

docusaurus.config.js
module.exports = {
  title: '我的网站',
  tagline: '我的网站标语',
  url: 'https://your-site.com',
  baseUrl: '/',
  favicon: 'img/favicon.ico',
  // 其它配置...
  metadata: [
    { name: 'keywords', content: 'Docusaurus, SEO, 文档, 关键字' },
    { name: 'description', content: '这是一个使用 Docusaurus 构建的文档网站，用于介绍……' },
  ],
};

这样配置后，构建出来的页面都会在 <head> 中自动包含相应的 meta 标签。

页面级别的 SEO 定制​

Markdown 文件​

对于每一个 Markdown 文档页面，你可以在 Markdown 文件头部 Front Matter 添加元信息。每个页面（通常是 Markdown 文件）都可以通过 Front Matter 来设置一些 SEO 信息。例如，你可以在文档最顶部增加：

---
title: '页面标题'
description: '页面描述信息，用于搜索引擎展示'
keywords: ['关键字1', '关键字2', '关键字3']
---

通过这种方式，不仅有助于生成更有针对性的 meta 标签，还能保证每个页面在 SEO 方面有独立的描述。

jsx 或 tsx 文件​

对于 jsx 或 tsx 文件页面，没有 Markdown 文件头部信息。那么可以直接在 React 组件中使用 Head 组件来插入任何自定义的 head 内容。例如：

import React from 'react';
import Head from '@docusaurus/Head';

function MyCustomPage() {
  return (
    <>
      <Head>
        <meta name="keywords" content="自定义, 关键字, 列表" />
        <meta name="description" content="自定义页面的描述" />
      </Head>
      <main>
        {/* 页面内容 */}
      </main>
    </>
  );
}

export default MyCustomPage;

这种方法适合需要对特定页面进行较为细粒度的 SEO 优化时使用。

利用社区资源和最佳实践​

参考官方和社区文档

  • Docusaurus 官方文档提供了不少关于定制站点内容和优化的说明，学习如何使用配置文件以及 Head 组件是十分重要的。
  • GitHub 或社区论坛中也有许多开发者分享了他们的 SEO 优化实践，包括如何集成 Open Graph 标签、Twitter Card 标签以及 JSON-LD 等。

扩展 SEO 功能

根据需求，可能还需要：

  • 配置站点地图插件（如 @docusaurus/plugin-sitemap），以帮助搜索引擎更好地索引页面。
  • 使用 Google Analytics 或其它分析工具了解访问情况并不断调整 SEO 策略。
  • 如果网站有多语言版本，还可以考虑为各个语言版本配置对应的 meta 标签和链接关系。