应使用语义化标签替代div和span，如header、nav、main、article、section、footer、aside，并严格遵循标题层级与链接文本规范，确保关键内容不依赖js渲染。
用语义化标签替代 <div> 和 <code><span></span>
搜索引擎爬虫依赖 HTML 的语义结构理解页面内容。大量嵌套 <div> 会让爬虫难以区分标题、正文、导航或侧边栏，相当于把整本书写成“第1段、第2段、第3段”。
<p>实际操作中优先选用：</p>
<ul>
<li>
<code><header></header> 包裹站点标识和主导航
<nav></nav> 仅用于导航链接集合（不是所有链接都该放这里）<main></main> 唯一标识页面主体内容区域（每个页面最多一个）@#@#@#@#@#@#@#@#@#@0、或靠 aria-label 补充描述的方式，对多数传统爬虫无效——它们不执行 JS，也不解析 ARIA 属性。
实操建议：
- 产品页链接写成
@#@#@#@#@#@#@#@#@#@1，而非@#@#@#@#@#@#@#@#@#@2 - 避免
@#@#@#@#@#@#@#@#@#@3，改用真实分页 URL（如/blog?page=2）或语义化按钮（<button type="button">加载更多文章</button>） - 图片链接必须带
alt，且alt文本需描述图像实质内容（alt="MacBook Pro 14寸开箱图"），而非“图片”“logo”等无意义词
关键内容不能依赖 JavaScript 渲染
主流搜索引擎爬虫（如 Googlebot）虽支持有限 JS 执行，但存在超时、资源限制和上下文缺失问题。把正文、导航、元数据塞进 document.write() 或 React/Vue 的 v-if 里，等于主动放弃被索引的机会。
判断标准很简单：在浏览器中禁用 JavaScript 后刷新页面，如果核心内容消失、导航栏变空、<title></title> 或 <meta name="description"> 不见了，那就危险了。
可行方案：
- 服务端渲染（SSR）或静态生成（SSG）输出完整 HTML，JS 只负责增强交互（如搜索框自动补全）
- 若必须客户端渲染，至少把
<title></title>、<meta name="description">、首屏<h1></h1>和前两段正文预置在 HTML 源码中 - 避免用
fetch()加载整个<main></main>内容，这种模式几乎无法被可靠抓取
真正难处理的是那些靠滚动触发、用户行为触发、或第三方 SDK 动态注入的内容——它们本质上就不适合被爬虫当作权威内容源看待。
