玩Google Webmasters的可能会有这种经历。自己开发的app用了Vue/React,写完后用Fetch as Google一爬傻眼了,爬不到东西。

网上搜解决方案出来的都是一堆额外的SSR框架,要上node,还看起来麻烦的要死。对于已经完成的项目,为了让搜索引擎爬虫能爬几个页面,又是改前端代码,又是改后端语言真的是郁闷。

一种迅雷不及掩耳盗铃式的解决方案:

  1. 判断浏览者是人还是爬虫
    a. 是人,直接走正常html + javascript渲染流程
    b. 是爬虫,去[2]
  2. 缓存文件夹找渲染好的html文件
    a. 存在,把渲染好的html文件直接丢给爬虫
    b. 不存在,去[3]
  3. 服务器开命令行浏览器访问同样地址,将渲染完成后的页面生成字符串丢给爬虫,并将字符串存储为html文件存放到缓存文件夹

如此一来,用户仍旧按原方式访问应用,而爬虫爬到的是已经渲染好的页面,这样就不会出现爬虫空白页面的情况了。当然在执行这套方案的时候有两个要点:

  • 关于命令行浏览器。Headless Browser很多,但不是所有的都能用。很多地方说用PhantomJs来做,这个浏览器其实是不靠谱的。一来需要额外写个setTimeout的脚本来等待页面渲染完成,二来目前该浏览器不支持ES6,如果javascript里有不支持的语法会导致渲染失败。而使用chrome浏览器的话,语法支持没问题,而且只需一行代码即可搞定

    google-chrome --headless --disable-gpu --dump-dom --no-sandbox --window-size=1280,1696
  • 关于生成的字符串。用dump dom的方式生成的字符串是不能直接使用的,因为字符串中仍然包含用来客户端渲染的javascript代码,爬虫爬到后会尝试执行,然后又得出爬出了一个空页面。对于渲染完成后的字符串,需要用正则或DOM把其中的javascript代码给去掉,这样爬虫就可以正常解析了

PHP实现,包括缓存策略共50行代码

载入中...
Baozier Baozier

1 声望

发布于专栏

搬砖道人

JavaScript, PHP

0 人关注