SEO页面优化以及如何对单页面应用进行SEO优化

一、简介

　　1、何为SEO？

　　SEO（search engine optimization），翻译为搜索引擎优化，是利用搜索引擎的搜索规则来提高在相关搜索引擎的排名以及访问量的方式。

　　2、目的

　　为了获取更多的流量、排名以及点击率从而实现品牌的推广以及营销，提高影响力。

二、如何在HTML进行代码优化

　　1、为什么要进行HTML优化？

　　我们做SEO，最直接的目的就是想通过搜索引擎获得好的关键词排名和流量，而搜索引擎工作又是依赖它们的“蜘蛛”程序进行的。所谓搜索引擎蜘蛛只是搜索引擎开发的“机器人”程序，简单来说，它的工作原理就是通过对网站的爬行，抓取网站的相关链接、关键词、内容，然后分配网站的权重和相应的搜索引擎排名。而这个过程，大部分工作都是在网站的HTML代码上进行的。所以，通过HTML优化，可以告诉蜘蛛哪些内容是重要的，哪些内容又是可以忽略的，以达到最佳的SEO效果。下边就开始实际分析。

　　2、哪方面可以有效的达到欧优化效果？

　　1）title 以及meta的使用。

　　这里我把title跟meta放在第一位，说明这是非常重要的部分。

　　<title>网站标题</title>

　　<meta name="description" content="网站描述" />

　　<meta name="keywords" content="网站关键词" />

　　在网站的标题以及meta属性上写到需要加强的关键词，这样会加大搜索几率，虽然近些年来很多搜索引擎对网站关键字等没有那么重视，但是写上总比不写的好。

　　2）H标签的使用。

　　关于H标签的使用也有讲究。对于一个页面来说，H1标签应该是非常重要的，只能出现一次，里边放主要的标题信息，权重最高，对蜘蛛的吸引力也是最强的。其他的H2到H6这些副标题强调的作用也就相应减少，用的次数没有要求。

　　3）a标签的使用

　　<a href="链接地址" title="链接说明">链接关键词</a>

　　站内丰富的超链接会方便蜘蛛爬行，体现网站的深度和广度，这点在SEO中至关重要。“链接地址”特别是栏目的链接地址，最佳的出现形式应该是http://你的域名/固定链接/。现在，链接的理想结构是以“/”结尾。“链接说明”，一般都是链接的关键词或是关键词相关说明文字，这点可能很多人容易忽视，建议还是写好链接说明，尤其是做外部链接的时候，这么做效果还是很不错的，对网站关键词的搜索引擎排名很有帮助。

　　注意：如何是一些单页面网站用的是路由跳转，可以在a标签里href放全路径，然后padding-left:-99999px;或者absolute 把这标签扔到页面的外边不被看到就可以，但是可以被搜索到。

　　4）图片img标签的使用

　　<img src="图片链接地址" alt="图片说明" />

　　图片说明比较重要，肯定得加上，这样就可以方便搜索引擎知道这张的图片的内容，方便搜索跟排名。

　　5）strong标签的使用

　　很多人多这个标签不感冒，觉得没有什么用，其实这标签是非常重要的，标签顾名思义是强调的意思，在里边放一些关键字将会起到很重要的效果。

　　6）文章底部版权信息的添加。

　　<div id="copyright">版权部分已经网站名称等信息</div>

　　网站底部版权部分的权重越来越高了，在版权部分加上网站名称和链接或是强调一些关键词是很有必要的。

三、对单页面进行SEO优化

　　单页面应用目前在市场如火如荼，三大框架angular，react，vue的使用越来越受欢迎，虽然使得开发效率提高了，但是也存在某些不足的地方，比如SEO问题，这个问题就需要去解决。

　　1、使用服务器端渲染（SSR）

　　vue针对SEO的问题已经出了官方SSR文档来专门解决这个问题。https://ssr.vuejs.org/zh/。当然用服务器渲染对于前端后端来说都是个挑战，无论从技术还是写法上都有很大的难度，对于前后端分离的项目而言，实现起来更加困难。有兴趣可以看下官方文档，这里将不做介绍，因为我也没研究过SSR哈哈。下面将介绍另外一种方式。

　　2、预渲染

　　如何你对少数的几个重要的页面进行SEO优化，预渲染将是个非常重要的操作。预渲染可以在build时对指定的路由生产静态HTML文件。使用 prerender-spa-plugin配置就可以实现预渲染。

// webpack.conf.js
var path = require('path')
var PrerenderSpaPlugin = require('prerender-spa-plugin')

module.exports = {
  // ...
  plugins: [
    new PrerenderSpaPlugin(
      // 编译后的html需要存放的路径
      path.join(__dirname, '../dist'),
      // 列出哪些路由需要预渲染
      [ '/', '/about', '/contact' ]
    )
  ]
}

渲染出来的目录像这样子：

　　3、动态添加meta信息

　　有时候我们需要在应用添加一些meta信息来写一些关键字已经描述等，这时候需要到插件vue-meta-info了，这个插件可以动态设置meta的信息。

　　1.安装

　　npm install vue-meta-info --save

　　2.全局使用vue-meta-info

　　在main.js里

　　import Vue from 'vue'

　　import MetaInfo from 'vue-meta-info'

　　Vue.use(MetaInfo);

　　3、在组件内静态使用

<template>
  ...
</template>

<script>
  export default {
    metaInfo: {
      title: 'My Example App', // set a title
      meta: [{                 // set meta
        name: 'keyWords',
        content: 'My Example App'
      }]
      link: [{                 // set link
        rel: 'asstes',
        href: 'https://assets-cdn.github.com/'
      }]
    }
  }
</script>

　　4、如果你的title或者meta是异步加载的，那么你可能需要这样使用：

<template>
  ...
</template>

<script>
  export default {
    name: 'async',
    metaInfo () {
      return {
        title: this.pageName
      }
    },
    data () {
      return {
        pageName: 'loading'
      }
    },
    mounted () {
      setTimeout(() => {
        this.pageName = 'async'
      }, 2000)
    }
  }
</script>

四、就给大家介绍到这里，谢谢。