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

1、简介

　　一、何为SEO？

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

　　二、目的

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

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

　　一、为何要进行HTML优化？

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

　　二、哪方面能够有效的达到欧优化效果？

　　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>

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

3、对单页面进行SEO优化

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

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

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

　　二、预渲染

　　如何你对少数的几个重要的页面进行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' ]
    )
  ]
}

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

　　三、动态添加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);

　　三、在组件内静态使用

<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>

　　四、若是你的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>

4、就给你们介绍到这里，谢谢。