用PhantomJS来给AJAX站点做SEO优化

腾讯问卷所有动态内容,全部由Ajax接口提供。

众所周知,大部分的搜索引擎爬虫都不会执行JS,也就是说,如果页面内容由Ajax返回的话,搜索引擎是爬取不到部分内容的,也就无从做SEO了。

先来看看效果

QQ20160321-1

去年一整年,搜索引擎收录都少得可怜。

更致命的是,被收录的页面,其搜索引擎里面显示的标题是最原始的html标题,权重如此高的地方,却被收录了一个没什么用的标题。

在去年年底完成实施了预渲染服务后,收录量蹭蹭蹭的起来了,并且收录的标题也都全部正常了。

而这所有的一切,除了Nginx接入层的配置是需要改动业务代码外,其他全部都是旁路机制。也就是说,自己做一套,可以给所有同类型业务共用,同时不会影响现有业务的任何代码任何流程。

PhantomJS来解围

Ajax无法做SEO这个问题,困扰了我很久,后来发现PhantomJS这东西能在服务端解析HTML,瞬间这个问题不再是问题。

PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast andnative support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

准备一个PhantomJS任务脚本

这里我命名为spider.js。

通过PhantomJS命令直接执行即可在终端中看到渲染后的html结构

命令服务化

什么意思呢,因为上面是一个命令,没法很好的响应搜索引擎爬虫的请求,估我们要把他服务化。

PhantomJS自带一个Web Server Module,但总是不稳定,如前面文章所说时不时会假死。

我们就通过Node给他起一个简单的Web服务。

旁路服务

我们现在已经有了一个能跑预渲染的Web服务了,剩下就是要将搜索引擎爬虫的流量导入到这个预渲染的服务中,同时把结果再返回给搜索引擎爬虫。

我们使用Nginx这个接入层利器即可轻松解决这个问题。

这个栗子里面仅仅对百度爬虫做了处理,可以自行把爬虫都补完整。

Free

说了这么多,我突然觉得这篇文章非常值钱。

因为,国外也有专门的服务端预渲染服务了,但他们统统要收费。

你可以根据本文的思路,自行部署一套旁路渲染服务。

附上一份新鲜收集的爬虫UA列表

  • 360 【文档】
    • 360Spider
    • HaoSouSpider
    • 360Spider-Image
    • 360Spider-Video
  • Baidu 【文档】
    • Baiduspider
  • Google 【文档】
    • Googlebot
    • Googlebot-News
    • Googlebot-Video
    • Googlebot-Mobile
  • Sogou 【文档】
    • Sogou web spider
    • Sogou inst spider
    • Sogou Spider
  • Bingbot【文档
    • bingbot
    • msnbot
    • msnbot-media
    • adidxbot
    • BingPreview
  • Binyan Zhao

    好好好,也用上这个了。但是目前是直接用 lua 解析 shell,结果阻塞了nginx进程。。。正要看看要不要在服务器弄个 nodejs

    • nodejs 不是重点~
      可以尝试把有阻塞行为的进程,单独部署,保持接入层的 nginx 轻量稳定,用 upstream 等方式再串起来。这样就算发生阻塞了,也不会影响正常用户访问

      • Binyan Zhao

        嗯是的,重点从 nginx 中转移到 upstream 服务器避免阻塞。

        我是觉得恰好用 node 很方便,我把内容整理了一下放到 github 了,顺便修改了一些内容。https://github.com/itbdw/server-render-javascript

  • morning

    牛!

  • >> onResourceReceived
    >> 如果HTTP回应非常大,分成多个数据块发送,onResourceReceived会在收到每个数据块时触发回调函数。

    这样的,文中的计数方式会有问题呀?

    • libo

      page.open()里面的成功回调,的确会受到chunked影响,onResourceReceived则没有测试过。

      如果确认也会被chunked干扰,可以添加res.stage判断

  • jk2K

    竟然还可以利用 phantomjs 这样做,受教了,谢谢

  • Dadait

    以前ASP时代,有个病毒也是类似原理,spider来抓时,全部给的是一些垃圾连接,用户浏览器打开时,又是正常内容。

    导致网站管理员很长时间内都不知道自己网站被黑了。