代码优化是对页面中HTML源代码进行必要的调整,从而提高页面的友好性。代码优化的主要工作包括精简代码、头部有话和权重标签。
1. 精简代码
精简代码是简化页面中的代码,从而降低页面的体积、提高用户体验和对搜索引擎的友好性。页面的代码优化主要包括:清理垃圾代码、HTML标签转换、CSS优化、JavaScript优化和表格优化。
A. 清理垃圾代码
垃圾代码是指去掉之后不会影响页面正常显示的非必要代码。常见的垃圾代码主要有空格、默认属性、注释语句和空语句。
a. 空格:这里的空格指的是在键盘上敲击空格键时输入的空格,而不是” ”,初步统计空格字符占页面总体积的1.5%左右,主要出现空格的地方有每行开始代码前面的空格、每行结束之后的空格、空白行。
b. 默认属性:在使用网页制作软件是,一般会生成一些默认属性的代码例如align=”left” Font=”#000000”等,这些属性都是不必要的。
c. 注释语句:注释语句可以提高代码的可读性,它对于普通的用户来说是不可见的,但是过多的注释语句会占用大量的存储空间,而且在注释标签里包含大量的关键字的话会导致搜索引擎认为这是关键字堆砌,导致搜索引擎对网站的惩罚。
d. 空语句:空语句是指标签之间没有包含任何内容的语句。现在有一些方便的工具给我们使用来清理垃圾代码。例如AdvancedHTML Optimizer,他可以删除代码中多余的标签,还能把长标签转换为短标签,但是这个工具会把所有的换行符也去掉,导致代码的可读性很差。
B. HTML标签转换
使用短的标签来替换长的标签,例如:
表1
效果 |
长标签 |
短标签 |
加粗 |
|
|
斜体 |
|
|
删除线 |
|
|
缩进 |
|
|
C. CSS优化
CSS是的网页的显示方式与文档的结构彻底分离,避免了单独使用HTML标签引起的混乱,提高了代码的可读性。但是有些搜索引擎并不能识别CSS中的相关内容。CSS的调用最好采用外部调用的方式。
在页面中重要的内容使用加粗、斜体、下划线、不同颜色等方式呈现出来,更能够提高页面的相关性。
D. 表格(table)优化
当浏览器的编译器遇到一个开始标签时,就会去寻找与之匹配的结束标签,直到匹配才会在浏览器中显示该标签中的内容。因此,如果表格中包含多次的嵌套时将会导致网页的打开速度很慢,从而严重影响用户体验。例如如果一个table中嵌套了5个二级table,而且每个二级table中包含50k的内容,那么只有当这250k的内容全部全部被读出来之后才会显示整个页面。所以可以将这些嵌套的表格独立开来,这样上述5个table就可以逐步显示出来。
2. 页面头部优化
在HTML中位于
A. 摘要信息
摘要信息主要包括页面标题以及页面描述。一般搜索引擎会将页面的标签作为摘要信息的标题,描述标签中的内容作为页面描述。从而我们就需要关注页面中标题标签和描述标签的内容。
B. 标题(title)标签
标题标签是对网页主题内容的一个概括,大多数的搜索引擎都是摘取页面的标题标签中的内容作为搜索结果中摘要信息的标题向用户展示的。一般情况下,标题长度不要超过56B(百度)、70B(谷歌),超过这个范围的内容将会被省略。对于百度而言可以使28个中文或者56个英文字符,对于谷歌而言是35个中文或者70个英文字符。
标题的最前面最好写与网页直接相关的信息,而不是公司名称或者其他,当然如果公司名称是想要优化的对象时,就需要将公司名称写在最前面。;例如:
C. 描述(Description)标签
该标签是对页面内容的概括,相当于是一个页面简介。搜索引擎对描述标签的长度和关键字词频也有一定的要求。归于google而言一般只截取225B(112个汉字)的字符,超出这个范围的将会被省略。同时主关键字出现的频率在5次以内,每个辅关键字只出现一次。
3. 权重标签的使用
权重标签是指会影响到页面权重或者相关性的HTML标签。常见的权重标签有标题标签(
4. 图片优化
图片虽然可以给使用者带来视觉上的冲击,但是由于现阶段的搜索引擎并不能识别图片上的内容,所以,图片对于搜索引擎来说并不友好。对于图片的优化主要包括图片的描述和图片的压缩。
A. 图片描述
在图片命名的时候最好采用与内容相关的关键字作为图片的名字。同时在HTML中使用alt标签来对图片进行描述,这样当图片不能够显示出来的时候用户也能够通过该描述来知道这个区域的内容。同时图片周围的内容最好包括对该图片的一些描述,这样对搜索引擎更加友好。
B. 图片压缩
图片压缩之后可以减低图片的体积,加快页面显示的速度,这对搜索引擎或者用户都更加友好。如果一幅图片的色彩比较丰富,则可以使用jpg格式的图片;如果色彩比较单调,则最好使用gif格式的图片,这样可以节省更大的空间。