百度SEO代码优化操作指南

     一、什么是SEO代码优化?

seo代码优化就是根据WEB2.0、HTML5等主流网页设计代码标准的前提下，对网页代码进行合理的SEO代码优化，使之更加符合搜索引擎优化指南2.0要求的高效SEO代码规范，同时也要保证SEO代码优化后各种网站功能的正常实现，最大限度的提升用户体验。

　　二、如何做好SEO代码优化?

在网站优化过程中，大多数站长都在忙着每天更新内容，发发网站外链，很少有人在意网站的SEO代码优化,搜索引擎不仅喜欢外链，他也喜欢优秀的网站设计代码。那么什么样的代码算得上是优秀呢?简单而言，就是让蜘蛛在来到你的网站时，能很轻松的读懂你的网站。

接触到不少的SEOER一听到说优化代码，就完全不懂了，其实代码是SEO优化一个重要部分，不然发个外链、写个文章，那么是个人基本都能够做到的，为了跟上SEO的步伐，学代码是SEOER必需经过的一段路程!很多SEO学习者为了提高蜘蛛的亲和力，界面上很多东西都乱乱的，毫无章法，虽然这样的站也许会暂时的让蜘蛛喜欢，但是时间一定不会长久的。以用户为中心的设计，这一点是非常重要的，想象一下，蜘蛛每天都会来到你的网站，每天都会感受到你刻意为他打造的环境，时间长了，更新频繁了，就会引起人工注意，当搜索引擎的工作人员打开你的站，看到的是很不舒服的布局，降权就成为必然了。

　　三、SEO代码优化操作指南

首先在做网站seo代码优化，要已经做过域名分析，空间分析，搜索引擎分析，竞争对手分析，关键词分析，在全部进行数据分析的的基础上进行的seo代码优化，一定要做到：知己知彼百战不殆!

1、清除垃圾代码(代码优化)：

空格字符是网页中最常见的垃圾代码，空格常常出现在每行代码的开始和结束，还有就是空行。

(1)每行代码开始处出现的空格字符；

(2)每行代码结束处的空格字符；

(3)空白行，在编写代码时常利⺌用空行或者注释对不同的模板功能进行分隔这样就产生了空白行；

清除空白行可以有以下的方法：

(1)把代码转至html代码编辑模式；

(2)按 ctrl+A全选代码；

(3)使用组合键；

shift+Tab 删除；

默认属性：

例如网页中的内容常以左对齐显示，所以此时再用左对齐属性有些多余了；

常见的默认属性有以下几个：

align=”left” 横向左对齐 valign=”middle”竖向居中对齐 size=”3″ 文字大小属性值 默认情况下是3号；

bgcolor=”#ffffff” 背景默认属性为白色；

对于这些代码，可以利⺌用Dreamwea⺌ver 的替换功能把他们替换成空白就可以了；

注释语句：

过多的注释语句不仅会占用大量的网页存储空间，而且还会稀释关键字的密度；

长标签替换成短标签；

比如，<b>和<strong>和都是对字体加粗，起到的作用是一样的，但是比多5个字符；

网页中多种不同的标签可以实现同样的效果但是为了网页的精简可以才要短标签，网页中常见的有以下几种

加粗 <strong> 对应<b>

斜体 <em> 对应<i>

删除线 <strike> 对应<s>

缩进 <blockquote>对应 <ul>

2、CSS等脚本优化(脚本优化)：

CSS学起来并不难，但在大型项目中，一个团队中不同的人在书写CSS风格上也有不同，这样一个项目就变得难以管理，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：

步骤/方法

1. 使用Reset但并非全局Reset

不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

*{margin:0;padding:0;}

这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUI Reset和Eric Meyer的做法。

/** 清除内外边距 **/

body, h1, h2, h3, h4, h5, h6, hr, p,

blockquote, /* structural elements 结构元素 */

dl, dt, dd, ul, ol, li, /* list elements 列表元素 */

pre, /* text formatting elements 文本格式元素 */

form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */

th, td, /* table elements 表格元素 */

img/* img elements 图片元素 */{

border:medium none;

margin: 0;

padding: 0;

}

/** 设置默认字体 **/

body,button, input, select, textarea {

font: 12px/1.5 ‘宋体’,tahoma, Srial, helvetica, sans-serif; }

