非服务端渲染页面如何做SEO

Lin_YT 发布于2019-08-20 18:02 / 415人阅读

摘要：这个方案的主要思想是利用实现前端路由跳转通过服务端配置，支持不带号的这个可酌情考虑，是否有必要通过服务端将页面主要内容渲染近标签，供搜索爬虫抓取这种模式下，不仅使页面更好的被搜索引擎收录，同时使网站在禁用的时候，也能够浏览基本的帖子内容。

前段时间对公司的社区h5网站，进行改版（整站重写）。老版本的网站是在一套古老的php框架下开发的，包含很多模板文件，大部分页面都是后端模板渲染，前端开发时要与后端沟通模板逻辑的编写，前后端耦合严重，非常不利于开发。为了实现前后端分离，减轻服务端的渲染压力，我们决定使用目前流行Vue框架，进行前端页面组件化开发，使用前端路由，后端只提供数据接口和必要的模板变量渲染。
但这样一来，网站的SEO就成为不得不考虑的重要问题之一，本文就是对我们实际开发中SEO解决方案的一个总结，介绍为什么要做SEO，客户端渲染应用的SEO解决方案，以及我们采用的方案。

为什么要做SEO

对于一般的功能性h5单页应用，因为其入口或使用场景的原因，使其对SEO并不敏感，例如微信下的滴滴打车。但对于社区类应用，通过搜索引擎搜索对应的帖子是基本的需求。因此在进行前期的技术方案调研时，我们首先考虑的是如何做网页的SEO。
对于服务端渲染的页面，由于页面的HTML结构直接由后端吐出，天然对搜索引擎支持良好，考虑更多的是如何让网站搜索排名更靠前。而对于页面由前端渲染，HTML结构是js动态生成的网站，由于搜索引擎目前并不支持js渲染内容的抓取，所以如何给搜索引擎爬虫提供收录的内容，成为要考虑的首要问题。

解决方案 客户端渲染应用的SEO

