vue seo
最近在实习,刚来没几天,老大没安排什么大事给我,昨天下午说给我一个小任务,要求如下:
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的更多相关文章
- 基于Vue SEO的四种方案
基于Vue SEO的四种方案 https://segmentfault.com/a/1190000019623624?utm_source=tag-newest
- 83.基于Vue SEO的四种方案(小结)
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SRR和静态化基于Nuxt来说. 1.SSR服务器渲染:2.静态化:3.预渲染 ...
- vue seo 优化
预渲染prerender-spa-plugin 如果你只是用来改善少数营销页面(例如 /, /about, /contact 等)的 SEO,那么你可能需要预渲染.无需使用 web 服务器实时动态编译 ...
- vue seo管理 vue-meta-info
vue-meta-info: 安装: npm install vue-meta-info --save 全局引入vue-meta-info,在main.js ...
- Vue的SEO问题汇总
方式一 思否 https://segmentfault.com/q/1010000011824706 SSR 和 Nuxt.js : https://zh.nuxtjs.org/ https://se ...
- vue骨架屏以及seo优化
参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...
- 前端开发:如何写一手漂亮的 Vue
前几日听到一句生猛与激励并存,可怕与尴尬同在,最无奈也无解的话:"90后,你的中年危机已经杀到".这令我很受触动.显然,这有些夸张了,但就目前这日复一日的庸碌下去,眨眼的功夫,那情 ...
- 改造@vue/cli项目为服务端渲染-ServerSideRender
VUE SEO方案二 - SSR服务端渲染 在上一章中,我们分享了预渲染的方案来解决SEO问题,个人还是很中意此方案的,既简单又能解决大部分问题.但是也有着一定的缺陷,所以我们继续来看下一个方案--服 ...
- vue预渲染及其cdn配置
VUE SEO方案一 - 预渲染及其cdn配置 项目接入VUE这样的框架后,看起来真是太漂亮了,奈何与MCV框架比起来,单页应用程序却满足不了SEO的业务需求,首屏渲染时间也是个问题.总不能白学VUE ...
随机推荐
- webdriver学习笔记(一):webdrive脚本打开firefox浏览器,报“AttributeError: module 'selenium.webdriver' has no attribu
按照网上提供的方法: 下载geckodriver之后解压缩到 Firefox安装目录 下 添加 Firefox安装目录 到 系统变量Path 重启pycharm 照此步骤执行后,仍然报同样的错.折腾了 ...
- UVALive 6507 Passwords
Passwords Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...
- 共享一个NOI用过的vimrc [rc][vimrc]
set nocp set nu set ru set noet set ai set cin set mouse =a set mp=g++\ %\ -o\ %<\ -g\ -Wall\ -Ws ...
- PHP $_SERVER的使用
常常会用到php的$_SERVER变量,可是好多常用的参数又不熟每次都去查手册.为了记住一些常用的,写个日志吧.前导:网站根目录:/www/domain.com/访问Url:http://www.do ...
- Thinkphp5.0 的Model模型
Thinkphp5.0 的Model模型 新建user模型User.php: <?php namespace app\index\model; use think\Model; class Us ...
- 牛客网小白月赛1 B,I
#include <stdio.h> #include <math.h> #include <string.h> #include <stdlib.h> ...
- sqlserver2008 存储过程使用表参数
----首先,我们定义一个表值参数类型,其实就是一个表变量 Create type dbo.tp_Demo_MultiRowsInsert as Table ( [PName] [Nvar ...
- golang 中可变参数的个数
package main import "fmt" func Greeting(prefix string, who ... string) { fmt.Println(prefi ...
- Django学习系列之Form验证
django表单基础 django表单分类 基于django.forms.Form:所有表单类的父类 基于django.forms.ModelForm:可以和模型类绑定的Form Form验证流程 定 ...
- 在Windows上安装Nexus
在Windows上安装Nexus 学习了:https://www.cnblogs.com/yucongblog/p/6696736.html 下载地址:https://sonatype-downloa ...