纯前端代码丧失SEO？ 如何让单页应用被搜索引擎收录？

大家好，我是贝贝。今天聊聊纯前端代码和SEO的事。不少人问，为什么我的单页应用在谷歌上搜不到？ 这其实是个挺实际的问题。

为什么纯前端渲染会“丧失”SEO？

先说一个基本概念。传统的网站，比如用PHP或Java写的，服务器会把完整的HTML页面直接发给浏览器。搜索引擎爬虫来了，看到的也是这个完整的HTML，抓取收录很直接。

但现在的纯前端应用，比如用React、Vue、Angular做的，运行逻辑变了。浏览器拿到手的是一个几乎空的HTML外壳和一堆JavaScript文件。页面的真实内容，是靠这些JS代码在浏览器里执行后，动态生成和填充的。

问题就出在这里。很多搜索引擎爬虫（尤其是早期版本），在处理复杂JavaScript时能力有限。它们可能不会等你的JS执行完，或者根本不去执行。爬虫看到的，就是那个空荡荡的外壳，自然就认为你的页面“没有内容”。

这里有个简单的对比：

所以，不是“丧失”，而是传统的纯前端默认模式，没有为爬虫提供它容易理解的“食物”。

那具体该怎么做才能改善？

别慌，有办法。现在主流的框架都有解决方案。

第一个思路，用服务端渲染。

这是最直接的方案。让服务器把页面渲染好，再把完整的HTML发给客户端和爬虫。这样两边看到的内容就是一致的。

比如用Next.js（React）或Nuxt.js（Vue）。你写代码的方式差不多，但框架会在构建时或请求时，在服务器端把你的组件预先渲染成HTML。

配置起来也不复杂。以Next.js为例，你只需要：

• 在 `pages` 目录下创建页面文件。
• 使用 `getServerSideProps` 函数来获取数据。
• 这个函数会在每次请求时在服务器端运行，把数据作为props传给页面组件。

  
  

  这样，生成的HTML里就直接包含了数据和内容。

第二个思路，用静态站点生成。

如果你的页面内容不经常变，比如博客、产品介绍页，这个方案更合适。它在构建阶段就生成好所有静态HTML文件，部署到CDN上。

访问速度极快，对爬虫也极其友好。像Gatsby（React）、VuePress都是干这个的。

操作步骤一般是：

• 准备好你的页面组件和数据源（可能是Markdown文件、CMS接口）。
• 运行构建命令（如 `npm run build`）。
• 框架会获取所有数据，为每个路由生成对应的HTML文件。

  
  

  部署这些静态文件到Netlify、Vercel或任何Web服务器都行。

第三个思路，动态渲染。

这是专门针对爬虫的“特殊照顾”。原理是判断访问者是不是爬虫，如果是，就给它一个服务器端渲染好的版本；如果是普通用户，就给正常的纯前端应用。

这听起来复杂，但有些云服务商提供了开箱即用的方案。不过自己实现的话，需要维护一个Headless Chrome实例来渲染页面给爬虫，技术成本比较高。

一些关键的实操细节

不管你选哪种方案，有些细节必须注意，不然功夫可能白费。

1. 正确设置标题和元标签

在单页应用里，页面切换不会重新加载整个HTML，所以 `