常见的单页应用中，页面的切换是通过URL中的哈希(#)来实现的，hash值得变化并不会发起浏览器请求，通过监听hashChnage事件，来实现前端的路由切换。对于这种应用中，搜索引擎很难抓取不同页面的内容，而且页面的渲染大多也是ajax异步获取数据后进行渲染，更加不利于SEO。为此，Google提供了一套针对这种类型的网站开发者的SEO解决方案。
方案规定：

网站提交sitemap给Google；

Google发现URL里有#!符号，例如example.com/#!/detail/1，于是Google开始抓取example.com/?_escaped_fragment_=/detail/1；

_escaped_fragment_这个参数是Google指定的命名，如果开发者希望把网站内容提交给Google，就必须通过这个参数生成静态页面。
这种方案本质上是为搜索引擎提供多带带页面，以供爬虫收录。

目前流行的前端路由库，大多是使用了HTML5 History API，通过这种方式，使得前端hash跳转同样能够很好的记录历史，兼容浏览器的前进后退按钮，提供良好的用户体验。同时也都提供history模式，例如vue-router：

const router = new VueRouter({
  mode: "history",
  routes: routes
});

这种模式下，加上服务端的配合，能够使前端路由更加接近后端路由，提供更加友好的url，
例如： http://domain.com/user/tom 等价于非history模式下的http://domain.com/#/user/tom

至于如何设置服务端，可以参看vue router教程history-mode;

因为网页的的地址发生了变化，浏览器会发起请求，但由于服务端设置，其实访问的还是同一个资源。这种模式下，其实SEO就可以使用我们下面介绍的方案。

首屏渲染主要内容到noscript标签

这个方案是阮一峰的一篇文章如何让搜索引擎抓取AJAX内容？里提到的，也是我们最终采用的方案。
这个方案的主要思想是：

利用History api 实现前端路由跳转

通过服务端配置，支持不带#号的URL（这个可酌情考虑，是否有必要）

通过服务端将页面主要内容渲染近

在禁用js（爬虫访问时）,得到的dom结构如下图

这样浏览器即使禁用了js，依然能够显示出网站的关键内容，而页面上的网址也是爬虫继续收录的入口。

优化

其实，上面的方案在首屏渲染的时候，已经包含了页面所需的数据，而这些数据是可以被js渲染页面时所利用的，将首屏数据渲染进js变量，就可以减少首屏渲染的http请求。

例如，我们将首屏的列表数据，渲染进全局变量，对应的地址： https://domain/forum-22-1.htm...

然后在vuex获取列表数据时，我们就可以判断，如果当前页面前端路由的页面和后端的当前页面是同一个，就直接在data_thread_list 取数据：

[actions.FETCH_FORUM_LIST]({commit, state}, params) {

      commit(actions.FETCH_FORUM_LIST_PENDING);

      if (window.data_current_page === params.page) { // 如果当前前端路由的页面和后端的当前页面是同一个，就直接在data_thread_list 取数据
        let forumlistData = window.data_thread_list.data;
        commit(actions.FETCH_FORUM_LIST_SUCCESS, forumlistData);
        return;
      }
      
      axios.get() // ajax请求获取页面数据。
}

这样一来，当页面首次渲染时，我们就不需要发起任何ajax请求：

参考文档

如何让搜索引擎抓取AJAX内容
url的 #号
单页应用SEO浅谈

GPU云服务器云服务器服务器端如何做缓存如何做html页面服务端渲染页面渲染测速

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/84034.html

细说 Vue 组件的服务器端渲染

摘要：所以，这次就来聊聊组件的服务器端渲染。这种模式下，后端只提供接口，传统的服务器端路由模板渲染则都有层接管。这样，前端开发人员可以自由的决定哪些组件需要在服务器端渲染，哪些组件可以放在客户端渲染，前后端完全解耦，但又保留了服务器端渲染的功能。细说 Vue 组件的服务器端渲染声明：需要读者对 NodeJs、Vue 服务器端渲染有一定的了解现在，前后端分离与客户端渲染已经成为前端开发的...

reclay 2019-08-23 17:51 评论0 收藏0
细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）

摘要：细说后端模板渲染客户端渲染中间层服务器端渲染前端与后端渲染方式的发展大致经历了这样几个阶段后端模板渲染客户端渲染中间层服务器端渲染。与后端模板渲染刚好相反，客户端渲染的页面渲染都是在客户端进行，后端不负责任何的渲染，只管数据交互。细说后端模板渲染、客户端渲染、node 中间层、服务器端渲染（ssr）前端与后端渲染方式的发展大致经历了这样几个阶段：后端模板渲染、客户端渲染、node ...

icyfire 2019-08-23 12:23 评论0 收藏0
浅谈前后端分离与实践之 nodejs 中间层服务（二）

摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注一、背景书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...

ddongjian0000 2019-08-21 17:13 评论0 收藏0
浅谈前后端分离与实践之 nodejs 中间层服务（二）

摘要：服务端任需要进行校验来达到数据的可靠性前端的路由可能在服务端并不存在等等这一系列重用性的问题。串行并行，大幅缩短请求时间。关于作者本人主页本文部分图片段落参考文章淘宝前后端分离实践微信公众号会不定期推送前端技术文章，欢迎关注一、背景书接上文，浅谈前后端分离与实践(一) 我们用mock服务器搭建起来了自己的前端数据模拟服务，前后端开发过程中只需定义好接口规范，便可以相互进行各自的开发...

mochixuan 2019-08-01 17:51 评论0 收藏0
ajax基础知识

摘要：各浏览器都有自己的关于最大长度的限制谷歌火狐超过限制长度的部分，浏览器会自动截取掉，导致传递给服务器的数据缺失。 AJAX基础知识及核心原理解读 AJAX基础知识什么是AJAX？async javascript and xml，异步的JS和XML xml：可扩展的标记语言作用是用来存储数据的（通过自己扩展的标记名称清晰的展示出数据结构）ajax之所以称为异步的js和xml，主要原因...

wangshijun 2019-08-22 15:47 评论0 收藏0