二、如何在HTML进行代码优化
1、为什么要进行HTML优化？
我们做SEO，最直接的目的就是想通过搜索引擎获得好的关键词排名和流量，而搜索引擎工作又是依赖它们的“蜘蛛”程序进行的。所谓搜索引擎蜘蛛只是搜索引擎开发的“机器人”程序，简单来说，它的工作原理就是通过对网站的爬行，抓取网站的相关链接、关键词、内容，然后分配网站的权重和相应的搜索引擎排名。而这个过程，大部分工作都是在网站的HTML代码上进行的。所以，通过HTML优化，可以告诉蜘蛛哪些内容是重要的，哪些内容又是可以忽略的，以达到最佳的SEO效果。下边就开始实际分析。
2、哪方面可以有效的达到欧优化效果？
1）title 以及meta的使用。
这里我把title跟meta放在第一位，说明这是非常重要的部分。
<title>网站标题</title>
<meta content="网站描述" />
<meta content="网站关键词" />
在网站的标题以及meta属性上写到需要加强的关键词，这样会加大搜索几率，虽然近些年来很多搜索引擎对网站关键字等没有那么重视，但是写上总比不写的好。
2）H标签的使用。
关于H标签的使用也有讲究。对于一个页面来说，H1标签应该是非常重要的，只能出现一次，里边放主要的标题信息，权重最高，对蜘蛛的吸引力也是最强的。其他的H2到H6这些副标题强调的作用也就相应减少，用的次数没有要求。
3）a标签的使用
<a href="http://www.likecs.com/链接地址" title="链接说明">链接关键词</a>
站内丰富的超链接会方便蜘蛛爬行，体现网站的深度和广度，这点在SEO中至关重要。“链接地址”特别是栏目的链接地址，最佳的出现形式应该是你的域名/固定链接/。现在，链接的理想结构是以“/”结尾。“链接说明”，一般都是链接的关键词或是关键词相关说明文字，这点可能很多人容易忽视，建议还是写好链接说明，尤其是做外部链接的时候，这么做效果还是很不错的，对网站关键词的搜索引擎排名很有帮助。
注意：如何是一些单页面网站用的是路由跳转，可以在a标签里href放全路径，然后padding-left:-99999px;或者absolute 把这标签扔到页面的外边不被看到就可以，但是可以被搜索到。
4）图片img标签的使用
<img src="http://www.likecs.com/图片链接地址" alt="图片说明" />
图片说明比较重要，肯定得加上，这样就可以方便搜索引擎知道这张的图片的内容，方便搜索跟排名。
5）strong标签的使用
很多人多这个标签不感冒，觉得没有什么用，其实这标签是非常重要的，标签顾名思义是强调的意思，在里边放一些关键字将会起到很重要的效果。
6）文章底部版权信息的添加。
<div>版权部分已经网站名称等信息</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'), // 列出哪些路由需要预渲染 [ 'http://www.likecs.com/', '/about', '/contact' ] ) ] }