必须唯一且不能嵌套在页脚中，它是搜索引擎定位正文的结构锚点；错用会导致权重打折、降权或收录失败。

<main></main> 必须唯一，<nav></nav> 不能塞进页脚，<article></article> 不等于“每条微博都套一个”——语义化标签不是换掉 <div> 就完事，而是让<a style="color:#f60; text-decoration:underline;" title="搜索引擎" href="https://m.php.cn/zt/20588.html" target="_blank">搜索引擎</a>在毫秒级解析中，准确锁定“哪段是正文”“哪块是导航”“哪个时间是发布日”。 <h3>为什么 Google 把 <code><main></main> 当作结构锚点

Google 明确将 <main></main> 视为页面“内容可信度”的第一判断依据。它不关心你写了多少字，只看是否被正确包裹：

• 多个 <main></main> 或嵌套在 <footer></footer> 里，会触发“结构冲突”警告，整块内容权重直接打折
• SPA 路由切换后没销毁旧 <main></main> 节点，DOM 中残留两个，Google 会降低对全页内容的评分可信度
• <main></main> 内部混入登录框、客服电话、友情链接——这些本该属于 <header></header>、<aside></aside> 或普通 <div>，否则被判定为“元信息污染” <h3> <code><article></article> 和 <section></section> 的使用边界在哪

  二者都划分内容区块，但语义完全不同：

  • <article></article> 表示**可独立分发、复用、索引的内容单元**，比如一篇博客、一条新闻、一个用户评论。搜索引擎会把它当作一个完整实体来建索引
  • <section></section> 只表示**主题相关的内容分组**，必须配 <h2></h2> 或 aria-labelledby，否则爬虫视为空白语义块；纯无标题的 <section></section> 不仅无效，还稀释结构信号
  • 常见误用：<article></article> 套列表项（如商品卡片）、<section></section> 包单个按钮或广告位——这会让爬虫丢失上下文，也破坏屏幕阅读器导航流

  <time></time> 和纯文本日期对索引的影响差异

  “2024年3月15日” vs <time datetime="2024-03-15">2024年3月15日</time>，对爬虫来说是两种信息密度：

  

  Html To Pdf

  使用 Puppeteer + Chrome 将 HTML 渲染为中文 PDF，自动处理图表等待、Tab 展开、动画、测高、白边消除、防分页，适用于看板、报表、网页和交互图表转 PDF。

  下载
  • 前者只是字符串，需靠周边词（如“发布于”“更新于”）+ NLP 推断，容易漏判或误判
  • 后者自带机器可读的 datetime 属性，Google 在新闻/博客类页面中会赋予更高时效性权重，直接影响“最新结果”排序
  • 同理：<address></address> 明确标记联系信息，有助于本地 SEO；<figure><figcaption></figcaption></figure> 让图片说明被单独识别，提升图搜命中率

  最容易被忽略的兼容性陷阱

  语义化不是写完就生效，实际部署中几个点常被跳过：

  • 旧版 IE 不支持新语义标签？不是问题——现代 polyfill（如 html5shiv）已能兜底，真正问题是**未声明 DOCTYPE**，导致 IE 进 quirks mode，所有语义标签退化为普通 <div> <li>React/Vue 组件中动态生成 DOM 时，<code><main></main> 或 <nav></nav> 可能被重复挂载，需在组件卸载时手动移除或用 key 控制生命周期
  • 服务端渲染（SSR）若未同步输出语义结构，首屏 HTML 缺失 <main></main>，而 JS 加载后才补上——爬虫抓取的是初始 HTML，此时结构信号已丢失

  语义化真正的难点不在“用不用”，而在“用得准不准”：每个标签背后都有明确的机器解析规则，错位一次，可能让整块内容在搜索结果中降权、延迟收录，甚至被完全忽略。