SEO如何优化网页源代码、提升用户体验

通常网站上线前，需要对网站的代码和标签做必要的处理，目的是提高优化网站打开速度，强调想要达成排名的关键词。一个优质的网站，在代码方面是简洁干练的。在我们之前的文章中也提及了一些相关的标签网页代码优化技术。本文将略微详细的介绍SEO怎么优化代码与标签。在合适的地方使用权重标签，能向搜索引擎传递友好性，是做SEO的基本述求。

SEO不追求网页代码的功能，但一定要懂得代码的原理，追求代码的简洁与干练，毫不拖泥带水。挑剔的搜索引擎蜘蛛对于简洁的网站代码是情有独钟的，这就需要我们对网站代码进行精简及优化。蜘蛛是通过网站的代码简洁性来判断网页是否对于人来说是否是友好的，浏览者是否能获得良好的用户体验，简洁的网站通常不那么花里胡哨，没有那么多的广告，各种模块弹窗等。网页的精简说白了就是网站代码优化，去掉网站多余的代码，以减少网站的大小，提高网站的加载速度和用户体验。冗长无用的代码同样会让蜘蛛很难理解，增加蜘蛛抓取网站的难度，同时，网页的精简还关系到网站的加载速度，对用户体验至关重要。

我们先来看看对于网页代码的五个最重要的标签。
1.Title标签
Title 标签能够告诉用户和搜索引擎网页页面的主题思想是什么，一直是搜索引擎的抓取重点。通常，搜索引擎抓取Title标签出于两个目的：作为影响网页排名的重要因素和作为搜索结果页面的显示信息。不管是哪一个目的，对我们做SEO来说都非常重要。
一般来说，Title标签中的单词最好保持在3~6个左右，最好包含关键字。但Title标签中的单词不要全部都是关键字，因为这样可能会造成页面关键字堆砌，导致过度优化。所选单词应简洁明了、具有描述性，要与网页内容具有很大的相关性，并且每个不同的页面都应该包含Title标签。
2.Heading标签
Heading标签包含了H1、H2、H3等等，是搜索引擎识别页面信息的重要标记。合理使用H1、H2、H3等不同级别的标签能够使得页面结构更加清晰，有利于搜索引擎的抓取。H1、H2、H3等标签是按照重要程度来排名的。一般一个页面按照需求程度来适当添加该标签：从H1开始，依次往下添加。但不可添加太多Heading标签，否则会适得其反。
3.Strong和B标签
相信大多数朋友都知道Strong和B标签都有加粗的意思，但是很多人并不清楚两者具体有什么区别。其实B标签就是单纯地将文字加粗，而Strong标签不仅是对文字加粗，并且这种形式的加粗会告诉搜索引擎该部分文字比较重要。所以两者从搜索引擎优化的角度来看，是有很大的区别的。
上文中所提到的Heading标签页具有加粗效果，那么这三种标签到底该怎么用？其实，Heading标签一般用于文章大标题以及每段的小标题，而Strong标签一般用于文章段落中的重点词汇，而B标签一般只是强调一种视觉效果。
4.ALT标签
ALT标签是一种图片标签，它将图片的信息以文本的形式展现。对ALT标签的使用没有太多要求，只要在网页中出现图片的部分添加上该属性即可，但其标签内容应与相应页面内容具有相关性，长度不得过长，一般1~5个单词即可。
5.Meta Description标签
对Title标签优化之后，接下来就是对Meta Description标签的优化。Meta Description标签可以说是对Title标签的进一步解释，可以是一句话或者是包含十几个单词的短语。每个页面都该有其自己的Meta Description标签，并且Meta Description标签还可包含一些与网站内容相关但Title标签中未提及的信息。与Title标签要求相似，该部分内容也应具有描述性，与网页内容具有相关性，可包含关键字，但不可过多。

接下来我们来看看其他的一些网页标签，这些对于简洁网页源代码也同样至关重要。

1、HEAD部分代码规范化
HEAD部分代码是搜索引擎爬行网站的入口部分，现在很多网站的头部代码都相当统一化，刻板效应明显十足，这样的网站代码是像模板框架一样是不被spider喜欢的，而我们要做的就是将网站的代码规范化，建立起网站独一无二的head部分，让搜索引擎有新鲜感，这样才能够吸引spider爬行。

2、CSS代码本身的优化
CSS是页面效果呈现中非常重要的组成部分，它包括颜色、大小尺寸、背景和字体等。写CSS很简单很容易，但是要想写出精炼的CSS代码还是有很多技巧的。
（1）、CSS代码优化
通过对css代码属性的简写、移除多余的结构(frameworks)和重设(resets)等一系列的方法和技巧来简化css代码，减小css文件的大小。
（2）、css sprite技术
网站上的一些图片可以采用css sprite技术进行合并，减少加载请求次数，从而提高网页的加载速度。
（3）、尽量不要使用内嵌式CSS
内嵌式CSS分为两种，一是在head区域的普通内嵌式；二是在标签内出现的行内内嵌式CSS，无论是何种内嵌CSS方式结果都会提升页面的体积，对此，我们可以尽量使用外调式的CSS来为站点页面的体积瘦身。
（4）、CSS位置
CSS说明如果出现在网站之后，页面需要重新渲染，打开速度受到影响，所有css定义代码的位置要放到网站之前。

