爬虫看的和读者看的不是一回事-1
title: "爬虫看的和读者看的不是一回事:SEO 双轨" date: 2026-09-17 tags: [SEO, SSR, SPA, RSS, sitemap, 核心功能] category: 核心功能 description: "同一个 URL,搜索引擎爬虫看到的是服务端渲染的纯 HTML,读者看到的是客户端渲染的交互体验。两套都不妥协。"
爬虫看的和读者看的不是一回事:SEO 双轨
博客的 SEO 和体验,一直是矛盾的:
- 静态生成(Hugo/Hexo): SEO 好,但交互弱。每次改内容都要重新构建。
- 单页应用(SPA): 交互好,但 SEO 差。爬虫看到的是空的
<div id="app">。
能不能两个都要?
爱库录的做法:SEO 双轨。 同一个 URL,爬虫和读者看到不同的内容。
双轨机制
请求: /my-article
├── User-Agent 是爬虫?
│ └── 是 → 服务端渲染(SSR)→ 返回纯 HTML
│ 标题、正文、结构化数据,完整呈现
│
└── 不是 → 返回 SPA
客户端渲染,完整交互体验
爬虫看到的
<!DOCTYPE html>
<html>
<head>
<title>Go 并发模式实战笔记 - 爱库录</title>
<meta name="description" content="Go 的并发原语看起来简单...">
<meta property="og:title" content="Go 并发模式实战笔记">
<meta property="og:type" content="article">
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BlogPosting",
"headline": "Go 并发模式实战笔记",
"datePublished": "2026-09-15",
"author": { "@type": "Person", "name": "博主" }
}
</script>
</head>
<body>
<article>
<h1>Go 并发模式实战笔记</h1>
<p>Go 的并发模型是它最大的卖点之一...</p>
<!-- 完整正文,可被爬虫索引 -->
</article>
</body>
</html>
纯 HTML,没有 JavaScript 依赖。 Google、Bing、百度都能完整抓取。
读者看到的
SPA 模式加载,有搜索、有导航、有动画、有主题切换。完整的交互体验。
两套都不妥协。
内置 SEO 基础设施
RSS 2.0
https://your-blog.com/api/v1/blog/feed.xml
自动更新。RSS 阅读器订阅后,新文章自动推送。
Sitemap
https://your-blog.com/sitemap.xml
自动生成,包含所有已发布文章的 URL 和更新时间。提交给搜索引擎,加速收录。
robots.txt
https://your-blog.com/robots.txt
自动生成,告诉爬虫哪些可以抓、哪些不能抓。
JSON-LD 结构化数据
每篇文章的 <head> 里自动嵌入 JSON-LD 标记。搜索引擎用它来理解文章的类型、标题、发布时间、作者。
Google 搜索结果里可能出现富媒体摘要(Rich Snippet): 标题、发布时间、面包屑导航、评分等。
稳定 slug + SEO
配合 [[拖个文件进目录,就是发布了一篇博客]] 里提到的稳定 slug:
- URL 永远不变(改文件名、改分类都不影响)
- 搜索引擎收录的链接永远有效
- 别人分享的链接永远能打开
SEO 最怕的就是链接变。 稳定 slug 从根本上解决了这个问题。
和其他方案的对比
| | Hugo/Hexo | WordPress | 爱库录 | |---|---|---|---| | SEO 方式 | 静态 HTML | 动态渲染 + 插件 | SSR + SPA 双轨 | | 更新方式 | 重新构建 | 实时 | 实时 | | RSS | 手动配置 | 插件 | 内置 | | sitemap | 手动生成 | 插件 | 内置 | | 结构化数据 | 模板里写 | 插件 | 内置 JSON-LD | | 交互体验 | 弱 | 中 | 强(SPA) |
静态生成的 SEO 天然好,但交互弱。爱库录用双轨做到了「SEO 不输静态,交互不输 SPA」。
相关:
[[什么是爱库录:目录即站点,文件即文章]]— 了解产品整体理念。