最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下:

1.收集几个流量大的网站(必须是vue做的)页面交互和逻辑尽可能复杂多样
2.对比一下各个页面的seo是如何做的
3.网站中出现率做多的公共组件或者公共方法是什么
于是我就开始收集了,在这期间也了解到了很多东西。
1 .首先怎么判断网站是用vue做的,我的方法当然是先搜一搜,当让搜出来的并不一定是,接下来可以用vue-develop这个插件,只要你安装了这个插件,是vue的网站该插件的图标就会点亮
2 .如何判断该网站是否是高流量网站,我的方法是去站长之家 看看他的alexa排名,一般情况下排名越靠前流量越高,也可以看看他的seo综合查询的情况,这样我就找出了相对高流量的网站。
3 .如何分析一个页面的SEO技术,我之前也是一头雾水,后来看了好多资料,找到了一片感觉比较可靠诊断网站seo 一共有三篇文章,比较详细。
4 .看了老大给的要求我就想到了由于项目使用的vue,会存在SEO的问题,让我分析页面的SEO最好不要漏掉最近流行的适用于vue的SEO优化方案,我查了一下,大概有以下几种:
(1)ssr,即单页面后台渲染
(2)vue-meta-info 与prerender-spa-plugin 预渲染
(3)nuxt
(4)phantomjs

最终我有了下面的输出
Vue网站及分析
1. 高流量vue网站
1) https://www.bilibili.com (bilibili)
2) http://m.sohu.com (手机搜狐网)
3) https://juejin.im/timeline (掘金)
4) http://element.eleme.io/#/en-US (element)
5) https://classics.autotrader.com (New&Used Classic Car for sale)
6) http://qiqu.uc.cn (奇趣百科)
7) https://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”这种新东西;https://we.dji.com/zh-CN/campus (大疆招聘)使用了Nuxt

3. 网站中出现率最高的公共组件或公共方法
1) 面包屑导航
2) Icon
3) 搜索框
4) Button组件
---------------------
作者:fighting_today_cui
来源:CSDN
原文:https://blog.csdn.net/qq_34109078/article/details/78297019
版权声明:本文为博主原创文章,转载请附上博文链接!

vue seo的更多相关文章

  1. 基于Vue SEO的四种方案

    基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest

  2. 83.基于Vue SEO的四种方案(小结)

    前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...

  3. vue seo 优化

    预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 ...

  4. vue seo管理 vue-meta-info

    vue-meta-info:         安装: npm install vue-meta-info --save         全局引入vue-meta-info,在main.js      ...

  5. Vue的SEO问题汇总

    方式一 思否 https://segmentfault.com/q/1010000011824706 SSR 和 Nuxt.js : https://zh.nuxtjs.org/ https://se ...

  6. vue骨架屏以及seo优化

    参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...

  7. 前端开发:如何写一手漂亮的 Vue

    前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...

  8. 改造@vue/cli项目为服务端渲染-ServerSideRender

    VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...

  9. vue预渲染及其cdn配置

    VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...

随机推荐

  1. Windows Server 2008 R2 Enterprise 安装.NET Framework 4.0

    由于服务器上没有.NET 4.0 部署不了 4.0及以上版本的网站,所以给他安排一下:​ 复制下好的.NET Framework 4.0到服务器开始安装: ​ ​ ​ ​ 安装完,重新打开IIS,已经 ...

  2. 九度oj 题目1077:最大序列和

    题目1077:最大序列和 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6435 解决:1931 题目描述: 给出一个整数序列S,其中有N个数,定义其中一个非空连续子序列T中所有数的和为T ...

  3. [ 浙江大学 程序设计专题 ] 四个专题代码 报告 PPT共享

    [原创]转载请注明出处,请勿用于作弊 专题一: 链接: https://pan.baidu.com/s/11xCwvuPHDkTPeOB_yzJWnw 提取码: prup 专题二: 链接: https ...

  4. Nginx 的 server_names_hash_bucket_size 问题

    在 Nginx 0.6.35 的版本中,配置多个 server 虚拟主机,必须要在配置文档中 http { 里头加上 server_names_hash_bucket_size 64; 这么一句 ht ...

  5. 联想M7400打印机加粉墨了还是显示没有粉墨

     联想M7400打印机加粉墨了还是显示没有粉墨?想必有很多的办公人士发现这个难题吧.其实很简单的! 先说下打印机的原理,打印机粉墨一边用的时候系统也在计数,当我们打印机加好墨后但打印机是不知道已经加好 ...

  6. 【.Net 学习系列】-- 反射的简单用法

    新建两个项目:类库(Model)和控制台应用程序(ReflectTest). 在[Model]中添加一个类[User]: namespace Model { public class User { p ...

  7. delphi异步选择模型编程TCP

    Server端: unit U_FrmServer; interface uses Windows, Messages, SysUtils, Classes, Graphics, Controls, ...

  8. 学习swift从青铜到王者之Swift集合数据类型03

    1 数组的定义 var array1 = [,,,] var array2: Array = [,,,] var array3: Array<Int> = [,,,] var array4 ...

  9. Redux 中文文档

    http://cn.redux.js.org/docs/introduction/Ecosystem.html

  10. laravel toggle方法

    toggle方法主要用于多对多关系中,attach detach 比如点赞 收藏 1.user表 2.post表 title content 3.中间表 favoriate user_id post_ ...