如何防止单页应用在 SEO 上的劣势-JavaScript中文网-JavaScript教程资源分享门户

单页应用 (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 的服务器端渲染

// javascriptcn.com 代码示例
// 服务器端入口
import React from 'react';
import { renderToString } from 'react-dom/server';
import App from './App';

const html = renderToString(<App />);

// 返回 HTML 字符串
return `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>My App</title>
      <meta name="description" content="A React SPA" />
    </head>
    <body>
      <div id="root">${html}</div>
      <script src="bundle.js"></script>
    </body>
  </html>
`;

// 客户端入口
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.hydrate(<App />, document.getElementById('root'));

使用 Prerendering 工具

我们可以使用一些 Prerendering 工具来为我们的 SPA 生成静态 HTML 文件。Prerendering 工具通常有两种模式：

预先渲染模式：在部署之前生成静态 HTML 文件
On-demand 渲染模式：在第一次访问页面时，生成静态 HTML 文件

# 使用 Prerender SPA Plugin 工具
npm i prerender-spa-plugin --save-dev

// javascriptcn.com 代码示例
// webpack.config.js
const PrerenderSPAPlugin = require('prerender-spa-plugin');
const path = require('path');

module.exports = {
  entry: 'src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'), // 指定生成的静态文件路径
      routes: ['/'], // 预渲染路由
      postProcess: (renderedRoute) => {
        renderedRoute.html = renderedRoute.html
          .replace(/<script (.*?)>/g, '<script $1 defer>')
          .replace('id="app"', 'id="app" data-server-rendered="true"');
        return renderedRoute;
      },
    }),
  ],
};

总结

SPA 在前端开发中越来越流行，但它的 SEO 问题也日益突出。通过使用 SSR 和 Prerendering 工具，我们可以将 SPA 在 SEO 上的劣势最小化。同时，我们还需注意更多细节，如 Sitemaps、HTML 语义化等。只有考虑全面，才能真正解决 SPA 的 SEO 问题。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653de7107d4982a6eb7896cb