单页应用 (Single-page Application, SPA)，是一种在一个页面内完成应用的加载和交互的 Web 应用程序。随着前端开发技术的不断发展，越来越多的网站开始使用 SPA。因为 SPA 不需要跳转页面，可以提供快速响应的用户体验，大大提高了用户满意度。但是，SPA 也有一个很明显的劣势：SEO 不友好。在本文中，我们将探讨如何避免 SPA 在 SEO 上的劣势。
SPA 的 SEO 问题
为了了解 SPA 的 SEO 问题，我们需要先了解搜索引擎的爬虫 (Crawler) 是如何工作的。爬虫会遍历整个网络，收集网页数据，并将这些数据存储到搜索引擎的数据库中。搜索引擎会将这些数据根据关键词进行索引，并通过算法排序，生成搜索结果页面。
在传统的多页应用 (Multi-page Application, MPA) 中，每个页面拥有不同的 URL。搜索引擎可以通过这些 URL 发送 HTTP 请求，获取网页的 HTML 文档，解析页面内容，从而收录这些页面的数据。
但是，SPA 内部没有多个页面，只有一个页面，所有内容都是通过异步请求加载的。这一点使得搜索引擎无法了解 SPA 中的内容。例如，搜索引擎无法发现 SPA 中的动态路由和嵌套组件。
SPA 在 SEO 上的劣势主要有以下三个方面：
- 搜索引擎不能正常地爬取 SPA 内容，因为该 SPA 的 HTML 是通过异步请求加载的
- SPA 的 URL 不像 MPA 的 URL 那样结构清晰，因此难以按照 URL 进行索引
- 搜索引擎无法发现 SPA 中的动态路由和嵌套组件
解决 SPA 的 SEO 问题
针对 SPA 的 SEO 问题，有一些优化方案可以采用。
SSR (Server-Side Rendering)
服务器端渲染 (Server-Side Rendering, SSR) 是指在服务器端将 React/Vue 组件渲染为 HTML，并使用通用 HTML 串返回给客户端。这种方法允许搜索引擎看到完整的 HTML 文档，这就避免了异步请求和动态组件的问题，同时还提高了网站的响应速度。
Prerendering
Prerendering 是指通过工具将静态页面事先生成为一个 HTML 文件，并将其上传到服务器上。当用户访问该 URL 时，服务器将返回 HTML 文件，而不是进入 SPA。这就使得搜索引擎可以看到完整的静态页面，而不是在客户端创建的动态页面。
Sitemaps、HTML 语义化
优化 SPA 的 SEO 还有其他一些方法需要注意的，例如：
- 通过 Sitemaps 让搜索引擎了解 SPA 中的链接
- 使用 HTML5 的语义化标签，使搜索引擎能够更好地解析页面内容
- 使用合适的元标签，包括页面标题、描述、关键词等
示例代码
使用 React 的服务器端渲染
-- -------------------- ---- ------- -- ------ ------ ----- ---- -------- ------ - -------------- - ---- ------------------- ------ --- ---- -------- ----- ---- - ------------------- ---- -- -- ---- --- ------ - --------- ----- ----- ---------- ------ ----- --------------- -- ----- --------------- ---------------------------- ------------------ -- ----- ---------------------------- ----------------- -- --------- ----------- ----- ------------------ ---------- ----- ---- -- ------- ------ ---- ----------------------- ------- ------------------------- ------- ------- -- -- ----- ------ ----- ---- -------- ------ -------- ---- ------------ ------ --- ---- -------- --------------------- --- ---------------------------------展开代码
使用 Prerendering 工具
我们可以使用一些 Prerendering 工具来为我们的 SPA 生成静态 HTML 文件。Prerendering 工具通常有两种模式：
- 预先渲染模式：在部署之前生成静态 HTML 文件
- On-demand 渲染模式：在第一次访问页面时，生成静态 HTML 文件
# 使用 Prerender SPA Plugin 工具 npm i prerender-spa-plugin --save-dev
-- -------------------- ---- ------- -- ----------------- ----- ------------------ - -------------------------------- ----- ---- - ---------------- -------------- - - ------ --------------- ------- - ----- ----------------------- -------- --------- ------------ -- -------- - --- -------------------- ---------- -------------------- -------- -- ----------- ------- ------ -- ----- ------------ --------------- -- - ------------------ - ------------------ ----------------- --------- -------- -- -------- -------------------- --------- ------------------------------ ------ -------------- -- --- -- --展开代码
总结
SPA 在前端开发中越来越流行，但它的 SEO 问题也日益突出。通过使用 SSR 和 Prerendering 工具，我们可以将 SPA 在 SEO 上的劣势最小化。同时，我们还需注意更多细节，如 Sitemaps、HTML 语义化等。只有考虑全面，才能真正解决 SPA 的 SEO 问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653de7107d4982a6eb7896cb
