搜索引擎仅依据语义标签（如<h1>、<main>、<nav>）和DOM结构解析内容意图，完全忽略class和style；<title>与<meta name="description">须静态写入首屏HTML，<link rel="canonical">必须为绝对URL，否则SEO优化基本失效。
搜索引擎只认语义标签，不读 class 名
爬虫解析 HTML 时，完全忽略 class 和 style，只依赖标签名和嵌套结构判断内容意图。<div class="main-title"> 再大再粗，对 SEO 毫无意义；而一个孤立的 <h1> 出现在 <footer> 里，会被直接降权——因为 DOM 位置违背语义逻辑。
常见错误现象：
-
<h1>被包在<header>外或藏在多层<div>套娃里（如<div><div><div><h1>） - 全页多个
<h1>，或<h1>后直接跟<h3>（跳级） - 用
<span>+ CSS 模拟标题层级，<main>缺失或包裹了导航栏
<title> 和 <meta name="description"> 必须静态写死在 HTML 中
Google 等主流爬虫首次抓取时基本不执行 JS。你用 document.title = 'xxx' 或 React useEffect 动态改标题，等于没写——首屏 HTML 里没有，它就当不存在。
实操建议：
立即学习“前端免费学习笔记（深入）”；
-
<title>控制在 50–60 字符，核心词前置，例如<title>HTML表格SEO优化技巧 | 前端实战笔记</title> -
<meta name="description">手写、非生成，120–155 字符，自然句式，开头嵌主词，禁用引号/emoji - SSR（如 Next.js）、静态站点（如 Astro）必须从路由参数或数据上下文注入，不能靠客户端补全
<main>、<section>、<nav> 不是“可有可无”的装饰
这些标签是给爬虫画的内容地图。<main> 告诉它“这里才是正文”，<nav> 标出导航链接区，<section> 划分逻辑模块（如“参数说明”“示例代码”）。漏掉或错用，会导致主体内容不被识别、RSS 抓取失败、移动端索引质量暴跌。
容易踩的坑：
-
<main>包了侧边栏或面包屑，导致正文权重被稀释 - 用
<div class="section">替代<section>，爬虫无法区分内容区块意图 -
<main>内部 DOM 深度超 6 层且无语义标签穿插，<h2>及后续文本常被截断不入索引
<link rel="canonical"> 写错等于主动放弃排名
同一内容出现在多个 URL（如带 UTM 参数的分享页、HTTP/HTTPS、www/non-www），不设 <link rel="canonical">，Google 会分散权重甚至判为重复抄袭。更危险的是写成相对路径：<link rel="canonical" href="/article"> —— 它可能被解析成任意域名下的路径，直接失效。
关键细节：
- href 必须是**绝对 URL**：
<link rel="canonical" href="https://example.com/html-seo-guide"> - 多语言站点中，
rel="canonical"必须指向当前语言版本，不能指向首页或其他语言页 - 与
hreflang配置冲突（如 canonical 指英文页，hreflang 标 zh-CN）会互相抵消，两个页面都降权
真正卡住 SEO 效果的，往往不是关键词密度或外链数量，而是 <main> 是否真包住了正文、<title> 是否在首屏 HTML 里、<link rel="canonical"> 的 href 是不是绝对地址——这些地方一错，其他优化基本白做。
