vue的SEO问题

首先,能够确定的是先后端分离不利于SEO,为何呢?css

  1. 搜索引擎的基础爬虫的原理就是抓取你的url,而后获取你的html源代码并解析。 而你的页面一般用了vue等js的数据绑定机制来展现页面数据,爬虫获取到的html是你的模型页面而不是最终数据的渲染页面,因此说用js来渲染数据对seo并不友好。
  2. seo 本质是一个服务器向另外一个服务器发起请求,解析请求内容。但通常来讲搜索引擎是不回去执行请求到的js的。也就是说,若是一个单页应用,html在服务器端尚未渲染部分数据数据,在浏览器才渲染出数据,而搜索引擎请求到的html是没有渲染数据的。 这样就很不利于内容被搜索引擎搜索到。 因此服务端渲染就是尽可能在服务器发送到浏览器前 页面上就是有数据的。
  3. 通常的数据逻辑操做是放在后端的。排序这个若是仅仅是几条数据,先后端排序开起来是同样的,若是是有1000条数据,前端要排序就要都请求过来。这样显然是不合理的。

无心间看见vue做者在知乎是这么说的 html

image

可是,对于像vue这种先后端分离的开发,咱们仍是可以经过其余技术优化的。经常使用的解决方案有三种:前端

  1. 页面预渲染
  2. 服务端渲染
  3. 路由采用h5 history模式

第一,ssr,这是一套完整的构建vue服务端渲染应用的指南,具体参考https://cn.vuejs.org/v2/guide/ssr.html 第二,vue-meta-info,这个是针对单页面的meta SEO的另外一种思路,参考网站 zhuanlan.zhihu.com/p/29148760 第三,nuxt 简单易用 zh.nuxtjs.org/guide/insta… 第四,phantomjs 预渲染 phantomjs.orgvue

关于收录问题: 网站收录,搜索引擎在爬取你的网页之后,经过对网页内容进行检测,将符合收录规则的网页存库。所以该网页将会出如今与网页内容相关的查询的搜索结果中。 搜索引擎判断一个网站权重高低的尺度无非两个:收录和外链。所以百度收录的高低很大程度上影响着网站在百度的排名。(这个我也不是很清楚,可是看掘金真的是一个很好的案例,值得咱们思考)后端

用vue作出来的成功案例还有不少 1) www.bilibili.com (bilibili)
2) m.sohu.com (手机搜狐网)
3) juejin.im/timeline (掘金)
4) element.eleme.io/#/en-US (2)
5) classics.autotrader.com (New&Used Classic Car for sale)
6) qiqu.uc.cn (奇趣百科)
7) m.uhouzz.com/apartments (异乡好居) 2. Vue网站SEO分析
1) bilibili作了基本的seo优化,好比
(1)TDK描叙详细。
(2)提高网页加载速度:对外联css,以及js使用了延迟加载以及dns-prefetch,preload。
(3)外联较多,关键词排名高。
2) 掘金网站使用了vue-meta-info 管理网站的meta,应该配合使用了prerender-spa-plugin 对SEO进行了优化。
3) Element在logo上加了首页的地址,而且只有logo是放在h1标签中。
4) 有一些流量不过高的网站好比http://www.marshall.edu (Marshall University)作了seo社会化分享优化,在meta信息中出现了property=”og:title”这种新东西;we.dji.com/zh-CN/campu… (大疆招聘)使用了Nuxt 3. 网站中出现率最高的公共组件或公共方法
1) 面包屑导航
2) Icon
3) 搜索框
4) Button组件浏览器

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

相关文章
相关标签/搜索