应使用语义化标签替代div和span，如header、nav、main、article、section、footer、aside，并严格遵循标题层级与链接文本规范，确保关键内容不依赖JS渲染。
用语义化标签替代 <div> 和 <span>
搜索引擎爬虫依赖 HTML 的语义结构理解页面内容。大量嵌套 <div> 会让爬虫难以区分标题、正文、导航或侧边栏，相当于把整本书写成“第1段、第2段、第3段”。
实际操作中优先选用：
-
<header>包裹站点标识和主导航 -
<nav>仅用于导航链接集合（不是所有链接都该放这里） -
<main>唯一标识页面主体内容区域（每个页面最多一个） -
<article>包裹独立可分发的内容单元（如博客文章、新闻条目） -
<section>表示有主题的逻辑区块，需配<h2>–<h6>标题 -
<footer>放页脚信息，避免塞进无关广告或 JS 加载的动态内容
注意：<aside> 不是“次要内容”的万能筐——它只适用于与当前 <article> 或 <section> 相关的补充信息（比如作者简介、术语解释），而非全站通用的推荐栏。
标题层级必须严格递进且不可跳级
爬虫通过 <h1>–<h6> 的嵌套关系构建内容大纲。跳级（如 <h1> 后直接 <h3>）会破坏结构信任度，部分 SEO 工具甚至直接报错。
立即学习“前端免费学习笔记（深入）”；
常见错误场景：
- 用
<h2>当页面主标题（应只用一个<h1>） - CMS 模板中硬编码
<h3>作为模块标题，导致正文里出现<h1>→<h3>→<h2>的乱序 - 用 CSS 把
<h4>样式调得比<h2>还大，视觉误导开发者忽略层级逻辑
检查方法：禁用 CSS 后肉眼通读标题文字顺序，确认是否自然形成“章→节→小节”结构。
链接文本要包含有效关键词，避免 "点击这里" 或空 <a>
爬虫把链接文本（anchor text）当作目标页面的主题信号。纯图标链接、<a href="#">详情</a>、或靠 aria-label 补充描述的方式，对多数传统爬虫无效——它们不执行 JS，也不解析 ARIA 属性。
实操建议：
- 产品页链接写成
<a href="/product/usb-c-hub">USB-C 多功能扩展坞</a>，而非<a href="/product/usb-c-hub">查看详情</a> - 避免
<a href="#" onclick="loadContent()">加载更多</a>，改用真实分页 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> 或 <meta name="description"> 不见了，那就危险了。
可行方案：
- 服务端渲染（SSR）或静态生成（SSG）输出完整 HTML，JS 只负责增强交互（如搜索框自动补全）
- 若必须客户端渲染，至少把
<title>、<meta name="description">、首屏<h1>和前两段正文预置在 HTML 源码中 - 避免用
fetch()加载整个<main>内容，这种模式几乎无法被可靠抓取
真正难处理的是那些靠滚动触发、用户行为触发、或第三方 SDK 动态注入的内容——它们本质上就不适合被爬虫当作权威内容源看待。
