学会对VUE的SEO优化，你的网站总是排在前面

​在开始之前，我们先来了解一下什么是SEO。

SEO（Search Engine Optimization）：汉译为搜索引擎优化。是一种方式：利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位，获得品牌收益。很大程度上是网站经营者的一种商业行为，将自己或自己公司的排名前移。

说白了就是你的SEO做的越好，当别人搜索某个关键词时，你的网站在搜索结果中就排的越靠前。这是我的网站，有时排在第一，有时第二。

我的网站： www.dengzhanyong.com

公众号： 《前端筱园》

加入【前端筱园交流群】，与大家一起交流，共同进步！

普通的一个前端网站可以通过哪些地方来做优化呢？

1.合理的title、description、keywords

<title>邓占勇的博客</title>
<meta name="description" content='邓占勇，一名前端工程师，这是我的个人博客，主要分享前端但不限于前端技术。公众号《前端校园》'>
<meta name="keywords" content="个人博客,邓占勇,前端,技术,WEB,blog,BLOG,搭建博客,前端技术,VUE博客,邓占勇的博客">
<meta name="anthor" content="邓占勇,2657179843@qq.com">
<meta name="robots" content="博客,前端,blog,个人博客,邓占勇,Yong,邓占勇的博客,《前端校园》,公众号,web,VUE">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

title，description，keywords他们的权重逐渐减小。

• title 就是我们看到的网页标题
• description 为对该网页的简要描述
• keywords 的作用就是告诉搜索引擎，本网页中主要围绕着哪些方面的关键词展开

2.语义化的HTML代码，符合W3C规范

多使用语义化的HTML标签，什么叫语义化标签，说白了就是对号入座，不要什么地方都永远是div，span。HTML5中提供了很多语义化的标签，比如<header></header>,<footer></footer>,<nav></nav>,<aside></aside>,<section></section>等

3.非装饰性图片必须加alt

<img> 标签的 alt 属性指定了替代文本，用于在图像无法显示或者用户禁用图像显示时，代替图像显示在浏览器中的内容。对于非装饰性图片必须添加alt，非装饰性图片是指除了那些作为元素背景图的图片。

alt可以增强内容相关性，提高关键词密度

4友情链接

友链就是在你的网站和别人的网站上相互放上对方的网站超链接，通过点击链接可以调到对方的网站上。 友情链接是网站流量来源的根本，比如一种可以自动交换链接的友情链接网站（每来访一个IP，就会自动排到第一），这是一种创新的自助式友情链接互联网模式。

5.外链

外链就是指在别的网站导入自己网站的链接。导入链接对于网站优化来说是非常重要的一个过程。导入链接的质量（即导入链接所在页面的权重）间接影响了我们的网站在搜索引擎中的权重。

6.向各大搜索引擎提交收录自己的站点

搜索引擎收录了你的网站后，会很大程度上提升网站的排名。下面是常见搜索引擎的收录入口：

百度提交入口：https://ziyuan.baidu.com/linksubmit/url

Google提交入口：http://www.google.com/addurl/?hl=zh-CN&continue=/addurl

360提交入口：http://info.so.360.cn/site_submit.html

搜狗提交入口：http://fankui.help.sogou.com/index.php/web/web/index?type=1

必应提交入口：https://www.bing.com/toolbox/webmaster

7.重要的内容放在前面

搜索引擎抓取是自上而下进行的，把主要的关键性的内容放在前面，可以保证所抓取的内容更符合或代表网站的特征。

8.其他

• 少用iframe：iframe中的内容是不会被抓取到的
• 提高网站速度：这也是搜索引擎排序的一个重要指标
• 流量：访问你的网站的人越多，排名也会越靠前

如何对VUE进行SEO优化？

说了这么多SEO的优化方式，为什么还要把VUE的SEO优化提出来说呢。

这与VUE的本质相关，VUE是一个SPA应用，就是只有一个Web页面的应用，是加载单个HTML页面，并在用户与应用程序交互时动态更新该页面的Web应用程序。

为什么说VUE不利于SEO，SEO本质是一个服务器向另一个服务器发起请求，解析请求内容。但一般来说搜索引擎是不会去执行请求到的js的。也就是说，如果一个单页应用，html在服务器端还没有渲染部分数据数据，在浏览器才渲染出数据，而搜索引擎请求到的html是没有渲染数据的， 所以就很不利于内容被搜索引擎搜索到。 

现在主要采用的有以下四种方式：

• SSR服务器渲染；
• 静态化；
• 预渲染prerender-spa-plugin；
• 使用Phantomjs针对爬虫做处理。

1. SSR服务器渲染

服务端渲染就是尽量在服务器发送到浏览器前就将页面渲染到页面上。

