什么是代码优化？详解网站代码SEO优化的技巧及注意事项

2023-07-04 09:03:17

推荐访问：SEO百科 SEO资料建站百科营销百科

网站代码优化主要是对已开发完成的网站代码进行调整，主要是因为很多网站的建设没有采用w3c标准，页面代码使用不规范，从而导致搜索引擎对网站代码的识别度不好，接下来小编为你详细分享网站代码SEO优化技巧及注意事项。

网站代码SEO优化技巧及注意事项

一、什么是网站代码优化

网站代码优化是指通过对网站页面的Html代码进行调整，使其更符合搜索引擎的抓取和识别规则，从而提升网站页面的抓取和自然排名。网站SEO代码优化主要目标是提升页面在搜索引擎的排名。

二、网站代码优化的技巧

1、html优化

(1)、title标签

在浏览一个网页时，通过浏览器顶端显示条出现的信息就是title标签的内容，又称之为"网页标题"。title标签可直观的告诉用户此网页讲述的内容性质，让搜索引擎、用户更容易了解文档内容，同时网站上的每个页面的title都是独一无二的，title标签大约有 9 个单词，但在 6 到 12 之间，首先放置最重要的关键字，然后按重要性顺序排列其他关键字（如果有空格）。一个主题明确的title可以帮助用户更方便地从搜索结果中判断你网页上内容是否符合它的需求。

详细介绍请查看：网页标题

(2)、Description标签

Description标签是title标签很好的补充，是对网页内容的精练概括，让用户更好的了解全文，这个对搜索引擎优化很有帮助，一个好的description会帮助用户更方便的从搜索结果中判断你的网页内容是否和需求相符。Description标签一定要和标题结合起来，尤其要突出要推广的关键词，尽可能组合关键字和短语。Description标签大约 24 个单词或 160 个带空格的字符，尝试在前 156 个字符中包含所有高优先级关键字以确保安全。

(3)、Keywords标签

Keywords标签就是页面主要关键词的提炼，一般使用短语或者短语组合，每个页面使用3-5个关键词即可。很多文章说对SEO的作用降低了，从优化猩SEO实际操作来看，Keywords还是很有用的，比如原来占的分值是10分，现在可能降到5分，所以不要忽视keywords标签在网站排名中的作用。

(4)、H标签

html中的h标签一共有六个，分别是h1/h2/h3/h4/h5/h6，分别代表不同的级别，称之为一级标题、二级标题……其中，一级标题具备更多的权重。关于h标签的使用，需要根据实际情况来使用，不可任意滥用。如一篇文章，不可能出现多个一级标题，所以h1，在同一个页面中只能出现一次，而h2等则可以出现多次，根据你需要表现的内容的重要程度，分别使用不同的h标签即可。特别注意，h标签中最好出现关键字！还有就是，随其自然，万不可刻意地用h标签来处理某些关键字！

(5)、strong属性

strong被认为是"加强"，em被认为是"强调"，也就是说这两个标签是有特殊含义的，这对于网站优化至关重要。多数时候，在优化网站时会对关键字进行突出，这时使用strong或em就比使用B或者I好很多，特别谨记！

(6)、alt和title属性

alt是图像中的注释，title是图像或链接的标题，这两者对于优化，尤其是图像的优化至关重要，但也不要滥用！一般在插入图像时，我们在alt中设置图像的描述内容，其中可以包含关键字但不要故意堆砌，title则当作图像标题来处理。特别需要注意的是，这些内容是不可以重复的！也就是说，当你的页面中有多张图像，你不能每张图像的描述和标题都设置成一样的，这样很容易被搜索引擎惩罚！

title属性在a标签中也有所使用，告知搜索引擎链接的内容。

(7)、nofollow属性

nofollow属性是HTML页面中A标签的属性值。它的出现为网站管理员提供了一种方式，即告诉搜索引擎"不要追踪此网页上的链接"或"不要追踪此特定链接，只要加入了这个nofollow标签的链接，爬虫就不会进行抓取，通过nofollow标签减少网站链接权重的传递。

详细介绍请查看：nofollow

(8)、Iframe框架的合理使用

2、css优化

于网站排名优化来说，css的几乎没有任何影响，但往大的方向如网站优化来说，样式表css的优化就至关重要了，其主要作用即是提高网页的响应速度。

(1)、外链css

css的使用有多种方式，一是嵌入式，即在html标签中直接定义样式表，如下所示:<p style="font-family:arial;font-size:16px;font-weight:bold;">Outside now its raining,and tears are falling from my eyes…</p>

还有一种是直接定义在页面头部的如下：<styletype="text/css">p{ background:#f1f1f1; color:#333; line-height:20px;} </style>

这两种方式都是把css写在当前html中，这样会造成hml文档变大，降低网页的响应速度，所以我们需要外链css，将所有与本页面相关的样式写入到该样式表中：<link href="style/common.css"rel="stylesheet"type="text/css"/>

(2)、精简css

对于这一点需要一定的css能力才可以做到了。所谓精简，指的是用尽可能少的样式代码实现整个网页的样式效果，需要充分利用css的继承和综合使用，举一个简单的例子来说明。如页面中的链接，全部不需要下划线、大部分为12像素，但链接的颜色并不相同，个别的字体效果也不相同，我们就可以这样来写：

a{ text-decoration:none; font-size:12px;}/*定义通用a样式*/

a.a_red{ color:#e00;}

a.a_blue{ color:#009;}

a.a_menu{ color:#fff; font-size:14px; font-weight:bold;}/*针对特殊a标签只指定特殊样式*/

因为css的继承作用，a_red和a_blue都具备没有下划线、12像素这一样式，而a_menu同样具备没有下划线，但因指定了大小，就不再继承12像素的指定而使用14像素……

(3)、整合css

一般情况下，前端制作人员喜欢把通用样式写成一个文件，把专用样式写成另一个文件，以便各个页面调用。比如把页面通用样式（包括通用的布局样式、文字样式等）写在common.css中，而把专用的写在另一个样式表中。如首页，我们就需要调用common.css和index.css两个样式表文件。这样做，对于前端来说是正确的。但对于优化，却不太好。多一个文件调用就需要多一次请求，当然也会多耗费一点时间。所以，在网站制作完成后，需要把页面的所有样式合并到一起，以提高网页的响应速度！但需注意，合并css不利于网站后期整改，权衡利弊各取所需，具体是否合并还需根据你的实际情况而定。

(4)、压缩css

压缩css其实很简单，就是去掉多余的空格和换行。实现起来也非常的简单，网上有很多工具，请自行搜索"css压缩"即可找到很多在线压缩工具。同上面一点，压缩后的css不便于后期整改，需要自己权衡取舍。