搜索引擎不“读网页”而只解析HTML标签树，因其不渲染页面、不执行JS、不识别视觉布局，仅依赖静态语义结构；结构混乱（如<main>嵌套错误、多<h1>、无序标题）导致爬虫无法定位正文、判断主题，进而跳过或误判内容。
为什么搜索引擎不“读网页”而只解析标签树
爬虫不是人类，它不会渲染页面、不会执行 JS、也不会“看布局”。它拿到 HTML 源码后，直接按 DOM 树结构逐节点解析。结构混乱 = 信息丢失，比如把 <main> 套在 <section> 里，或用一堆 <div> 模拟标题，爬虫就无法识别哪段是正文、哪段是导航。
常见错误现象：
-
<h1>出现在页头 logo 或 banner 区，而非文章主体内 - 多个
<h1>并存（如导航栏文字也用了<h1>） -
<main>只包了部分内容，或被<div>层层包裹 - 关键内容靠
document.write()或 React 渲染后才出现，首屏 HTML 里为空
真正起作用的是静态 HTML 中的语义层级：一个准确的 <h1> + 包裹全文的 <main> + 清晰的 <nav> 和 <footer>，比任何 JS 注入都可靠。
title 和 description 必须写死在 HTML 里，不能靠 JS 改
Google 抓取首页时默认不执行 JS，document.title = "新标题" 这类操作对首次索引无效。动态框架（如 Vue SPA、纯 CSR React）若没配 SSR 或预渲染，<title> 和 <meta name="description"> 就等于不存在。
立即学习“前端免费学习笔记（深入）”；
实操建议：
-
<title>控制在 50–60 字符，核心词必须前置（如<title>Wireless Bluetooth Headphones | BrandX</title>，不是<title>BrandX – Wireless Bluetooth Headphones</title>） -
<meta name="description">长度 120–160 字符，要像一句自然摘要，不能堆关键词 - 每页必须唯一，禁止模板化生成（如所有产品页共用
content="Buy [product] online"） - 服务端渲染（Next.js 的
getStaticProps、Nuxt 的asyncData）或静态生成是底线保障
alt、canonical、viewport 这三个 meta 标签一错就掉收录
它们不出现在页面上，也不报错，但出错等于关掉爬虫的三扇门：图片进不了图搜、页面被当重复内容、移动端直接不进移动索引队列。
容易踩的坑：
-
<img>的alt留空或写alt="image123.jpg"—— 功能性图写用途（alt="Search button"），内容图写所见（alt="Black wireless headphones on white background"），装饰图明确写alt="" -
<link rel="canonical">的href用相对路径（/product/abc）或协议相对路径（//example.com/product/abc）—— 必须是绝对 URL（https://example.com/product/abc） -
<meta name="viewport">缺失或写成content="width=1200"—— 正确写法只有这一种：<meta name="viewport" content="width=device-width, initial-scale=1">，缺了它，Google 可能降权移动排名
robots.txt、sitemap.xml 和响应头比 meta robots 更管用
<meta name="robots" content="index,follow"> 是默认行为，加了等于没加；而 noindex 确实会阻止索引，但它不控制抓取频率——爬虫可能仍频繁来，只是不存档。
真正影响抓取节奏的，是这三样：
-
robots.txt里用Sitemap:显式声明地址，例如Sitemap: https://example.com/sitemap.xml -
sitemap.xml中每个<url>的<lastmod>必须精确到秒（如2026-06-28T14:03:22+00:00），且与服务器返回的Last-Modified响应头一致 - 高频更新页（如博客列表）设置短缓存：
Cache-Control: max-age=300，向爬虫传递“内容易变”信号
别在 <head> 里塞一堆 http-equiv="refresh" 或堆砌 meta keywords，这些不仅无效，还可能触发风控或增加 HTML 体积拖慢解析。