Vue.js 是构建客户端应用程序的框架。默认情况下，可以在浏览器中输出 Vue 组件，进行生成 DOM 和操作 DOM。然而，也可以将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上完全可交互的应用程序。

服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"，因为应用程序的大部分代码都可以在服务器和客户端上运行。

详细操作可以见官网：Server-Side Rendering (SSR) | Vue.js

2. 静态化

这里用到的是Nuxt.js框架，官方是这样介绍的。从头搭建一个服务端渲染的应用是相当复杂的。幸运的是，我们有一个优秀的社区项目 Nuxt.js 让这一切变得非常简单。Nuxt 是一个基于 Vue 生态的更高层的框架，为开发服务端渲染的 Vue 应用提供了极其便利的开发体验。更酷的是，你甚至可以用它来做为静态站生成器。推荐尝试。

详细操作可以见官网：Nuxt - The Intuitive Vue Framework

3. 预渲染prerender-spa-plugin

如果你只是用来改善少数页面的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。

这里就详细的讲解下如何在VUE-CLI3的项目中使用prerender-spa-plugin。

安装

cnpm install prerender-spa-plugin --save

在VUE-CLI3的项目中调整 webpack 配置最简单的方式就是在 vue.config.js 中的 configureWebpack 选项提供一个对象。

官方文档：webpack 相关 | Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      new MyAwesomeWebpackPlugin()
    ]
  }
}

如果你需要基于环境有条件地配置行为，或者想要直接修改配置，那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内，你可以直接修改配置，或者返回一个将会被合并的对象：

// vue.config.js
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
    } else {
      // 为开发环境修改配置...
    }
  }
}

有了基础知识就来开始实践

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')
module.exports = {
    configureWebpack: config => {
        if (process.env.NODE_ENV !== 'production') return;
        return {
            plugins: [
                new PrerenderSPAPlugin({
                   //网页包的路径将应用程序输出到prerender
                    staticDir: path.join(__dirname,'dist'),
                    //Routes to render 对应自己router
                    routes: ['/', '/home','/blog','/aboutMe','/message'],
                    renderer: new Renderer({
                        inject: {
                            foo: 'bar'
                        },
                        //渲染时显示浏览器窗口。对调试有用。
                        headless: false,
                        // // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
            ],
        };
    }
}

在main.js中添加如下内容

new Vue({
  router,
  store,
  render: h => h(App),
  //这里与vue.config.js中的事件名相对应
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

最后有点一定要注意，router中必须是history模式。

好了，到这里就已经配置完了，只需要和传统的打包方式一样打包就可以，打包的过程中会看到浏览器自动打开许多页面然后自动关闭，这就是打包的过程。

npm run build

打开打包后的dist文件夹，会看到如传统的结构不一样，传统的只有以下内容

但是现在你看到的会比之前多几个文件夹，多的文件夹正是你配置的那几个路由，每个文件夹中都是一个index.html文件。原本只有一个index.html的单页应用现在变成了多页应用，这也就提升了你的网页被抓取的概率。

在本地打开打包后的index.html是看不到内容的，需要上传到服务器上才可以。

到这里我们还可以继续优化，虽然现在已经成了多个页面，但是每个页面的title，description，keywords都是一样的，这也往往不符合实际，毕竟每个页面都有自己的主题内容。

那么我们可以针对每个页面对他们的meta-info分别设置，这里可以使用vue-meta-info插件。

安装：

npm install vue-meta-info --save

引用，在main.js中

import MetaInfo from 'vue-meta-info'
Vue.use(MetaInfo)

在你需要的页面中使用

export default {
  metaInfo:{
    title: 'message',
    meta: [
      {
        name: 'description',
        content: '这是Message页面',
      },
      {
        name: 'keywords',
        content: 'message'
      }
    ]
  },
  data(){
    return {
    }
  },
}

可以看到页面的head的关键信息已经更改

当然你也可以写成函数的形式来动态修改

export default {
  metaInfo() {
    return {
      title: this.title,
      meta: [
        {
          name: "关键词",
          content: "关键字"
        }
      ]
    };
  },
  data() {
    return {
      title: "我是动态更新的标题"
    };
  },
};

4.使用Phantomjs针对爬虫做处理

Phantomjs是一个基于webkit内核的无头浏览器，即没有UI界面，即它就是一个浏览器，只是其内的点击、翻页等人为相关操作需要程序设计实现。

这个我也还没有去接触，等后面我去看懂了有机会再来讲讲。

源码在这里：GitHub - lengziyu/vue-seo-phantomjs: vue seo phantomjs方案

我的网站： www.dengzhanyong.com

公众号： 《前端筱园》

加入【前端筱园交流群】，与大家一起交流，共同进步！