Vue 项目如何进行 SEO 优化
目录
1.前言
2.SSR服务器渲染
3.静态化 (博客, 介绍性官网)
4.预渲染 prerender-spa-plugin (插件)
5.使用Phantomjs 针对爬虫 做处理
总结:
1.前言
Vue SPA单页面应用对SEO不太友好,当然也有相应的解决方案,下面列出几种SEO方案
2.SSR服务器渲染
服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构
关于服务器渲染:Vue官网介绍 ,对Vue版本有要求,对服务器也有一定要求,需要支持nodejs环境。
优势: 更好的 SEO,由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
缺点: 服务器nodejs环境的要求, 且对原代码的改造成本高!
nuxt.js
(坑比较多, 做好踩坑的准备
3.静态化 (博客, 介绍性官网)
Nuxt.js 可以进行 generate 静态化打包, 缺点: 动态路由会被忽略。
/users/:id
优势:
编译打包时, 就会帮你处理, 纯静态文件,访问速度超快;
对比SSR,不涉及到服务器负载方面问题;
静态网页不宜遭到黑客攻击,安全性更高。
不足:
如果动态路由参数多的话不适用。
4.预渲染 prerender-spa-plugin (插件)
如果你只是对少数页面需要做SEO处理(例如 / 首页, /about 关于等页面)
预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)
优势: 设置预渲染简单, 对代码的改动小
缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)
5.使用Phantomjs 针对爬虫
做处理
Phantomjs是一个基于webkit内核的无头浏览器,没有UI界面,就是一个浏览器,
其内的点击、翻页等人为相关操作需要程序设计实现。
这种解决方案其实是一种旁路机制,原理就是通过Nginx配置, 判断访问的来源UA是否是爬虫访问,
如果是则将搜索引擎的爬虫请求转发到一个node server,再通过PhantomJS来解析完整的HTML,返回给爬虫
优势:
完全不用改动项目代码,按原本的SPA开发即可,对比开发SSR成本小太多了;
对已用SPA开发完成的项目,这是不二之选。
不足:
部署需要node服务器支持;
爬虫访问比网页访问要慢一些,因为定时要定时资源加载完成才返回给爬虫;(不影响用户的访问)
如果被恶意模拟百度爬虫大量循环爬取,会造成服务器负载方面问题,
解决方法是判断访问的IP,是否是百度官方爬虫的IP。
总结:
如果构建大型网站,如商城类 => SSR服务器渲染
如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便
如果是已用SPA开发完成的项目进行SEO优化,而且部署环境支持node服务器,使用 Phantomjs
【博客参考:】https://www.jb51.net/article/164285.htm
Vue 项目如何进行 SEO 优化相关推荐
- 前端面试题Vue 项目如何进行 SEO 优化
本文部分内容参考官方文档 Vue SPA单页面应用对SEO不太友好,当然也有相应的解决方案,下面列出几种SEO方案 SSR服务器渲染 服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览 ...
- vue项目的首屏优化策略
虽然标题是vue项目的首屏优化策略,但是里面绝大部分的方法,对于其他语言写成的单页应用同样适用 1.使用路由懒加载 首屏进入时,直接加载和首屏相关路由,其他全部路由组件实现懒加载,即打开该路由时再去加 ...
- Vue项目的打包\部署\优化
Vue项目的打包\部署\优化 如果有帮助到你 麻烦点个赞或者 收藏 +关注 哟 以后会经常发布一些干货文章 我只是一个前端小菜鸟,大佬勿喷! 一.nginx 开启 gzip 理论上,nginx 开启 ...
- prerender html5,HTML5 VUE单页应用 SEO 优化之 预渲染(prerender-spa-plugin)
前言:当前 SPA 架构流行的趋势如日中天,前后端分离的业务模式已经成为互联网开发的主流方式,但是 单页面 应用始终存在一个痛点,那就是 SEO, 对于那些需要推广,希望能在百度搜索时排名靠前的网站而 ...
- 手把手教你做VUE单页应用SEO优化
前言 最近写了个门户网站使用vue做的,不可避免的遇到了SEO方面相关的问题,下面将我采用的解决方案贴出来供大家参考 主流的方案 1.SSR服务器渲染: 2.静态化: 3.Nuxt: 4.预渲染pre ...
- vue骨架屏以及seo优化
参考文档 vue骨架屏 https://blog.csdn.net/ly124100427/article/details/81168908 vue seo优化 1.SSR服务器渲染: 2.静态化: ...
- vue项目打包及cdn优化
vue项目的打包上线及优化 项目完成,我们会将项目进行上线,同时为了提升性能,我们往往会进行一些优化处理 vue项目的打包 脚手架项目中有一个默认的打包命令,我们可以输入npm run bulid来对 ...
- vue编译速度过慢?大型vue 项目使用dll插件优化编译速度,效果显著
为什么要优化编译速度 vue项目过大,引用的组件过多,当启动项目打包项目或者修改代码的时候会发现编译速度太慢,浪费时间,甚至每改一行代码都可能需要编译三十秒以上,所以必须要优化,这样是在浪费生命 如何 ...
- 综合案例:品优购项目(品优购项目流程,SEO优化,TDK三大标签,代码)后期逐步优化
品优购项目流程 SEO优化 SEO(Search Engine Optimization)汉译为搜索引擎优化,是一种利用搜索引擎的规则提高网站在有关搜索引擎内自然排名的方式. SEO 的目的是对网站进 ...
最新文章
- Nginx笔记总结八:ngx_http_core_module模块中的变量
- 写最少的代码,避免给自己找麻烦
- Java GC系列(1):Java垃圾回收简介
- 悬浮球不用权限_英山高效纤维球【多佳净水材料】
- 使用IntelliJ IDEA 前最好修改的配置
- [HDOJ5734]Acperience(数学,公式推导)
- 查看执行计划 oracle,查看Oracle执行计划的几种方法
- SAP中计划日历计算规则的理解
- 结合OPENCV SIFT代码浅谈Lowe的一些SIFT算法细节
- 你知道CDN是什么吗?本文带你搞明白CDN
- 微型计算机是啥课,微机课是什么意思
- 一学校出150名在校“老板”
- 三星32英寸智能电视试用 功用全部对得起高价
- Linux 下的分屏利器-tmux安装、原理及使用
- IBM创始人 托马斯·约翰·沃森父子
- 局域网视频通讯-Android APP
- 2019-2020-2 20175227张雪莹《网络对抗技术》 Exp1 PC平台逆向破解
- Mongo DB Codex Debug 代码-Python语言版-立哥开发
- 树莓派中基于Qt的图像显示image.[微雪电子树莓派Qt系列教程]
- zotero+坚果云实现同步
热门文章
- 环信的使用以及注意事项!
- 第15节 域之集中管理、统一管理
- java 9宫格抽奖_js 实现9宫格抽奖(react)
- i3 8100安装服务器系统,i38100安装win7纯净版的图文教程
- 什么是注意力机制及其应用(self attention)?
- 华为服务器型号大全rh2288h,华为服务器 RH2288H V3 12*3.5盘位 E5-2680 v4*2 16GB*8 6000G*3 R5 750W*2 4*GE.....
- ros建图过程中给上位机发布地图信息
- 声纹采集器和声纹数据库在公安领域的应用
- 小米手机显示崩溃日志
- CASIE: Extracting Cybersecurity Event Information from Text阅读总结