AngularJS 百度 SEO:5步搞定单页应用收录
做过 AngularJS 项目的人多半都踩过一个坑:站点在浏览器里跑得好好的,内容也丰富,可就是迟迟不被百度收录,用 site 指令一查只有首页孤零零一条。问题往往不在内容本身,而在"渲染时机"。下面这套流程按顺序做下来,能帮你把单页应用一点点喂给百度蜘蛛。
一、先弄懂 AngularJS 的百度 SEO 难在哪
AngularJS(这里指 1.x)是典型的客户端渲染框架。服务器返回的其实是一个近乎空白的 HTML 骨架,真正的正文要等浏览器下载并执行完 JavaScript、再发 AJAX 请求拿到数据后才拼出来。
谷歌蜘蛛这些年对 JavaScript 的执行能力越来越强,但百度蜘蛛在这方面一直偏保守。它抓取你的页面时,很可能只看到一个空的 ng-view 容器,里面一个字都没有。没有文字,自然就没什么可收录、可参与排名的东西。这就是所有麻烦的根源。
二、第一步:先诊断,别急着改代码
动手之前先确认问题到底出在哪,方法很简单:
- 右键"查看网页源代码"(注意不是"检查/审查元素"),看看正文文字在不在原始 HTML 里。如果只有一堆脚本标签和空 div,说明蜘蛛大概率也看不到。
- 在百度搜索框输入 site:你的域名,数一数被收录的页数,再和站点实际页面数量对比。
- 登录百度搜索资源平台,用"抓取诊断"工具抓一个内页,直接看百度视角下的页面内容。
如果这几步都指向"蜘蛛看到的是空壳",那就可以进入下一步选方案了。
三、核心步骤:选对渲染方案
这是整件事的胜负手。主流做法有两条路,按团队情况二选一即可,不必都上。
方案 A:预渲染,改动最小
思路是在服务器前面加一层中间件,专门识别蜘蛛的 User-Agent。真人访问时照常返回单页应用;一旦发现是蜘蛛来了,就把提前用无头浏览器跑好的、带完整正文的静态 HTML 快照丢给它。
这种方式对现有代码几乎零侵入,特别适合已经上线、不想大改的老项目。代价是要额外维护一套快照生成和缓存机制,内容更新后记得让快照同步刷新,否则蜘蛛吃到的是旧内容。
方案 B:服务端渲染或静态化,一劳永逸
如果项目还在早期,或愿意做较大改造,可以考虑把首屏直接在服务端渲染成完整 HTML 返回,或者把变动不频繁的页面直接生成静态页。这样无论蜘蛛还是真人,拿到的第一份 HTML 里就有完整正文,收录最稳。
需要提醒的是,AngularJS 1.x 本身没有官方的 SSR 方案,真要走这条路,往往意味着要借助额外工具改造,甚至评估是否迁移到更现代的框架。这属于要认真权衡的技术决策,别脑子一热就推翻重来。
四、别忽略 URL 与 TDK 这两个细节
把 hashbang 换成正常路径
AngularJS 默认路由带着井号,形如 域名/#!/article/1。这类地址对百度并不友好,蜘蛛容易把井号后面的部分忽略掉。开启 html5Mode,再配合服务器端的 URL 重写,把地址变成干净的 域名/article/1 形式,收录概率会明显提升。
给每个页面配上独立的 TDK
单页应用最常见的毛病,是所有页面共用一套标题和描述。要在路由切换时动态更新每个页面的 title、keywords、description,让文章页有文章页的标题,列表页有列表页的标题。标题里自然地带上核心关键词,描述写成一句通顺的话,而不是关键词硬堆。
五、最后一步:主动喂给百度并盯住效果
渲染问题解决后,别干等着蜘蛛自己爬,主动出击效率更高:
- 生成一份 sitemap.xml,把所有希望被收录的干净 URL 列进去,提交到百度搜索资源平台。
- 用平台里的"主动推送"接口,在文章一发布就把新链接推给百度,缩短被发现的时间。
- 页面里合理使用 canonical 标签,避免同一内容因参数不同被判成重复页。
- 提交后每隔几天用 site 指令和抓取诊断复查一次,观察收录数量的变化趋势,再针对性调整。
整套流程的核心其实就一句话:想尽办法让百度蜘蛛在第一份 HTML 里就读到完整正文。把"渲染时机"这个根子上的问题解决了,剩下的 URL、TDK、推送都只是水到渠成的收尾。收录本身是个需要耐心的过程,方案落地后给百度一点时间,持续观察再迭代。