资深SEO揭秘网站代码优化那些事！知识库

在网站运营过程中，代码优化常常是不可或缺的环节。若期望网站能在搜索引擎中获取良好排名，持续的 SEO 优化工作必不可少。接下来，依据资深 SEO 经验来深入探究网站代码的优化方法。

首先是 HTML 代码优化。关键要点在于，优先采用 div+css 布局，如此可使代码更为简洁流畅，也便于容纳更多内容。更为关键的是，这种布局能助力搜索引擎爬虫更高效、顺畅且友好地遍历页面。若 CSS 代码直接嵌入 HTML 标记内，搜索引擎蜘蛛会被分散精力，去处理这些对优化毫无助益的部分，因此建议将 CSS 封装进专门的文件。

关于 H1 标签，其分为 h1-h6 六个层级，权重依次递减。h1 标签在 h 标签里最为重要且权重最高，一个页面仅能出现一次 h1 标签，通常会将其置于标题处，毕竟标题是页面的核心所在。务必留意，一个页面不可出现多个 h1，但可多次出现 h2-h6。并且，若使用了 h2-h6，就必须添加 h1，网站要么不使用 h 标签，若使用就要完整运用，切不可出现有 h3 却无 h1 的情况，若不熟悉代码，切勿随意在网站添加 h 代码。

nofollow 标签不传递权重。一般会将其应用于无意义的出站链接，如 QQ 链接、微博链接等，目的是避免权重传递。在交换友情链接时，绝不可添加 nofollow，这是极不诚信的行为。由于 nofollow 不传递权重，所以在交换友情链接时需留意查看对方网站是否添加了该标签，可在浏览器中搜索 nofollow 插件以便在网站中显示查看。需牢记，友情链接应遵循先友情后链接的原则，若给他人链接添加 nofollow，日后将无人愿意与你交换友情链接。

每个网站都具备 title 标签，它代表着网站标题。蜘蛛依靠代码抓取网站，它无法识别网站中的图片或视频，而 title 标签能让蜘蛛知晓网站的主旨。网站标题参与关键词排名，所以在网站代码优化时切不可忽视 title 标签。它是三大标签中最为关键的一个，通常所说的关键词排名实际是指 title 中的关键词，而非 keywords 中的关键词，故而网站 title 的优劣直接关乎网站排名。但务必避免为追求排名而在 title 中堆砌关键词，否则会适得其反。

keywords 即网页中的关键词，如今 keywords 标签已不参与排名，但仍有不少 SEO 从业者过度看重它，实则并无必要。作为 SEO 人员，工作应做到全面，所以 keywords 标签仍需设置，建议设置 3-5 个即可，毕竟存在即合理。

description 标签是网站页面的描述，用于简要介绍网站信息与内容。在百度搜索关键词时，除了标题，下方显示的便是描述。若描述撰写得当，能够吸引用户访问网站，为网站引入流量。

Alt 标签用于添加网站图片的说明文字，有助于蜘蛛识别图片，因为蜘蛛只能识别代码而无法理解图片内容，所以需要加以说明，告知蜘蛛图片所展示的内容。但在 alt 标签中堆砌关键词会影响蜘蛛对网站的收录，只需使用简洁描述即可。

[此处插入图片：https://www.xinruiyun.cn/ms-mcms/upload/1/editor/1578908466934.png#jpg]

接着是 CSS 内容优化。其一，嵌套层级不宜过深，一般最多三层。这主要取决于团队项目结构，命名规范对此影响较大，需权衡利弊，是选择命名较长以避免重复，还是命名简便但嵌套较深。其二，css 解析是从右向左进行的，所以最右边的内容应相对精简，例如.on.li_lick 就优于.li_click.on。其三，如果 html 使用了 base64 的 img，其不会被缓存，可将该 base64 图片置于 css 文件内，这样 css 被缓存时，图片也能随之缓存。其四，尽量避免使用后代元素选择器，最右边一层不要是像 div 这类常用标签。

接着是 CSS 内容优化。其一，嵌套层级不宜过深，一般最多三层。这主要取决于团队项目结构，命名规范对此影响较大，需权衡利弊，是选择命名较长以避免重复，还是命名简便但嵌套较深。其二，css 解析是从右向左进行的，所以最右边的内容应相对精简，例如.on.li_lick 就优于.li_click.on。其三，如果 html 使用了 base64 的 img，其不会被缓存，可将该 base64 图片置于 css 文件内，这样 css 被缓存时，图片也能随之缓存。其四，尽量避免使用后代元素选择器，最右边一层不要是像 div 这类常用标签。

[此处插入图片：https://www.xinruiyun.cn/ms-mcms/upload/1/editor/1578908473689.png#jpg]

最后是 JavaScript 优化。从 SEO 角度出发，建议网站尽量不使用 JavaScript，因其对 SEO 极为不利。爬虫偏好文字、图片、链接和按钮等可抓取的元素，对于 JavaScript，即便抓取到也难以理解其含义。若某些地方必须使用 JavaScript，建议采用预渲染来降低其负面影响。预渲染的工作流程如下：首先生成网站每个页面的服务器端版本，然后存储起来，当客户访问时，检查用户代理，如果客户端是搜索机器人，则提供预渲染的内容而非 javascript 渲染的内容。

[此处插入图片：https://www.xinruiyun.cn/ms-mcms/upload/1/editor/1578908480277.png#jpg]