核心是确保首屏html服务端输出完整、语义清晰、结构扁平；爬虫不执行js，只解析原始html，csr应用须通过ssr或预渲染输出含等语义标签的静态内容，dom深度≤6层，资源精简以避免超时。
避免复杂框架影响搜索引擎抓取，核心不是“不用框架”，而是确保首屏 HTML 在服务端就输出完整、语义清晰、结构扁平的静态内容。爬虫不执行 JS，也不等渲染，只读你发给它的那一份原始 HTML。
必须让爬虫一打开就看到真实内容
纯前端渲染（CSR）的单页应用（如未配置 SSR 的 React/Vue）默认只返回一个空 <div id="root"></div>，爬虫解析后发现无正文、无标题、无链接，直接判定为空页，不索引。实测中，超 5 秒未返回有效文本即触发 HTTP 408 超时，内容归零。
- Next.js 用户必须用
getStaticProps或generateStaticParams预生成 HTML，保证<main></main>、<h1></h1>、<title></title>全部写死在源码里 - Nuxt 用户启用
ssr: true并确认中的<title></title>和<meta name="description">是服务端注入，而非 JS 后置修改 - 若用 Vite + React，至少搭配
vite-plugin-ssr或预渲染插件，导出含业务文本的静态 HTML 文件
结构不能靠 JS 拼，语义标签必须原生存在
爬虫不会识别 document.createElement('main') 或 useEffect(() => { ... }) 动态插入的语义标签。它只认 HTML 源码里已有的 <main></main>、<section></section>、<time></time> 等。
-
<main></main>必须唯一、非空、包裹全部主体内容，且不能嵌套在<section></section>或<footer></footer>内 - 每篇博文/产品页应独立用
<article></article>包裹，内部带<h2></h2>或<time datetime></time>，否则爬虫无法建模为独立内容单元 - 避免用
<div class="h1"> 模拟标题——CSS 再像也不是 <code><h1></h1>，爬虫完全忽略DOM 树深度压到 6 层以内
爬虫流式解析 DOM，深度超 6 层会主动截断，底层是内存与超时限制。Bootstrap 或 Tailwind 的多层嵌套容器（如
<div class="container"><div class="row"><div class="col"><div><div><div>）极易触达阈值。 <ul> <li>用语义标签替代 div 堆叠：<code><header></header>、<nav></nav>、<main></main>、<section></section>可重置嵌套计数 - 表格嵌套尤其危险，
<td> 内不要再套 <code><div>；能用 <code><ul><li></ul>列表的地方，别用栅格模拟 - 用
curl -s https://yoursite.com | tidy -xml -indent查看实际 DOM 层级，或用 Chrome DevTools → Elements → 右键节点 → “Show DOM properties” 查 depth - Bootstrap 不要引入全量 CSS/JS；用 Sass 源码裁剪，只保留 grid、reboot、utilities
- 关键 CSS（如首屏字体、标题样式）内联进
，体积控制在 50KB 内 - 移除所有阻塞渲染的第三方脚本（统计、广告、客服 SDK），它们不参与 SEO，但拖慢解析
- 图片用
loading="eager"确保首屏图随 HTML 一起加载，避免靠 JS 懒加载导致文本缺失
精简资源，别让爬虫卡在加载路上
爬虫对单页的总处理时间配额极短（通常 ≤5 秒）。若首屏需下载 2MB JS 才能显示文字，它会在超时后放弃。
