html语义结构是seo基础：每页唯一且精准的、必用且规范的、绝对url的canonical、准确描述图像的alt，共同构成爬虫可信赖的内容坐标系。
HTML结构设计不是“加几个语义标签就完事”，而是给搜索引擎提供一套可信赖的内容坐标系——错用、漏用或滥用，反而会让爬虫困惑甚至降权。
每页只能有一个 <h1></h1>，且必须承载页面核心主题词
搜索引擎把 <h1></h1> 当作页面内容的“法定主标题”，不是视觉样式开关。常见错误是：CMS模板里全站统一写 <h1>欢迎来到我的网站</h1>；或文章页用 <h1>关于我们</h1>，实际正文却是“HTML表格SEO优化技巧”。
- 实操上，
<h1></h1>应直接来自页面数据上下文，比如 Next.js 中从getStaticProps注入：<h1>{post.title}</h1> - 跳级使用（如
<h1></h1>后直接<h3></h3>）会破坏层级逻辑，爬虫可能误判子模块权重 - 避免在
<h1></h1>里塞多个关键词，例如<h1>HTML SEO 优化 教程 前端 实战</h1>—— 它读起来不像人话，也削弱主词聚焦
<main></main> 不是可选装饰，是告诉爬虫“这里才是正文”的强制信标
很多页面仍用 <div id="content"> 或一堆嵌套 <code><div class="wrapper">，这等于把正文和导航、侧边栏、广告混在同一个语义平面上。搜索引擎无法区分“用户真正要找的内容”在哪。
<ul>
<li>
<code><main></main> 必须且只能出现一次，包裹所有主体内容（文章、产品详情、表单等），不包含 <header></header>、<nav></nav>、<aside></aside> 或 <footer></footer>
<article></article> 内，再统一置于 <main></main> 下<main></main> 内容随首屏 HTML 一起输出；纯 CSR 页面若没它，爬虫可能只看到 loading 状态
<link rel="canonical"> 必须用绝对 URL，相对路径或协议省略会直接失效
这个标签的作用是“声明：此页的权威地址就是这个”，但大量项目在生成时写成 <link rel="canonical" href="/blog/html-seo-guide"> 或 <link rel="canonical" href="//example.com/blog/html-seo-guide"> —— 这两种写法都会让 Google 解析失败，导致重复内容被误判为不同页面。
- 正确写法必须是完整绝对 URL：
<link rel="canonical" href="https://example.com/blog/html-seo-guide"> - 动态页面（如带分页、UTM 参数的链接）需自动剥离参数后生成 canonical，否则
/page/2?utm_source=twitter和/page/2会被视为两个页面 - 静态站点生成器（如 Hugo、Jekyll）通常有插件自动处理，但手写模板或 SSR 应用务必自行校验输出结果
<img> 的 alt 属性不是“填空题”，是图像语义的不可替代描述
填 alt="图片"、留空 alt=""（但图非装饰）、或堆砌关键词如 alt="HTML SEO SEO优化 教程 图片"，这三类写法都等于放弃图片的索引机会，也损害可访问性。
- 功能性图片（如按钮图标）：用
alt="搜索"、alt="关闭弹窗"，动词+名词，说明行为 - 信息性图片（如对比图表）：写清图表结论，例如
alt="2025年各框架SEO评分对比：Next.js得分92，VuePress得分76" - 纯装饰图：明确写
alt=""（空字符串），不能省略属性，也不能写alt="decorative" - 避免在
alt里重复文件名（如seo-guide-01.png）或路径（/images/seo/...）
最容易被忽略的是：语义结构的有效性不依赖 CSS 或 JS 渲染。哪怕关掉所有样式、禁用 JavaScript，仅靠 HTML 源码本身，也要能让爬虫和屏幕阅读器准确还原出“这是什么页面、重点在哪、各部分关系如何”。这不是加分项，是基础生存线。
