什么是 SPA
SPA（Single Page Application）即单页应用程序，指的是只在一个单页面中通过异步数据加载的方式实现所有的页面功能。与传统的多页应用程序不同，SPA 可以在用户体验、性能优化等方面获得更好的效果。
SPA 中的 SEO
对于传统的多页应用程序，很容易实现 SEO（Search Engine Optimization，搜索引擎优化），搜索引擎可以通过抓取每个页面的内容，对其进行索引、排名等操作。但对于 SPA 来说，情况就有些不同了。
因为 SPA 只有一个页面，而且是通过异步加载数据来呈现不同页面的内容，搜索引擎无法正确解析并索引 SPA 的内容。因此，如果没有针对 SEO 进行优化的话，SPA 的页面可能会被搜索引擎忽略或排名较低。
SPA 中的 URL
URL（Uniform Resource Locator，统一资源定位符）是指用于标识资源的字符串，通常可以用来唯一地定位互联网上的资源。在 SPA 中，URL 也扮演重要的角色，可以为搜索引擎提供有关 SPA 内容的信息。
但 SPA 的 URL 通常会包含很多哈希（#）符号，因为 SPA 通常会使用路由器（router）来管理页面之间的切换。路由器通常会通过修改 URL 中的哈希值，来实现 URL 的变化和对应页面内容的加载。
但是，搜索引擎不会将哈希值作为 URL 的一部分来解析，这导致搜索引擎无法正确解析 SPA 内容并进行索引。因此，我们需要将 SPA 中的哈希值替换为真正的 URL，以使搜索引擎可以正确解析和索引 SPA 内容。
如何实现 SEO 友好的 URL
使用 History API
History API 是浏览器提供的一组操作浏览器历史记录的 API，可以用来实现 SPA 中的前端路由，并且通过修改 URL 中的路径来实现页面的切换。这样做可以将真正的 URL 显示在浏览器地址栏中，使搜索引擎可以正确识别页面的内容。
// 在路由切换时，使用 History API 修改 URL 片段
history.pushState(null, '', '/path/to/page');
// 监听浏览器的 popstate 事件，以便于在浏览器的前进后退按钮被点击时，及时切换页面内容
window.addEventListener('popstate', (event) => {
// 更新页面内容
});服务端渲染
服务端渲染是将页面的 HTML 代码提前生成完整，以便于发送给搜索引擎抓取和索引。这样做可以避免搜索引擎无法识别 SPA 中异步加载的内容。
常见的服务端渲染框架有 Next.js、Nuxt.js 等，可以使用它们来实现 SEO 友好的 SPA。
让搜索引擎知道你的 SPA
可以使用 Google Search Console 等工具，将自己的 SPA 提交给 Google 的索引，以便于将自己的内容获得较好的搜索排名。
<!-- 在 SPA 前端 HTML 中添加 meta 标签，告诉搜索引擎如何索引 SPA 内容 --> <meta name="fragment" content="!" />
总结
在 SPA 中实现 SEO 友好的 URL 是一项较为复杂的工作，但是它对于在线业务而言是至关重要的。我们可以通过使用 History API、服务端渲染以及告诉搜索引擎如何索引 SPA 内容，来实现 SEO 友好的 URL，提高自己的搜索排名。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a19e6968c7c53b0c398c0