56.关于vue项目的seo问题

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

首先,可以肯定的是前后端分离不利于SEO,为什么呢?

1.搜索引擎的基础爬虫的原理就是抓取你的url,然后获取你的html源代码并解析。 而你的页面通常用了vue等js的数据绑定机制来展示页面数据,爬虫获取到的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/guide/installation

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

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

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

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

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”这种新东西;https://we.dji.com/zh-CN/campus (大疆招聘)使用了Nuxt

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

1) 面包屑导航
2) Icon
3) 搜索框
4) Button组件

关于收录问题:

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

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

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

一是主动出击发现抓取

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

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

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

---------------------
作者:刘贵生
来源:CSDN
原文:https://blog.csdn.net/codeliuguisheng/article/details/79634422
版权声明:本文为博主原创文章,转载请附上博文链接!

原文地址:https://www.cnblogs.com/sqyambition/p/10199170.html

时间: 2024-07-31 06:10:16

56.关于vue项目的seo问题的相关文章

webstorm如何调试vue项目的js

webstorm如何调试vue项目的js webstormvuewebstorm调试jsjs 1.编辑调试配置,新建JavaScript调试配置,并设置要访问的url地址,如下图所示: 在URL处填写示例: http://localhost:8080 保存好调试配置 2.先用dev正常启动项目,然后切换到刚才设置的js调试名称,点击debug按钮,这时候会打开chrome,如下图所示 : 4.当我们在chrome中运行页面,WebStorm就会响应断点状态,如下图所示: 原文地址:https:/

vue 项目的I18n国际化之路

I18n (internationalization ) ---未完善 产品国际化是产品后期维护及推广中重要的一环,通过国际化操作使得产品能更好适应不同语言和地区的需求 国际化重点:1. 语言语言本地化2. 文化颜色.习俗等3. 书写习惯日期格式.时区.数字格式.书写方向备注:项目中会兵分两路,一路是语言的国际化,另一路主要为文化国际化 产品设计之初引入国际化标准,符合项目的开发流程.国内主要主要三点,一个是港澳台采用中文繁体+英文,内陆通俗中文简体,新疆等地区采用文化标准. Vue-I18nV

关于webpack 打包vue项目的2中路由配置方式

首先,2种都是引入配置好的router里面的index.js import Vue from 'vue'import Router from 'vue-router'import login from '@/components/login' Vue.use(Router) 1.第一种写法export default new Router({  routes: [    {      path: '/login',      component: login    }   ]}) 2.第二种写法

vue项目的webpack4.X配置

这两天摆弄webpack,躺过很多坑,直到今天看了一位博主的文章才得以解决.他对配置中的各个部分做说明. 下面的配置99.9%抄自博主: https://www.cnblogs.com/nianyifenzhizuo/p/10271001.html 安装package.json中的node-sass可能因为网络原因不能成功安装 报错信息有一大串,其中提及python和gyp,其实不用去安装他们.只要执行下面的命令: npm set sass_binary_site=https://npm.tao

访问阿里云 vue项目的 127.0.0.1:+ip

vue 127.0.0.1 将  localhost 改为 0.0.0.0 原理看下面链接 参考: https://www.cnblogs.com/sddai/p/9281189.html 原文地址:https://www.cnblogs.com/Jomini/p/10816598.html

codova 打包vue项目的坑

打包过程参考 https://segmentfault.com/a/1190000019491068 坑一: vue router路由不能再使用history模式,因为现在使用的是file协议,不是http(s)协议了,使用history模式会跳转从而找不到文件,修改成hash模式.坑二:路径问题,因为打包成app时会有平台路径添加到前面,所以不能像web一个使用绝对路径,而要使用相对路径,分别打包ios和android就不需要考虑平台路径问题了.但是新的问题出来了,但是如果要剥离css出来,那

独家揭开几项神秘SEO技术的猪八戒面纱

我们常常在励志文章上看到一句话:20岁的时候跟对人,30岁之后要做对事,我觉得这话很有道理. 按照我的理解,20岁的时候你一定要进入到正确的圈子,30岁之后就要努力打造属于自己的圈子. 不论你混白道黑道还是互联网圈,都要讲究的.白道,你没有权力硬邦邦的后台,爬到副科级就是天花板了;黑道,你没后带头大哥罩你,早晚被人砍死在下水沟;互联网圈,你没有交费进到几个已经在互联网上被骗过无数次的大师带你,那么你被骗的次数更多,走的路更曲折. 你接触到的人越多,你就会越来越明白就那么回事——师傅领进门,修行在

springMVC+Mybatis的maven-web项目的pom.xml文件内容

pom.xml文件内容 1 <!-- 第一行是XML头,指定了该xml文档的版本和编码方式 --> 2 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 3 xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://m

Cocos2d-x项目的MVC框架

Cocos2d-x项目的MVC框架 本篇所用的Cocos2d-x版本为:Cocos2d-x 3.2 当我们已经开始搭建好项目,着手开始写代码的时候,我想同学们肯定会遇到这样的一个问题: 某些UI类在加载到父级上之后,经常毫无原由的造成崩溃现象.或者代码写了好几千行,难以进行维护及其他人帮助处理等.这是为什么呢? 其实,就是因为2点: 你对Cocos2d-x还是不够了解 你没有框架的概念 其实,这种问题往往是因为,你子级元素在父级addchild之前,就开始调用到了父级元素.或者说你就一直埋头去写