干货来了,关于解决前后端分离的seo问题

Posted 东八区的大闸蟹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了干货来了,关于解决前后端分离的seo问题相关的知识,希望对你有一定的参考价值。

当前浏览器不支持播放音乐或语音,请在微信或其他浏览器中播放 干货来了,关于解决前后端分离的seo问题 干货来了,关于解决前后端分离的seo问题

干货来了,关于解决前后端分离的seo问题


不可否定的是,vue现在火,前后端分离开发也是潮流。但是在实际项目中,特别是像一些交互网站,我们不可避免会考虑到的是seo问题,这直接关系到我们网站的排名,很多人说用spa不能做优化,那我们真的要放弃vue,放弃前后端分离开发么?下边我们来分析一下。

       首先,可以肯定的是前后端分离对seo不友好,为什么呢?

        1.搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vuejs的数据绑定机制来展示页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,所以说用js来渲染数据对seo并不友好。

        2.seo 本质是一个服务器向另一个服务器发起请求,解析请求内容。但一般来说搜索引擎是不回去执行请求到的js的。也就是说,如果一个单页应用,html在服务器端还没有渲染部分数据数据,在浏览器才渲染出数据,而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 所以服务端渲染就是尽量在服务器发送到浏览器前 页面上就是有数据的。

        3.一般的数据逻辑操作是放在后端的。排序这个如果仅仅是几条数据,前后端排序开起来是一样的,如果是有1000条数据,前端要排序就要都请求过来。这样显然是不合理的。

        这就代表交互网站不用vue做么?当然不是。

        无意间在知乎看见vue的作者是这么说的:

 


       所以说,即使是像vue这种前后端分离开发的网站,我们还能够通过其他技术解决seo问题的。

        常用的解决方案有三种:

        1. 页面预渲染
        2. 服务端渲染

        3. 路由采用h5 history模式

        而优化应用到的技术也是有很多,大体上我总结了四个,也是比较常用的:

        第一,ssr,vue官方文档给出的服务器渲染方案,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html

        第二,vue-meta-info,这个是针对单页面的meta SEO的另一种思路,参考网站 https://zhuanlan.zhihu.com/p/29148760

        第三,nuxt,简单易用,具体可以参考 https://zh.nuxtjs.org/

        第四,phantomjs 页面预渲染,具体参考 phantomjs.org

        而市场上依靠vue做出来的成功案例还是很多的:

        1https://www.bilibili.com bilibili
        2http://m.sohu.com (手机搜狐网)
        3https://juejin.im/timeline (掘金)
        4http://element.eleme.io/#/en-US 2
        5https://classics.autotrader.com New&Used Classic Car for sale
        6http://qiqu.uc.cn (奇趣百科)

        7https://m.uhouzz.com/apartments (异乡好居)

        那么他们是如何做优化的呢?我们通过分析,总结以下几点

1bilibili做了基本的seo优化,比如

1TDK描叙详细。

2)提升网页加载速度:对外联css,以及js使用了延迟加载以及dns-prefetchpreload

3)外联较多,关键词排名高。

 2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin SEO进行了优化

  4) 有一些流量不太高的网站比如http://www.marshall.edu Marshall University)做了seo社会化分享优化,在meta信息中出现了property=”og:title”这种新东西;https://we.dji.com/zh-CN/campus (大疆招聘)使用了Nuxt

这些网站中出现率最高的公共组件或公共方法有四个:

1) 面包屑导航
2Icon
3) 搜索框

4Button组件

关于收录问题:

    网站收录,搜索引擎在爬取你的网页以后,通过对网页内容进行检测,将符合收录规则的网页存库。因此该网页将会出现在与网页内容相关的查询的搜索结果中。

    搜索引擎判断一个网站权重高低的尺度无非两个:收录和外链。因此百度收录的高低很大程度上影响着网站在百度的排名

    目前百度spider抓取新链接的途径有两个:

    一是主动出击发现抓取

    二就是从百度站长平台的链接提交工具中获取数据,其中通过主动推送功能上来的数据最受百度spider的欢迎。

        对于站长来说,如果链接很长时间不被收录,建议尝试使用主动推送功能,尤其是新网站,主动推送首页数据,有利于内页数据的抓取。

        这只是我片面的分析,具体情况我们还要根据网站定位,开发成本,后期的维护成本等综合考虑,但是我觉得掘金真的是一个非常成功的案例,既然有人给我们迈出了这一步,我们也要紧跟潮流,毕竟互联网是一个与时俱进的行业。如果我们永远停留在传统的混合开发,也会给我们的公司,给我们个人带来一些影响。




更多文章:

2.

以上是关于干货来了,关于解决前后端分离的seo问题的主要内容,如果未能解决你的问题,请参考以下文章

干货基于Vue的前后端分离实践

分层架构,前后端分离有啥坏处?

nodejs作为前后端分离中间件的跨域解决方案

干货苏宁易购:前后端分离架构的落地思考

前后端分离用nodejs做seo

WEB开发中前后端分离的好处与区别