前后端分离时代如何做SEO？prerender方案来了！

前端

2023-06-22 15:06:50

前后端分离对 SEO 的影响

现代网站的发展趋势是前后端分离，即用户看到的页面内容和网站底层的逻辑处理分离开来。这种设计模式的好处显而易见，它可以提高页面加载速度并减少服务器压力。但随之而来的，是前后端分离对 SEO 的影响，需要我们引起重视。

前后端分离的 SEO 挑战

1. 爬取困难

搜索引擎的爬虫（又称蜘蛛）在抓取前后端分离网站时，会遇到困难。这是因为：

动态加载的内容无法爬取： 搜索引擎爬虫只能抓取静态的内容，而前后端分离网站中的动态加载内容，例如通过 AJAX 或 JavaScript 加载的元素，无法被爬取。
无法执行 JavaScript： 搜索引擎爬虫无法执行 JavaScript 代码，这意味着它们无法获取到通过 JavaScript 渲染的内容。

2. 索引困难

即使搜索引擎爬虫能够抓取到前后端分离网站的静态内容，它们在索引这些内容时也存在困难。原因在于：

无法索引动态加载的内容： 搜索引擎无法索引动态加载的内容，这些内容将无法出现在搜索结果中。
无法理解 JavaScript： 搜索引擎无法理解 JavaScript 代码，这意味着它们无法获取到通过 JavaScript 渲染的内容。

Prerender 方案的救星

为了解决前后端分离对 SEO 的影响，Prerender 方案应运而生。Prerender 的工作原理很简单，它会在服务器端创建一个静态 HTML 版本，供搜索引擎爬虫抓取。

具体来说，当搜索引擎爬虫请求一个前后端分离网站时，Prerender 服务器会执行以下步骤：

创建静态 HTML 版本： Prerender 服务器使用网站的 URL 创建一个静态 HTML 版本，其中包含了所有必要的 CSS 和 JavaScript 文件。
爬虫抓取静态 HTML 版本： 搜索引擎爬虫会抓取这个静态 HTML 版本，而不是网站的动态版本。
索引静态 HTML 版本： 搜索引擎会索引静态 HTML 版本，并将其中的内容纳入搜索结果。

Prerender 方案的优点

Prerender 方案为前后端分离网站提供了 SEO 上的诸多好处：

提升排名： 通过使搜索引擎能够抓取和索引动态加载的内容，Prerender 方案可以帮助提升网站的排名。
降低服务器压力： Prerender 服务器负责创建静态 HTML 版本，从而减少了服务器在处理搜索引擎爬虫请求时的压力。
提高页面加载速度： 由于搜索引擎爬虫抓取的是静态 HTML 版本，因此可以提高页面加载速度。

Prerender 方案的缺点

虽然 Prerender 方案能够解决前后端分离对 SEO 的影响，但它也存在一些缺点：

需要额外服务器资源： Prerender 方案需要额外的服务器资源来创建和存储静态 HTML 版本。
可能导致内容不一致： 由于静态 HTML 版本是由服务器端创建的，它与网站的动态版本可能存在不一致的情况。
可能导致 SEO 问题： Prerender 方案可能导致重复内容或丢失内容等 SEO 问题。

代码示例：使用 Node.js 和 Puppeteer 实现 Prerender

const puppeteer = require('puppeteer');

// 创建 Puppeteer 实例
const browser = await puppeteer.launch();

// 设置页面大小和超时时间
const page = await browser.newPage();
await page.setViewport({ width: 1280, height: 800 });
await page.setDefaultNavigationTimeout(0);

// 设置网站 URL
const url = 'https://example.com';

// 请求网站，等待页面加载完成
await page.goto(url, { waitUntil: 'networkidle2' });

// 创建静态 HTML 版本
const html = await page.content();

// 将静态 HTML 版本保存到文件中
fs.writeFileSync('example.html', html);

// 关闭 Puppeteer 实例
await browser.close();