HTML5语义化升级不掉权但须精准：<header><nav><main><article><aside>等标签必须按语义严格使用，误用会干扰搜索引擎对内容层级的理解，导致标题权重分散、正文识别率下降。
直接改 <!DOCTYPE html> 不会掉权，但语义标签替换必须精准
HTML5 不是重写页面，而是用更准确的标签表达原有结构。搜索引擎（尤其是 Google）已能识别旧标签，但语义化升级后若误用 <section> 替代 <div>、或把导航栏塞进 <article>，反而会让爬虫误解内容层级，导致标题权重分散、正文识别率下降。
-
<header>只用于页面顶部或区块头部，不是所有带 logo 的容器都该换 -
<nav>必须包裹真正导航链接，广告位、筛选栏、分页器不算 -
<main>页面有且仅有一个，且不能嵌套在<article>或<aside>内 - 保留原
<h1>–<h6>层级和文本内容，不因加了<section>就删掉<h2>
哪些旧标签必须保留？<title>、<meta name="description">、<link rel="canonical"> 一个都不能动
这些是 SEO 的硬性信号，HTML5 规范完全兼容，且未作任何语义变更。强行替换成新标签（比如用 <meta name="keywords"> 代替 description）或删减，会直接切断搜索结果摘要来源。
-
<title>仍需放在<head>内，长度建议 50–60 字符，含核心关键词 -
<meta name="description">值不变，不要因为用了<main>就以为“描述已冗余” -
<link rel="canonical">必须保留，尤其多端共用一套 HTML 时，避免重复内容判罚 - 旧版
<meta http-equiv="X-UA-Compatible">可安全删除，它只影响 IE，与 SEO 无关
用 <article> 和 <aside> 前先问：这个区块是否独立可复用、是否与主内容强相关？
很多团队把侧边栏广告、用户登录框、相关文章列表全塞进 <aside>，结果让爬虫认为这些是“补充信息”，间接稀释主内容可信度。同样，把整页商品列表当作一个 <article>，等于告诉搜索引擎：“这是一篇完整文章”，而非“多个独立商品项”。
- 单篇博客、新闻稿、产品详情页 → 适合用
<article> - 评论区、作者信息卡、分享组件 → 属于该
<article>的附属，应放在其内部，而非并列 - 全局侧边栏（如分类导航、品牌介绍）→ 用
<aside>；页面级推荐位（如“猜你喜欢”）→ 仍用<section>+<h2> - 避免嵌套：
<article><aside></aside></article>合理；<aside><article></article></aside>违反语义逻辑
验证是否出问题：用 Google Search Console 的「URL 检查」+ 查看渲染后的 DOM 结构
别只看源码是否写了 <main>，关键看 Google 实际抓取到的结构。有些 CMS 在输出时把 <header> 渲染成空标签，或 JS 动态插入内容导致 <article> 未被静态捕获，SEO 效果就归零。
立即学习“前端免费学习笔记（深入）”；
- 在 GSC 中输入 URL → 点「测试实时网址」→ 查看「渲染后的 HTML」面板
- 确认
<h1>是否可见、<main>内是否包含正文文本节点（非仅<div id="app">） - 检查
<script>是否阻塞关键内容渲染（如把<article>放在懒加载容器里） - 用 curl 或 Puppeteer 抓取服务端直出 HTML，对比是否含预期语义标签（避免依赖 CSR）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>如何正确升级 HTML 到 HTML5｜SEO 不降权指南</title>
<meta name="description" content="详解 HTML5 语义标签替换原则，避开常见 SEO 陷阱">
<link rel="canonical" href="https://example.com/html5-seo-guide">
</head>
<body>
<header>
<h1>网站名称</h1>
<nav aria-label="主导航">
<a href="/">首页</a>
<a href="/blog">博客</a>
</nav>
</header>
<main>
<article>
<header>
<h1>如何正确升级 HTML 到 HTML5</h1>
<p>发布于 2024-04-10</p>
</header>
<p>语义标签不是装饰，是内容关系的声明。</p>
</article>
</main>
<aside>
<h2>相关资源</h2>
<ul>
<li><a href="/html5-differences">HTML5 新增元素一览</a></li>
</ul>
</aside>
</body>
</html>
语义标签本身不提升排名，但错误使用会干扰内容理解。最常被忽略的是：CMS 模板中 <header> 和 <footer> 被复用在每个区块，导致搜索引擎看到几十个 <header> 却找不到真正的页面头部。 
