玩Google Webmasters的可能会有这种经历。自己开发的app用了Vue/React,写完后用Fetch as Google一爬傻眼了,爬不到东西。
网上搜解决方案出来的都是一堆额外的SSR框架,要上node,还看起来麻烦的要死。对于已经完成的项目,为了让搜索引擎爬虫能爬几个页面,又是改前端代码,又是改后端语言真的是郁闷。
一种迅雷不及掩耳盗铃式的解决方案:
- 判断浏览者是人还是爬虫
a. 是人,直接走正常html + javascript渲染流程
b. 是爬虫,去[2] - 缓存文件夹找渲染好的html文件
a. 存在,把渲染好的html文件直接丢给爬虫
b. 不存在,去[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代码给去掉,这样爬虫就可以正常解析了