vue项目的seo

news/2024/5/20 14:52:30/文章来源:https://blog.csdn.net/weixin_34332905/article/details/92493262

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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

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

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

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

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

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

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

2018032108175973

   所以说,即使是像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的欢迎。

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

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

转载于:https://my.oschina.net/parchments/blog/3032376

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_716703.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

屏蔽复制网站内容时弹出的提示

例如chrome浏览器,在设置里把JavaScript关掉就行了 url地址栏输入chrome://settings/content/javascript?searchjavascript

网站设计HTML——百度 滚筒洗衣机

滚筒洗衣机的效果 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>滚筒洗衣机销售排行榜</title> </head> <body> <div><h1>滚筒洗衣机销售排行榜</h1><div&g…

linux救援模式使用yum,centos如何进救援模式_网站服务器运行维护,centos

如何解决CentOS7系统ifconfig无法使用的情况_网站服务器运行维护CentOS7系统ifconfig无法使用的解决方法&#xff1a;首先查看“ifconfig”命令所需要的安装包&#xff1b;然后使用“#yum -y install net-tools”命令安装软件&#xff1b;最后使用“ifconfig”查看IP信息即可。…

如何删除ppt自带背景音乐_把网站搬进PPT里是种怎样的体验?

本文总计&#xff1a;2477 字预计阅读时间&#xff1a;10 分钟昨天&#xff0c;我给大家推荐了一个酒类产品的官网&#xff0c;不知道大家看过没。要是没看过的话&#xff0c;也没有关系&#xff0c;因为我用 PPT 把这个网站仿制了一下。保留了主要元素&#xff0c;以及大部分的…

mysql网站中文乱码,关于MySQL中文乱码的完美解决方案

当用客户端或用其他方式连接数据键入中文数据后&#xff0c;在client中的显示为乱码&#xff0c;当然这是字符集设置出现了问题。我先后尝试了很多办法&#xff0c;但依然还是无法在client中显示中文&#xff0c;我尝试在my.ini中修改一下数据在[client]中加入。# Here follows…

php asp.net mvc jsp,IIS部署asp.net mvc网站的方法

iis配置简单的ASP.NET MVC网站&#xff0c;供大家参考&#xff0c;具体内容如下编译器&#xff1a;VS 2013本地IIS&#xff1a;IIS 7操作系统&#xff1a;win 7MVC版本&#xff1a;ASP.NET MVC4sql server版本: 2008 r2打开VS 2013&#xff0c;新建一个MVC项目(Internet版的),然…

特殊日期将网站变成灰色-css滤镜(整理)

一、网站变灰 <!DOCTYPE html> <html> <head> <style> img {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);-ms-filter: grayscale(100%);-o-filter: grayscale(100%);filter: grayscale(100%);filter: progid:DXImageTransform.Micr…

tp5怎么做清空网站缓存

首先我们要做的效果如图&#xff1a; 前台代码 <li><a href"{:url(Index/clearCache)}" class"login-area dropdown-toggle"><section><h2><span class"profile"><span><i class"menu-icon fa fa …

nccloud 开发环境访问_比快更快,Github Action + 云开发部署静态网站

Github 为开源项目提供了用于静态页面展示的 Pages 服务&#xff0c;很多开发者都在上面托管了自己的静态网站和博客&#xff0c;不少开源项目的案例和文档页面也采用了这种方式。不过由于 Pages 的 CDN 节点大部分在国外&#xff0c;在国内的访问速度不是很理想&#xff0c;不…

白嫖网站文章复制粘贴

我一看到这种就是特别烦&#xff0c;复制一篇文章就要钱&#xff0c;于是想到了一个好办法 1.首先按F12键&#xff0c;就会弹出如下界面&#xff0c;如果你是开发人员就会秒懂的。 2.点击Console 3.在下方空白输入$0,直接按回车键 , 就可以直接复制文章了&#xff0c;是不是很…

无法访问 IIS 元数据库。您没有足够的特权访问计算机上的 IIS 网站。

