SEO 分享与数据统计
14.4 爬虫与搜索引擎
Tip
你看到的网页是五彩斑斓的 UI，爬虫看到的网页是冰冷的 HTML 代码。理解爬虫视角 (Bot View) 是做 SEO 的前提。
1. 为什么要学这个?
你用炫酷的 WebGL 做了个网站，只有一张 Canvas，操作非常流畅。
但 Google 搜不到这上面任何文字。
因为在爬虫眼里，你的网站就是一个空的 <canvas> 标签。
2. 核心概念：ISP (Indexing Pipeline)
Google 的抓取流程：
- Crawl (爬取): 发现 URL，下载 HTML。
- Render (渲染): (可选) 如果需要，执行 JS。但这一步很慢，通常会延迟几天甚至几周。
- Index (索引): 分析文本，提取关键词，存入数据库。
- Rank (排名): 用户搜索时，根据算法打分排序。
SSR (Server Side Rendering) 的优势在于：Step 1 下载的 HTML 里就已经有内容了，直接跳到 Step 3。无需等待 Render。
3. 解决方案 (HOW)
3.1 语义化 HTML (Semantic HTML)
爬虫是瞎子，它靠标签猜意思。
- 用
<h1>告诉它这是大标题 (全页只能有一个)。 - 用
<article>告诉它这是正文。 - 用
<nav>告诉它这是菜单。 - 用
<a>做跳转，不要用div+onClick。
3.2 爬虫视角模拟图
graph TD
Source["HTML 源码"] --> Parser["HTML 解析器"]
Parser --"<h1>"--> Title["提取为主标题"]
Parser --"<a>"--> Links["提取为链接 (用于继续爬)"]
Parser --"<img>"--> ImgCheck{"有 alt 吗?"}
ImgCheck -- Yes --> Keyword["提取 alt 为关键词"]
ImgCheck -- No --> Ignore["忽略此图片"]
style Title fill:#c8e6c9,stroke:#2e7d32
style Ignore fill:#ffcdd2,stroke:#c62828
4. 避坑指南
| ❌ 不要这样做 | ✅ 应该这样做 | 为什么 |
|---|---|---|
| 乱用 H1 | 结构化标题 | H1 是给全文最重要的标题留的。不要为了字体大小而乱用 H1-H6。样式请交给 CSS。 |
| div 链接 | 使用 a 标签 | 爬虫只认 <a href="...">。router.push() 对爬虫来说是不可见的路径。 |
| 纯 CSR | SSR/SSG | 除非你是做 Photoshop Web 版这种工具应用，否则内容型网站（博客、文档、电商）必须 SSR。 |
5. 真实案例
Story
2015年，H1 的战争
某电商网站发布改版。为了设计美观，前端把 Logo 放在了 <h1> 里，把商品标题放在了 <h3> 里。
结果上线后，搜商品名根本搜不到。
运营排查了半个月，最后改回 HTML 结构，把商品名改为 <h1> 后的第二天，流量暴涨 50%。
Vibe 心法：优雅的语义化 HTML 是写给爬虫的“情书”。放弃用 div 模拟一切的陋习，回归标准的 a 标签与 img alt。记住：当你在浏览器禁用 JS (Disable JavaScript) 后依然能读通页面，你的 SEO 才是真正及格的。
6. 本章小结
- SSR: 对 SEO 最友好。
- Semantic: 用对标签，不仅为了可访问性，也为了 SEO。
- Disable JS: 是检验 SEO 的试金石。