HTML搜索优化核心是<title>写对、<h1>用准、<link rel="canonical">设稳：title需50–60字符且主词前置，h1每页唯一并位于<main>内最前，canonical必须为绝对URL且指向规范页本身。
HTML 搜索优化不是靠堆关键词，而是用标准标签向搜索引擎明确传递“这是什么页面、哪部分最重要、内容是否可信”。核心就三件事：title 写对、h1 用准、canonical 设稳，其余标签围绕这三点补全语义逻辑。
title 标签：决定用户点不点你的第一句话
搜索结果里显示的标题，80% 以上直接取自 <title>。它被截断（比如只显示前 50 字），后半句用户根本看不到，点击率会明显下降。
- 长度严格控制在 50–60 字符（含空格），用浏览器开发者工具的 Elements 面板实时验证渲染效果
- 主词必须前置——
<title>SEO优化指南 | CodeCraft</title>比<title>CodeCraft | SEO优化指南</title>更有效 - 禁用「欢迎光临」「专业提供」这类无效前缀；CMS 或 SSR 模板中动态注入内容，别写死成“产品页”
h1 标签：告诉搜索引擎“本页只有一个主角”
<h1> 是页面语义结构的锚点，不是为了“看起来最大”，而是为了“逻辑上最重”。多个 h1 会让爬虫困惑主题；完全不用 h1，则等于放弃声明核心意图的机会。
- 每页仅一个
<h1>，包裹最核心标识：文章标题、商品名称，而不是 logo 或导航文字 - 禁止跳级使用 heading：h1 后应接 h2，再 h3，不能 h1 直接跳到 h4 —— 爬虫靠这个生成文档大纲
- 不要用 CSS 把
<p>或<div>“视觉做大”来冒充 h1；隐藏的 h1（如display: none）仍会被解析，权重反而混乱
canonical 标签：主动消除重复内容歧义
重复内容是 SEO 最隐蔽的杀手。设错 canonical 比不设更危险——它相当于告诉搜索引擎：“请把所有权重都给我指定的这个地址。”
立即学习“前端免费学习笔记（深入）”；
- 必须用绝对 URL，例如
<link rel="canonical" href="https://example.com/product/airpods-pro"> - 指向的必须是规范页本身，不能指向首页或 404 页；动态生成时确保 URL 带完整参数或已去参标准化
- 电商分页、地域版本、UTM 参数页等场景必须配 canonical，否则算法可能把多个相似页当垃圾内容处理
语义容器：帮搜索引擎看清“谁主谁次、哪轻哪重”
HTML5 语义标签不是装饰，是构建可读语义树的骨架。搜索引擎靠它们快速识别内容心脏、导航路径和辅助信息。
-
<main>必须唯一且独立存在，是整页“内容心脏”——正文、核心关键词、主要操作按钮都该放在这里 -
<section>用于逻辑子模块（如“参数详情”“用户评价”），每个必须配<h2>起始标题 -
<nav>只包真正起导航作用的链接；<aside>放侧边栏类内容，但需与主内容有语义关联，空的<aside>会被视为低质信号 - 图文顺序必须与视觉流一致：先
<header>，再<main>，最后<footer>；用 CSS 移动位置但代码写在底部，会让爬虫和屏幕阅读器彻底混乱