h1, h2, h3, h4, h5, h6 { font-size: 100%; }

em{font-style:normal;}

/** 重置列表元素 **/

ul, ol { list-style: none; }

/** 重置超链接元素 **/

a { text-decoration: none; color:#333;}

a:hover { text-decoration: underline; color:#F40; }

/** 重置图片元素 **/

img{ border:0px;}

/** 重置表格元素 **/

table { border-collapse: collapse; border-spacing: 0; }

2. 良好的命名习惯

无疑乱七八糟或者无语义命名的代码，谁看了都会抓狂。比如下面这样的代码：

.aaabb{margin:2px;color:red;}

我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：

My name is Wiky

问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

red{color:bule;}

这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性(颜色，位置，大小等)来命名一个class或id，您可以选择意义的命名如：#navigation{…}，.sidebar{…}，.postwrap{…}

这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如:

.alignleft{float:left;margin-right:20px;}

.alignright{float:right;text-align:right;margin-left:20px;}

.clear{clear:both;text-indent:-9999px;}

如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。

3.代码缩写

CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

li{

font: 1.2em/1.4em Arial, Helvetica, sans-serif;

padding:5px 0 10px 5px;

}

4.利用CSS继承

如果页面中父元素的多个子元素使用相同的样式，那最好把他们相同的样式定义在其父元素上，让它们继承这些CSS样式。这样你可以很好的维护你的代码，并且还可以减少代码量。那么本来这样的代码：

#container li{ font-family:Georgia, serif; }

#container p{ font-family:Georgia, serif; }

#container h1{font-family:Georgia, serif; }

可以写成:

#container{font-family:Georgia,serif; }

5.使用多重选择器

你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：

h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }

6. 适当的代码注释

代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。

7. 保持CSS的可读性

书写可读的CSS将会使得更容易查找和修改样式。对于以下两种情况，哪种可读性更高，我想不言而明。

8. 使用外部样式表

这个原则始终是一个很好的设计实践。不但可以更易于维护修改，更重要的是使用外部文件可以提高页面速度，因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。

9.避免使用CSS表达式(Expression)

表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。

10.代码压缩

当你决定把网站项目部署到网络上，那你就要考虑对CSS进行压缩，除去注释和空格，以使得网页加载得更快。压缩您的代码，可以采用一些工具，如YUI Compressor，利用它可精简CSS代码，减少文件大小，以获得更高的加载速度。

11. SEO站内优化：

一、代码及标签优化

代码和标签的优化，主要从以下几个方面进行：

1、网站代码精简和CSS&JS；

2、网站标题标签(titile)设置合理化；

3、网站关键词(keywords)设置合理化；

4、网站描述(Description)设置合理化；

5、网站H1/H2标签的合理优化；

6、网站METE标签的合理优化；

二、网站URL优化

1、网站页面的静态化处理(生成html)；

2、网站扁平化层级结构；

3、网站SEO定制文件名；

4、网站导航的面包屑处理；

三、网站内容优化

1、网站内容的原创性；

2、网站内容的更新频率；

3、网站数据库的总体数据量；

琪琪SEO认为其实在用户体验上的优化文章内提到的并不多，但SEO代码优化可以提升用户体验，比如增加网站用户文章浏览的返回顶部功能，文章页面增加快速评论功能、一个网站最多只能显示3屏、左右可以翻页等功能，看起来功能非常少，但综合的细节决定一个网站的成败!真正的SEO实战中，SEO实战高手更多的是玩的细节，这也是很多SEOER经常忽视或者不重视的部分，天下大事必做于易，天下大事必做于细，只有从网站建设规划，到设计代码SEO优化，再到网站功能用户体验等等系统化的细节上的完善，才能获得用户的喜欢和信赖。

打赏 赞(0)

微信

支付宝

用微信扫描二维码打赏

用支付宝扫描二维码打赏

历史的今天琪琪SEO发布的文章:

1. 2015:  微博客诞生记(0)

最后编辑：2016-01-14

作者：琪琪SEO

琪琪SEO，SEO专家、自媒体人、专注于SEO培训、网络推广、网络营销的媒体人。

站内专栏 站点 QQ交谈 腾讯微博 新浪微博