Vue的SEO问题

1. SEO是什么

SEO（Search Engine Optimization）搜索引擎优化搜索引擎爬虫的基本原理就是 1. 抓取url 2. 获取HTML源码并解析对网站进行 1. 站内优化和修复 2. 站外优化从而提高网站的网站关键词排名以及公司产品的曝光度

2. Vue为什么会出现SEO的问题

Vue 是单页面应用，爬虫只能爬取到html页面的内容，无法爬取到js脚本里面的内容。单页面应用是通过js脚本改变页面的内容，并没有进行http的请求，爬虫爬取不到，就会造成SEO较差

前端渲染 PK 后端渲染

后端渲染： PHP、Java、Python 的渲染机制同构渲染：前后端共用JS，介于前后端中的共有部分前端渲染：JS来渲染页面大部分内容 ==》SPA单页面应用 Vue就是JS框架，最大的特点就是单页面应用【不是每次通过url请求服务器，再通过浏览器渲染出页面，而是在首屏显示出内容之后，直接通过js动态修改页面的内容】

前端渲染遇到的问题 -- SEO 和首屏问题

3. 如何解决Vue的SEO

既然在第二节已经提到了，前端渲染会出现两个问题：SEO和首屏问题，所以直接将两个问题一起解决掉

SEO的解决方案

1. 预渲染

zhuanlan.zhihu.com/p/29148760 改善少量营销页面 == prerender-spa-plugin 结合 vue-meta-info==

2. SSR

cn.vuejs.org/v2/guide/ss…

什么是服务器渲染

SEO对网站十分重要
页面是异步获取内容时

将一个组件渲染为服务器端的html字符串，将他们直接发送到浏览器，最后将这些静态标记“激活”为客户端完全可交互的应用程序 ==组件渲染，服务器端HTML，发送到浏览器，静态标记==

使用服务器渲染的好处

==>解决单页面应用的SEO问题

SEO
对==同步==JS应用程序进行索取抓取工具并不会等待异步完成后再抓取内容

怎么使用服务器渲染

==> node.js后端使用了nuxt.js 进行服务器渲染

nuxt.js

webpack等配置全部封装好了
无需node知识
方便可用安装 -》写组件 -》编译并启动服务 -》看效果
安装

3. 路由采用h5 history模式

-- h5 的 history模式是vue-router的一种。因此直接看 vue-router

Vue - SEO