大多数博客作者写文章时，注意力全放在文字内容上，很少有人会认真思考HTML标签该怎么选。但恰恰是这些不起眼的标签，决定了你的文章在搜索引擎眼里是"结构清晰"还是"一团乱麻"。语义化标记（Semantic Markup）的核心就一句话：选择HTML元素时，要选那些能表达含义的，而不是随便套一个div了事。

这篇指南要解决的是实际问题：为什么语义化标记对SEO至关重要，以及每个关键元素该怎么用。文中给出了可以直接复制、粘贴并验证的代码示例，从标题层级到图片说明，从发布时间到JSON-LD结构化数据，一步步拆解。

打开网易新闻 查看精彩图片

标题层级：一个h1，剩下的按逻辑排

语义化标记的本质，是让浏览器、搜索引擎和辅助技术都能清楚理解页面的结构和含义。具体到一篇博客文章，规则很明确：整篇文章只能有一个

，用来放文章标题。在它下面，按照逻辑层级依次使用和——对应主要章节，对应子章节，层级不能跳级。

这样做的好处是让文章更容易被扫读和理解。搜索引擎的爬虫能快速识别出哪些是核心标题、哪些是正文内容；使用屏幕阅读器的用户也能通过标题层级快速导航到他们感兴趣的部分。

还有一个实用技巧：给每个

和加上id属性，通常用标题的短横线版本（比如标题是"Semantic Markup Basics"，id就写成"semantic-markup-basics"）。这样目录就能通过类似#semantic-markup-basics的片段链接直接跳转到对应位置。

导航区不需要标题：aria-label就够了

很多人写页面时习惯给导航也加一个

，这其实是个误区。标题是用来描述内容区块的，而导航区本身不属于内容大纲的一部分。正确的做法是用aria-label来命名这个地标区域。

看下面这个基础结构示例，导航区用了aria-label="Main navigation"来标识，页面里没有多余的标题层级。这样标题结构保持干净，同时使用屏幕阅读器的用户依然能区分出主导航和页脚导航。

完整的博客文章语义化结构示例：

My website
  • Home

  • Contact
    • Main title        Title 1        
    Paragraph 1        Title 2        
    Paragraph 2        Title 3        
    Paragraph 3
  • Home
  • Contact
    • © 2023 Company name
    图片处理：文件名、alt文本、figure标签一个都不能少
    图片的语义化处理需要和正文一样用心。首先，图片文件名要有描述性，不要用IMG_001.jpg这种毫无信息量的命名。其次，alt文本要解释图片的内容或用途——对信息型图片来说，alt文本主要是无障碍功能，但它也能给搜索引擎提供额外的上下文信息。
    在HTML结构上，图片应该用
    标签包裹，配合来写图片说明。这样图片和它的说明文字在语义上就是一个整体，搜索引擎能更准确地理解图片在文章中的角色。
    发布时间用标签标记，搜索引擎能直接读取机器可读的日期格式。再加上JSON-LD格式的BlogPosting结构化数据，等于直接告诉搜索引擎"这是一篇博客文章，发布于某年某月某日"。这些细节叠加起来，就是语义化标记对SEO的全部价值——不是玄学，是让机器读懂你的内容。