关于 SEO 的话题已经争论了很长时间，React SPA 非常普遍。然而，搜索 SO 并没有得到明确的编码指导，只有一个简单易懂的部署 React SPA 和实现 SEO 所需的具体实际步骤序列。
现有的 Q/A 要么不是很有帮助，要么使用链接。这个question 与 React 无关，详细答案考虑了已弃用的 AJAX 技术。尽管它的点赞和观看次数显示了这个话题的重要性。
【问题讨论】：
标签： reactjs seo single-page-application
部署基于 Crisp React 样板（我是作者）并使用 Cloudflare Pages。
之所以选择这个特定的样板是因为它的特性，例如部署的variety，包括 Jamstack 和全栈。它可以很容易地改变下面描述的部署，并在需要时从 Jamstack 切换到全栈。样板中的可替换 Structured Data 占位符 provided 也有助于 SEO。
步骤：
克隆 Crisp React 存储库：
git clone https://github.com/winwiz1/crisp-react.git
cd crisp-react
通过将code fragment 替换为以下代码来简化配置：
/****************** Start SPA Configuration ******************/
var SPAs = [
new SPA({
name: "index",
entryPoint: "./src/entrypoints/first.tsx",
ssr: false,
redirect: true
})];
SPAs.appTitle = "Crisp React";
/****************** End SPA Configuration ******************/
另外将 "Crisp React" 替换为您的 SPA 标题。对 SEO 来说，拥有一个独特而合理的标题很重要。
查看客户端代码库，确保每个页面都将<title> HTML 元素和规范的<meta> 标记设置为对您的网站有意义的值。这可以通过在所有client/src/components/*.tsx 文件中搜索<Helmet> 模式并查看相关代码来完成：
<Helmet>
<title>{getTitle(pageName)}</title>
<link rel="canonical" href={getCanonical()} />
</Helmet>
// Simplified code
export const getCanonical = (pagePath?: string): string|undefined => {
return !!pagePath? (window.location.origin + pagePath) : window.location.href;
}
// Simplified code
export const getTitle = (pageTitle?: string): string => {
return !!pageTitle? `${SPAs.appTitle} - ${pageTitle}` : SPAs.appTitle;
}
提交更改：
git add client
git commit -m "Changed configuration"
通过访问repo.new 创建一个新的 GitHub 存储库。
将克隆的存储库指向新创建的存储库并将其推送到那里：
git remote set-url origin https://github.com/your-github-username/your-newly-created-repo
git push
通过登录 Cloudflare dashboard 并创建 Cloudflare Pages 项目来部署到 Cloudflare Pages。
此步骤将花费几分钟时间，主要用于等待。复制下面提供的数据并将其粘贴到 Pages 提供的单个配置屏幕中大约需要一分钟。
使用Menu > Pages > Create a project。系统将要求您授权对 GitHub 存储库的只读访问权限，并可选择缩小对特定存储库的访问范围。选择您在上一步中推送到 GitHub 的存储库，并在“设置构建和部署”屏幕上，提供以下信息：
| Configuration option | Value |
|---|---|
| Production branch | master |
| Build command | yarn build:jamstack |
| Build output directory | client/dist |
添加以下环境变量：
| Environment variable | Value |
|---|---|
NODE_VERSION |
16.13.1 |
您可以选择自定义“项目名称”字段。它默认为 GitHub 存储库名称，用于创建子域，例如<project-name>.pages.dev.
完成配置后，点击“保存并部署”按钮。部署管道完成后，将浏览器指向https://<project-name>.pages.dev 以检查网站是否在线。
最后使用“自定义域”选项卡将部署的网站映射到您拥有的域。
在网页中添加一些原创内容，避免duplicate content。
您可以选择 passive approach 并等待 Googlebot 发现您的网站或主动要求 Google 将其编入索引。如果选择后者，请使用Google Search Console (GSC)：
"TEST LIVE URL"按钮确认页面可以被索引。可以选择查看 GSC 呈现的页面的屏幕截图。"REQUEST INDEXING" 链接请求为页面建立索引。响应应显示您的请求已添加到优先抓取队列中。必须为每个 SPA 页面重复最后 3 个步骤。
部署的骨架网站缺乏常用的，但对于 SEO 文件不是绝对必要的，例如 sitemap.xml 和 robots.txt。站点地图对于被动方法更为重要。 robots.txt 文件是不需要的，除非你想设置一些爬取限制。
该网站并未使用所有 Crisp React 功能，例如能够将 React 应用程序拆分为多个 SPA，并有选择地预渲染每个 SPA 的登录/索引页面以获得更好的性能。如果您需要此功能以及 SEO，请考虑切换到完整堆栈构建或使用 Cloudflare Worker，如 this article 中所述。
【讨论】：