前端面试题Vue 项目如何进行 SEO 优化
本文部分内容参考官方文档
Vue SPA单页面应用对SEO不太友好，当然也有相应的解决方案，下面列出几种SEO方案
SSR服务器渲染
服务端渲染, 在服务端html页面节点, 已经解析创建完了, 浏览器直接拿到的是解析完成的页面解构
关于服务器渲染：Vue官网介绍 ，对Vue版本有要求，对服务器也有一定要求，需要支持nodejs环境。
优势: 更好的 SEO，由于搜索引擎爬虫抓取工具可以直接查看完全渲染的页面
缺点: 服务器nodejs环境的要求, 且对原代码的改造成本高!
nuxt.js坑比较多, 做好踩坑的准备静态化 (博客, 介绍性官网)
Nuxt.js 可以进行 generate 静态化打包, 缺点: 动态路由会被忽略。
/users/:id优势：
编译打包时, 就会帮你处理, 纯静态文件，访问速度超快；
对比SSR，不涉及到服务器负载方面问题；
静态网页不宜遭到黑客攻击，安全性更高。
不足：
如果动态路由参数多的话不适用。
预渲染 prerender-spa-plugin (插件)
如果你只是对少数页面需要做SEO处理（例如 / 首页, /about 关于等页面）
预渲染是一个非常好的方式, 预渲染会在构建时, 简单的针对特定路由, 生成静态 HTML 文件 (打包时可以帮你解析静态化)
优势: 设置预渲染简单, 对代码的改动小
缺点: 只适合于做少数页面进行SEO的情况, 如果页面几百上千, 就不推荐了 (会打包很慢)
使用Phantomjs
针对爬虫做处理Phantomjs是一个基于webkit内核的无头浏览器，没有UI界面，就是一个浏览器，
其内的点击、翻页等人为相关操作需要程序设计实现。
这种解决方案其实是一种旁路机制，原理就是通过Nginx配置， 判断访问的来源UA是否是爬虫访问，
如果是则将搜索引擎的爬虫请求转发到一个node server，再通过PhantomJS来解析完整的HTML，返回给爬虫
总结:
如果构建大型网站，如商城类 => SSR服务器渲染
如果只是正常公司官网, 博客网站等 => 预渲染/静态化/Phantomjs 都比较方便
如果是已用SPA开发完成的项目进行SEO优化，而且部署环境支持node服务器，使用 Phantomjs
前端面试题Vue 项目如何进行 SEO 优化相关推荐
- 每日三道前端面试题--vue 第四弹
每日三道前端面试题--vue 第四弹 什么是vue的计算属性? 官方定义: 计算属性和侦听属性有什么区别?怎样选择? 两者之间的对比 两者之间的区别 两者之间怎样选择 总结 简述axios的安装和引入 ...
- 每日三道前端面试题--vue 第五弹
每日三道前端面试题--vue 第五弹 DOM 渲染在哪个周期中就已经完成? 说明Vue父组件向子组件传值的方法(代码或文字描述均可)? 请列举axios的配置项及含义(五条)? DOM 渲染在哪个周期 ...
- 每日三道前端面试题--vue 第三弹
每日三道前端面试题--vue 第三弹 Vue常见的指令有哪些? Vue的生命周期函数有哪些?(中文及英文)? vue2.0生命周期 vue3.0生命周期 vue怎样自定义指令? 自定义指令 全局注册 ...
- 每日三道前端面试题--vue 第二弹
每日三道前端面试题--vue 第二弹 简述框架和函数库的区别? 1. 库(Library) , 代表 : jquery 2. 框架 (Framework), 代表:vue 3. 主要区别 : 控制反转 ...
- 每日三道前端面试题--vue 第一弹
每日三道面试题--vue 第一弹 1.对vue渐进式框架的理解 2.v-if 和v-show的区别 3.MVC.MVP和MVVM的区别 一.MVC 1.视图(View):用户界面. 2.控制器(Con ...
- 前端面试题——VUE
VUE面试题 1.v-show 和 v-if的区别,v-show 和 keep-alive 的区别 答案:v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁,而不 ...
- 看到一个不错的前端面试题开源项目
来源 | https://github.com/Wscats/articles 最近在整理 JavaScript 的时候发现遇到了很多面试中常见的面试题,本文主要是在 Github 等各大论坛收录的 ...
- 前端面试题--vue
文章目录 1. vue 生命周期 2. VUE 中 computed 和 watch 的区别是什么? 3. 动态绑定 类名和样式 4. v-if 与 v-show 的区别 5. v-for 列表渲染 ...
- Vue 项目如何进行 SEO 优化
目录 1.前言 2.SSR服务器渲染 3.静态化 (博客, 介绍性官网) 4.预渲染 prerender-spa-plugin (插件) 5.使用Phantomjs 针对爬虫 做处理 总结: 1.前言 ...
最新文章
- debian 7上安装svn
- 用ASP实现隐藏链接方法
- 重启iis提示不支持此接口的解决方案
- 由浅到深讲解C#-LINQ
- Boost：使用行列式函数和transform（）算法计算许多4x4矩阵的行列式
- mysql 5.6 binlog组提交
- SQLServer中的死锁的介绍
- Ubuntu连接SSHHow to: Connect SSH, SFTP and FTP Servers using Nautilus ubuntu 13.04
- java仔_Java基础语法吐血整理
- 2.企业安全建设入门(基于开源软件打造企业网络安全) --- 业务网纵深防御体系建设
- 大数据时代下的Scrapy爬虫框架
- 这5个免费音效素材网站，你一定要收藏好~
- 函数模板和类模板详解
- 电子科技大学人工智能期末复习笔记（四）：概率与贝叶斯网络
- hdu3397 线段树
- 罗克韦尔Rockwell Automation EDI 项目
- 计算机放音乐声音小在吗调,功放声音很小是什么原因，该怎么调？
- 斐波那契（Fibonacci，意大利数学家，1170年-1240年）数列，又称黄金分割数列，指的是这样一个数列：0、1、1、2、3、5、8、13、21、……。这个数列从第三项开始，每一项都等于前两项之
- mysql配置修改_mysql配置修改
- dell 双系统 ubuntu20.04