使用AngularJS框架的网站,网页详细内容都是浏览器通过XHR方式动态获取再渲染出来的,用户可以看到渲染后的完整网页,搜索引擎却看不到——如果不做特殊处理的话,目前的搜索引擎只会抓取到一个AngularJS的基本HTML框架。那么,如何SEO呢?

基本原理其实很简单:对于正常用户的访问,服务器响应AngularJS应用框架;对于搜索引擎的访问,则响应专门针对SEO的HTML页面(而不是AngularJS应用)。也就是说,SEO还是像普通网站那样,在服务器端处理的。

以jsGen为例,jsGen服务器端使用的是node.js,node.js通过分析HTTP请求头的User Agent,来判断访问请求是正常用户还是搜索引擎。jsGen中相应判断代码位于根目录的app.js中,代码如下:

...
} else if (jsGen.robot.reg.test(req.useragent)) {
    jsGen.api.article.robot(req, res, dm);
} else {
...

jsGen默认配置的搜索引擎User Agent标识符有:

'Baiduspider|Googlebot|BingBot|Slurp!|MSNBot|YoudaoBot|JikeSpider|Sosospider' +
'|360Spider|Sogou web spider|Sogou inst spider'

这个可以在管理后台中配置。

比如访问 http://angularjs.cn/A001,node.js判断是正常用户,则直接响应index.html——AngularJS应用的入口文件,用户浏览器装载完AngularJS后会自动分析请求网址,然后根据路由表做相应处理——这里,就是切换到文章详情页并获取文章A001的详细内容,获取到后即渲染出来呈现给用户。

如果node.js判断是搜索引擎访问,则用jsGen.api.article.robot()函数处理。该函数使用ejs模板引擎,把文章A001的数据填充到SEO专用ejs模板中,再响应给搜索引擎。目前jsGen的SEO模板很简单:当搜索引擎访问首页时,响应最新文章列表、热门文章列表和热门标签;搜索引擎访问某文章时,则响应该文章的详细信息,包括评论、作者信息等。当然,网页meta中的title、keywords和description是少不了的。至于其它SEO技巧,就看各位如何发挥了。

想看SEO页面效果的朋友,可以查看http://angularjs.cn/的百度快照。