vue SEO的解决方案

vue SEO的解决方案

什么是 SEO

搜索引擎优化，提高网站的搜索关键词排名以及公司产品的曝光度。

搜索引擎的原理

1. 从 meta 标签中读取 keywords、description 的内容
2. 从HTML标签爬取和分析内容（h1-h6、strong、em等标签）
3. 读取a标签里的链接，通过a标签的链接再跳转到别的网站（深度优先：先跳转回头再爬取；广度优先：先爬取然后再依次跳转）

SEO需要什么？

1. 多页面
2. 需要动态改变网页的 title、描述、关键字
3. 网站内容

注意： 这里网站内容从哪里来是一个关键点，如果页面的数据是通过请求来的，在页面加载的时候是先有DOM结构，然后才有数据，也就是说此时的网站内容，是无法被蜘蛛抓取的，所以会导致无法被百度收录。

SEO 为什么对于单页面应用不友好

1. vue是通过js控制路由，然后渲染出对应页面，因此所有隐藏在js中的跳转或者数据都获取不到，蜘蛛抓取中不会执行js，导致搜索引擎只能收录 index.html，而无法搜到其相关的子页面的内容。
2. 浏览器加载页面时，首先会对页面进行渲染（dom生成、css构建、javascript解析、布局、绘制），当解析到js的时候，才会去触发vue的渲染，将元素挂载到id为app的div上，这时候我们才能看到页面的内容。因此被搜索引擎收录的index页面，可能也毫无价值，因为没有任何数据。

导致的问题

1. 单页面应用无法被SEO
2. 无法动态改变网页的TDK（ title、描述、关键字），每个页面的title和meta标签都是一样的，不利于蜘蛛爬取。

vue seo解方案

当然为了seo性能好一般会采用前后端不分离，优点在于非常利于seo，因为不用暴露接口，所以安全系数高。缺点即压力全在服务器端导致服务器负载大。

1. 预渲染 prerender-spa-plugin
2. 服务端渲染 ： Nuxt.js

方案一、 prerender-spa-plugin

预渲染也称客户端渲染 ，就是在页面加载之前把数据放在页面中，如果是vue文件，我们希望在打包时生成多个页面，这时候我们可以使用 prerender-spa-plugin插件。

存在问题：

1. 动态路由解决不了 【比如详情页】
2. 无法动态改变title、描述、关键字。

适用场景: 比如公司官网，只适合某几个页面需要做seo。

使用：

一、安装插件

cnpm install --save prerender-spa-plugin   解决打包多个页面
cnpm install --save vue-meta-info          设置title、描述、关键字，解决SEO的问题

配置 vue.config.js：

const path = require('path');
const PrerenderSPAPlugin = require('prerender-spa-plugin');

module.exports = {
  publicPath: './',
  configureWebpack: {
    plugins: [
      new PrerenderSPAPlugin({
        staticDir: path.join(__dirname, 'dist'),
        routes: [  // 需要预渲染的路由地址(需要打包成几个页面就配置几个路由)
          '/',
          '/about',
          '/contact',
        ],
      }),
    ],
  },
};

在组件中使用 vue-meta-info ：

<template>
  <h2>Home Page</h2>
</template>


<script>
  export default {
    metaInfo: {
      title: 'aaaaaaa商城', // set a title
      meta: [{                 // set meta
        name: '关键字,web前端',
        content: '描述。。。。。。。。。'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script> 

注意：这里的 metaInfo 不能使用组件中的data数据(由api接口请求回来的动态数据)，必须手写，前端自测时需要把路由模式设置为 hash。

方案二、服务端渲染 ： Nuxt.js

优点：

1. 纯静态文件，访问速度更快
2. 对比SSR，不涉及到服务器负载方面的问题
3. 静态网页不易遭受黑客攻击，安全性更高

存在问题：

1. 如果动态路由参数多的话不适用
2. Nuxt.js 执行generate静态化打包时，动态路由会被忽略
3. 打开网站都效率慢，压力全在服务器，和前后端不分离差不多了

​ 适用场景：整个网站都做 seo

使用：

前端自测

npm run build 
npm run generate

注意： 仅用于前端自测试，这个时候不能把打包的文件给后端。

项目打包上线

一、运行打包命令

npm run build 

二、移动文件

.nuxt、static、nuxt.config.js、package.json

把上面的文件给后端，让他放在服务器上 (***）

三、后端安装在服务器安装 Node.js 环境后启动打包的项目

npm run start

注意： 因为Nuxt.js默认走的端口是： http://localhost:3000/ ，但是我们需要指向到自己的域名，所以后端需要配置默认端口。