1.使用VS2015运行项目&#xff0c;选择使用本机iis运行时报错&#xff1a; XXXX 已配置为使用 IIS。 无法访问 IIS 元数据库。您没有足够的特权访问计算机上的 IIS 网站。 解决方法1&#xff1a; 以"管理员权限"运行VS,在VS菜单打开项目即可。 但是以上解决方法不…

VS2015设置网站/WebSite的启动端口

1.说明在 VS2015的版本中 没有提供修改端口的地方&#xff0c;在网站的属性页中 2.如果想要修改生产环境&#xff08;IISExpress&#xff09;的端口需要在解决方案源代码修改 使用记事本等打开.sln文件 手动修改启动地址

全栈式开发,前端工程化,以nodejs,eggjs为服务器语言,mysql为数据库,vue,vuex,wangeditor,i18n,webpack前端架构服务器端渲染ssr支持seo的博客网站

前言 下面介绍本人开发的个人博客&#xff0c;希望通过开源的方式一起学习和进步&#xff01; 源码地址 网站首页-钢琴家 1. 背景 该项目为一个学习型的博客网站案例&#xff0c;毕竟每个it工程师都想有一个自己的博客嘛&#xff0c;适合初中级前端工程师&#xff1b;项目已…

Teleport Ultra网站静态资源下载工具

一、TeleportUltra官网地址&#xff1a; http://www.tenmax.com/ 下载地址&#xff1a;http://download.csdn.net/detail/u011127019/9749284 简介&#xff1a; Teleport Ultra 所能做的&#xff0c;不仅仅是离线浏览某个网页&#xff0c;它可以从 Internet 的任何地方抓回…

网页在线打开PDF_网站中在线查看PDF之TouchPDF

一、网页在线打开PDF_网站中在线查看PDF之TouchPDF TouchPDF是用于jQuery的简单Web PDF查看器。它基于pdf.js库&#xff0c;并支持用于滑动页面和缩放的移动手势。 可以实现的功能 用手指滑动到下一页或上一页捏放大和缩小跟随指向文档部分或外部URL的链接添加彩色标签以快速…

Cordova 网站打包_Cordova 打包网址

一、Cordova 网站打包_Cordova 打包网址 cordova打包网址,启动app后直接跳转网站,操作比较简单,修改xml配置文件的content标签的src即可。 xml配置如下: <?xml version=1.0 encoding=utf-8?> <widget id="com.ql.audio" version="1.0.0&quo…

自定义get方法模板_5分钟上手Egg.js+nunjucks模板引擎快速开发SEO友好的官网项目...

在日常的项目中&#xff0c;有时候还是不可避免的会维护一些jq官网项目等。面对此类需求&#xff0c;很多还是以前的老套路&#xff0c;前端写页面交给后端去套数据。很烦有木有&#xff5e;&#xff5e;而改动之后还得交给后端再次修改&#xff0c;时间和沟通都是个麻烦。同时…

如何确定你访问的网站的真实性——证书体系

为了满足互联网环境下电子商务等行为的安全性要求&#xff0c;需要有个方法确认身份。证书就是为了证明这个网站的身份 假如A服务器上部署了证书&#xff0c;证明我是张三&#xff0c;而B服务器只是假冒了张三&#xff0c;但并没有张三的证书&#xff0c;那他就不是真的&#…

android可用视频地址,「Android」一款可以获取国内各大视频网站直接播放地址的应用...

GetVideo 是一款可以在 Android 手机上获取各大视频网站直接播放地址的应用&#xff0c;之后便可以配合 MX Player 播放&#xff0c;支持芒果tv、央视、优酷、腾讯、爱奇艺、聚力体育等网站。开始青小蛙以为这是一款用来下载视频的应用&#xff0c;没想到是一款获取播放链接的应…

如何去掉文章里的非关键词c++_什么是长尾关键词?如何挖掘网站长尾关键词?...

对一些SEO的新站来说&#xff0c;竞争性强的词是很难做上去的&#xff0c;可以着重网站内容&#xff0c;扩充大量长尾关键词&#xff0c;从而大幅度增加网站流量。网站的权重比较高的站&#xff0c;基本上目标关键词排名都是做上去了&#xff0c;但是通过长尾关键词获得的流量占…