如何在Vite搭建的React项目中用原生DOM API无第三方库管理SEO元标签？

问题描述 #

我使用Vite构建React应用（非Next.js），需要在所有页面中规范管理SEO元标签，具体需求如下：

• 全局标题模板（如%s | My Site），自动应用于所有页面
• 支持按页覆盖标题、描述、Open Graph及Twitter Card标签
• 支持Robots指令，例如预发布环境设置noindex，以及maxSnippet、maxImagePreview等高级指令
• 多语言站点的Canonical URLs与hreflang标签
• 生成带JSON-LD结构化数据的面包屑导航，用于谷歌富媒体搜索结果

当前实现方式 #

// ❌ 零散不统一，无全站默认配置
function BlogPage({ post }) {
  return (
    <>
      <title>{post.title} | My Site</title>
      <meta name="description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="robots" content="index, follow" />
    </>
  );
}

当前方式存在的问题 #

• 每个页面需手动为标题追加| My Site，站点更名时要修改大量文件
• 无全局默认配置，若页面遗漏og:image标签则会缺失该元数据
• Robots指令使用原始字符串，拼写错误不会触发报错
• 仅渲染可视化面包屑导航，未提供谷歌可识别的JSON-LD结构化数据
• react-helmet已停止维护，next-seo仅适用于Next.js

期望实现方式 #

// 在应用根节点一次性配置全站默认值
<DefaultSEO
  titleTemplate="%s | My Site"
  defaultTitle="My Site"
  openGraph={{ type: 'website', siteName: 'My Site' }}
  twitter={{ site: '@mysite', cardType: 'summary_large_image' }}
>
  <App />
</DefaultSEO>

// 单页覆盖——只需配置与默认值不同的部分
<SEO
  title={post.title}
  description={post.excerpt}
  canonical={`https://example.com/blog/${post.slug}`}
  robots={{ index: true, follow: true, maxSnippet: 150, maxImagePreview: 'large' }}
  openGraph={{
    type: 'article',
    images: [{ url: post.coverImage, width: 1200, height: 630 }],
  }}
/>

带JSON-LD的面包屑组件 #

<Breadcrumb
  items={[
    { name: 'Home', url: '/' },
    { name: 'Blog', url: '/blog' },
    { name: post.title },
  ]}
/>

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