zhaiduo.com

Loving Coding & Visual Design

本站承接各类安卓/苹果APP开发、小程序开发、网站开发,欢迎联系洽谈

谈 React 这种 SPA 项目的 SEO 优化

如今前后端分离的单页应用已经是主流,无论你是用 React 还是 Vue 框架,不可否认,开发效率和质量确实提升了,相比传统的 HTML + Jquery 开发的方式。

可是当你完成项目后,你还是得面对项目的推广问题,SPA 项目只有一个 HTML 页面,而且里面一般都没有太多文字描述,只有一堆 Js 和 CSS 代码,这个非常不利于搜索引擎爬取和索引数据。怎么做 SPA 项目 的搜索优化,这个已经成为目前我认为 React 框架的最大软肋。 也许这个不是 SPA 框架的问题,而是搜索引擎的问题。不过,目前看来,最实际的还是从 SPA 框架入手。

目前比较主流的做法有两种,一种是 SSR,也就是服务端渲染,因为 Js 代码是可以在服务端运行的,前后端分离的代码都在服务器运行,用户通过网址请求后,服务器返回渲染后的 HTML 代码。另外一种是静态页面生成,就是在服务器上存储的静态文件不是 React 的脚本,而是渲染后的 HTML 加样式。它和第一种的主要区别在于,它是纯静态的,在浏览器运行,而第一种实际上是后端生成页面,是需要 nodejs 环境的。

这两种方法各有优缺点,我的博客现在使用的是第二种。因为我认为完全不需要后端环境的前端代码,才是最经济和实惠的。如果 SPA 项目使用了上面两种方法,那么搜索引擎优化的问题就不存在了,直接使用传统方式优化即可。

但是,如果你的 SPA 项目暂时没法做到渲染后再发布。那确实对 SEO 会有些影响。当然也有一些弥补的办法,不过使用没有渲染后发布的效果好,而且也不能做到很细致的优化。办法如下:
1、优化 index.html 
   对 SPA 项目来说,能优化的只有主页这一页,其它页面都是 Js 代码运行后的效果,一般搜索引擎是没办法获取到的,即便是获取到了,也有可能不是页面逻辑想展现的。
2、针对搜索引擎提供定制的 sitemap 或者是 渲染后的页面
   有些搜索引擎支持定制爬虫的索引,所以我们可以单独给爬虫提供爬取内容

至于具体需要优化什么什么内容,我们下次单独写篇文章再聊。这里不再细谈。