如何在Docusaurus 2中复用og:title和og:description实现Twitter卡片？

Docusaurus本身支持直接复用页面的title和description元数据来生成Twitter卡片的对应字段，无需重复编写内容，下面分两种场景说明实现方式：

全局默认复用（全站统一规则） #

在项目根目录的docusaurus.config.js中，通过配置themeConfig.seo来指定全局层面的Twitter卡片规则，直接复用站点元数据或页面默认值：

module.exports = {
  siteMetadata: {
    title: "你的站点主标题",
    description: "你的站点全局描述"
  },
  themeConfig: {
    seo: {
      twitterCard: "summary_large_image", // 根据需求选择卡片类型，比如summary/summary_large_image
      // 全局默认复用siteMetadata中的值作为Twitter卡片的标题和描述
      twitterTitle: ({ siteConfig }) => siteConfig.siteMetadata.title,
      twitterDescription: ({ siteConfig }) => siteConfig.siteMetadata.description
    }
  }
};

页面级精准复用（单页自定义） #

对于单个页面，只要在页面的frontmatter中定义了title和description，Docusaurus的默认SEO组件会自动将这些值同步到Twitter卡片的twitter:title和twitter:description标签中，无需额外配置。如果需要手动控制，可以在页面组件中显式传入参数：

import React from "react";
import { SEO } from "@docusaurus/theme-common";
import Layout from "@theme/Layout";

export default function CustomPage({ frontMatter }) {
  return (
    <Layout>
      <SEO
        title={frontMatter.title}
        description={frontMatter.description}
        // 直接复用frontmatter中的title和description作为Twitter卡片字段
        twitterTitle={frontMatter.title}
        twitterDescription={frontMatter.description}
        twitterCard="summary"
      />
      {/* 页面内容区域 */}
    </Layout>
  );
}

验证方式 #

配置完成后，启动项目并查看页面的HTML源代码，检查是否生成了如下标签：

<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">

内容的提问来源于stack exchange，提问作者Wicu