3、使用DIV+CSS分离布局网页
虽然现在div+css已经很成熟了，但是很多网页设计者可能考虑到网页的兼容性以及布局的简易性还是使用老式的table布局，虽然table布局很方便，但是其弊端也是显而易见的，那就是会大大增加网页的大小，尤其是多层表格的嵌套，这种布局不仅会提升体积，同时如果嵌套数太多的话就会影响到搜索引擎的爬行，影响到站点的收录。

4、JS位置，大小等负面的优化
JS优化与其他语言的优化也仍然有相同之处，JS优化的关键，仍然是要把精力放在最关键的地方，也就是瓶颈上，一般来说，瓶颈总是出现在大规模循环的地方，这倒不是说循环本身有性能问题，而是循环会迅速放大可能存在的性能问题。

（1）、合并JS
合并相同域名下的js，通过减少网络连接次数从而提高网页的打开速度。
（2）、JS位置
网页代码中对js进行优化的时候，杭州seo建议将JS放在页面最后，这样可以加快页面打开速度。
（3）、JS代码外部的调用
我们知道当前的搜索引擎还是不能够识别JS代码的，倘若在网站中出现大批量的js代码网站在收录上就会出现困难，而我们要做的就是将用到Javascript代码用外部调用的形式放在网站中，这样可以简化搜索引擎的工作，也不会在无形中衍生出无效代码累及网站。
不仅如此，杭州seo觉得可以采用外部调用的还有css代码，建站之初可以将网站的文字、颜色定义在css代码文件中，尽量不要在页面代码内出现过多的样式代码。
（4）、LazyLoad(延迟加载)技术
Lazy Load是一个用JavaScript编写的jQuery插件，它可以延迟加载长页面中的图片，在浏览器可视区域外的图片不会被载入，直到用户将页面滚动到它们所在的位置。

5、网页压缩技术
对于网页压缩而言，相信各位站长都比较熟悉，主要是启用服务器Gzip，对页面Gzip压缩，减少元素的体积，从而减少数据的传输，进而提高网页的加载速度，这个功能需要你的服务器的支持，GZIP压缩一般能对网页进行30%-80%的压缩，是最重要的一种优化效果。
总之，通过代码优化来起到网站优化作用的方式还有很多，在这只是随意的说了其中比较常见的而已，希望大家能多多钻研。

6、减少TABLE标签的使用
table标签是现在大多数上线网站中最为常见的代码形式，原因根本在于table在建立网站时比较快捷，但是这也就影响了网站的后期优化。
相对于div+css布局的精简代码网站来说，它的占位比较大，所以，在建站时候，尽量是少用表格，即便是要使用表格时，嵌套式表格也要尽量少用，以免产生冗杂代码。
那么，现在的网站用什么做呢？很多程序员第一想法就是采用CSS去做，采用CSS去排版，这种做法呢，就使页面中的表格大大的降低了，但在杭州seo看来，网站也不能没有表格，有些事必须使用到得，使用表格本身没什么，但是有很多网站都采用嵌套表格，一般这样的表格形式会给网站产生大量的垃圾代码，并且这些垃圾代码都是没有任何用处的代码，这一类代码也是我们网站需要精简的代码之一。

7、将html控制方式转换为CSS控制
很多网页设计者习惯在标签内对内容进行控制，比如img标签里通过width和height来控制图片的大小，尽量将这些代码转换成外调式的CSS，使网页代码更加的瘦身。

8、代码注释省略的少量使用
很多程序人员在编写代码是都习惯在别人看不懂的地方给出一段注释，这些代码往往是为了几个程序员之间的协同工作，对于外人以及搜索引擎来说没有任何用处，相反还会给搜索引擎蜘蛛带来一定的困扰。
打开页面代码我们经常会看到一些注释代码，这是程序员为了表明代码意义而做的注释，其实这些打开不必，因为对于搜索引擎而言，它们是不存在任何意义的，只是会增加了页面代码的容量，这样对于网站不会有什么利处，不如直接省略。

9、缓存静态资源
通过设置浏览器缓存，将css、js等不太经常更新的文件缓存在浏览器端，这样同一访客再次访问你的网站的时候，浏览器就可以从浏览器的缓存中获取css、js等，而不必每次都从你的服务器读取，这样在一定程度上加快了网站的打开速度，又可以节约你的服务器流量。

10、权重标签的使用
典型的权重标签有H1，strong，b标签等，对想参与排名的重要关键词使用权重标签，好处是向搜索引擎传递信号：这个地方的关键词很重要，需要区别对待，从而提升既定关键词在搜索引擎的排序。

11、清除页面中多余的代码即精简代码
有的网站以为制作者的代码书写习惯问题，页面会有很多空格代码，比如：空格代码、style和font重复定义的代码，不要小看这些体积很小的代码，积攒多了，也会使我们的网站异常的臃肿。
很多网站都是采用的DIV+CSS，在CSS中定义了文字的字体，颜色，以及页面的排版，但是在网站的其他地方还用了以style以及font来再次定义字体字体，这些代码完全没有必要重复定义，属于可以精简的代码。