SEO之HTML优化如何着手，哪些代码细节最影响排名？

最近有朋友问我，说看了不少SEO文章，感觉HTML优化这块说得有点散。我自己做网站优化的时候，也发现代码层面的调整见效挺直接的。今天我就围绕HTML，聊几个实际操作的环节。

我主要从四个部分来说，这也是我平时检查一个网站代码时的顺序。

先说说标题和描述标签

这两个标签是老生常谈，但犯错的人还是很多。title标签是HTML里对搜索引擎最重要的元素之一。

我看到很多网站有这样的问题：

• 全站用一个通用标题，比如公司名
• 标题堆砌关键词，显得很不自然
• 标题过长，超过60个字符会被截断
• meta description标签缺失或重复

正确的做法是，每个页面都要有独一无二的标题和描述。标题要包含核心关键词，并且通顺。描述标签虽然不直接影响排名，但影响点击率。你可以把它看作搜索结果的广告文案。

我一般这样规划标题结构：核心关键词 - 次要关键词/品牌名。总长度控制在50-60个字符之间。描述标签写一段通顺的话，大概150-160个字符，把页面内容概括清楚，并自然地包含关键词。

然后是URL结构

URL应该清晰、简洁，包含关键词。动态参数尽量少用。

不好的URL例子：`www.example.com/product?id=123&cat=5`

好的URL例子：`www.example.com/seo-html-optimization-guide`

如果你用WordPress这类CMS，记得设置固定链接为“文章名”模式。如果是静态站，在建站规划时就把URL结构设计好。目录层级不要太深，一般不超过三级。

头部标签的层级使用

就是H1、H2、H3这些标签。它们的作用是告诉搜索引擎页面内容的结构。常见的问题是把H1当样式用，或者层级混乱。

一个页面通常只有一个H1，用来概括页面核心主题。H2是主要板块的标题，H3是H2下的子板块。要按顺序使用，不要跳过层级（比如直接从H1跳到H3）。

写内容时，先拟好标题层级，再填充正文。这样内容逻辑清晰，搜索引擎也容易理解。

图片的优化处理

图片如果不处理，会浪费很多SEO机会。主要优化三个属性：文件名、alt文本、尺寸。

文件名不要用“IMG_001.jpg”这种，要改成描述性的英文或拼音，比如“seo-html-checklist.jpg”。alt文本要准确描述图片内容，如果图片里有文字，最好概括出来。对于装饰性图片，alt可以留空，但不要不写这个属性。

图片尺寸太大会影响加载速度。上传前先用工具压缩一下。我常用的在线工具是TinyPNG，能压缩不少体积，画质损失也小。

页面加载速度相关的代码

速度是排名因素，而HTML写法直接影响速度。有几个地方可以注意：

CSS和JavaScript尽量外链，并且放在合适的位置。CSS放在头部，确保页面能正确渲染。非关键的JavaScript可以放在body底部，或者加上async、defer属性异步加载。

减少HTTP请求。比如合并小的CSS/JS文件，用CSS Sprite合并小图标。检查一下页面代码，有没有冗余的、用不上的插件脚本，有的话就删掉。

结构化数据标记

这个不算严格意义上的优化，但能帮助搜索引擎更好地理解内容。比如文章可以用Article标记，产品可以用Product标记。

你不需要自己写JSON-LD代码，很多SEO插件能帮你生成。像Yoast SEO、Rank Math这些插件，填写几个字段就能生成对应的结构化数据。添加后，可以用Google的富媒体搜索结果测试工具验证一下。

移动端适配的代码检查

现在流量大多来自手机，移动端体验必须做好。首先，在HTML头部必须有viewport元标签。

` 优化如何着手