使用HeadlessChrome做单页应用SEO

本文作者:ivweb 吴浩麟

随着react、vue、angular等前端框架的流行越来越多的web应用变成了单页应用,它们的特点是异步拉取数据在浏览器中渲染出HTML。使用这些框架极大的提升web用户体验和开发效率的同时缺带来一个新问题,那就是这样的网页无法被搜索引擎收录。虽然这些web框架支持服务端渲染,但这可能又会增加开发成本。

有没有一个可用于任何单页应用的SEO解决方案,让我们不用对代码做改变保持原有的开发效率?chrome-render可以帮我们做到这点,它通过控制HeadlessChrome渲染出最终的HTML返回给爬虫来实现。

HeadlessChrome介绍

前不久chrome团队宣布chrome支持headless模式,HeadlessChrome支持chrome所具有的所有功能只不过因为不显示界面而更快资源占用更小。相比于之前的phantomjs(作者因为HeadlessChrome的推出而宣布停止维护)chrome的优势在于它又一个很强的爹(google)会一直维护它优化它,并且chrome在用户量、体验、速度、稳定性都是第一的,所以我认为HeadlessChrome会渐渐替代之前所有的HeadlessBrowser方案。

如何操控HeadlessChrome

既然HeadlessChrome是以无界面模式运行的,那要怎么控制它和它交互? chrome提供了远程控制接口,目前可以通过chrome-remote-interface来用js代码向chrome发送命令进行交互。在启动chrome的时候要开启远程控制接口,然后通过 chrome-remote-interface 连接到chrome后再通过协议控制chrome。具体操作见文档:

chrome-render原理与实践

原理

chrome-render先会通过chrome-runner以headless模式启动和守护你操作上的chrome,再通过chrome-remote-interface操控chrome去访问需要被SEO的网页让chrome运行这个网页,等到包含数据的HTML被渲染出来时读取当前网页DOM转换成字符串后返回。

怎么知道你的网页什么时候已经渲染出包含数据的HTML了可以返回了呢?为了提升chrome-render效率,默认会在domContentEventFired时返回。对于复杂的场景还可以通过开启chrome-render的useReady选项,等到网页里调用了window.chromeRenderReady()时返回。

只渲染出了HTML还不够我们还需要检测出来着搜索引擎爬虫的访问,如果请求来着爬虫就返回chrome-render渲染后的HTML否则返回正常的单页应用所需HTML。

综上,整体架构如下:

实践

只需以下几行简单代码就可做到:

const ChromeRender = require('chrome-render');
ChromeRender.new().then(async(chromeRender)=>{
    const htmlString = await chromeRender.render({
       url: 'http://qq.com',
    });
});

chrome-render只是做了渲染出HTML的工作,要实现SEO还需要和web服务器集成。为了方便大家使用我做了一个koa中间件koa-seo,要集成到你现有的项目很简单,如下:

 const seoMiddleware = require('koa-seo');
const app = new Koa();
app.use(seoMiddleware());

通过以上简单的两步,你的单页应用就被SEO了。

应用场景扩展

chrome-render除了用于通用SEO解决方案其实可以用于通用服务端渲染,因为目的都是渲染出最终的HTML再返回。针对通用服务端渲染我也做了一个koa中间件koa-chrome-render。使用chrome-render做服务端渲染的

优势在于:

  • 通用,适用于所有单页应用
  • 对原有代码几乎无改动,最多再合适的地方加个window.chromeRenderReady(),保持原有开发效率

缺点在于:

  • 和react、vue等只带的服务端渲染相比性能低(经我测试大约 200ms vs 60ms)
  • chrome-render渲染时占用资源高,一次渲染大约占用25Mb内存,当请求量大时服务器可能扛不住。但是可以通过缓存渲染结果优化。

总结

大家可能会说这个很像prerender.io,没错思路是一样的,chrome-render的优势在于:

  • chrome-render开源可自己部署,prerender要收费是商业产品
  • prerender基于已经停止维护的phantomjs

本文中所提到的相关项目都是开源的并且有详细的使用文档,它们的文档链接如下:

喜欢的给个star,希望大家和我一起来改进它们让它们更强大。

阅读原文

原文链接:http://ivweb.io/topic/59524c2498bb3850f554d9b8

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯NEXT学位

前端页面热更新实现方案

3875
来自专栏腾讯云API

【问题汇总】云API产品常见问题汇总

问题:在使用云API的时候,频繁请求接口,指不定哪次就会发生失败,提示鉴权错误等,是不是自己的SecretId被封了?

1716
来自专栏Keegan小钢

App项目实战之路(二):API篇

概述篇发布出去后,收到很多人的大力支持,也收到了几点关于功能需求的建议,主要在于几点:

552
来自专栏后端之路

SpringBoot初识

背景 现在的微服务化越来越流行的今天 SpringCloud作为Java届逐渐流行并且不可忽视的技术栈呗越来越多的公司所采用。 既然如此SpringCloud的...

2617
来自专栏JMCui

Hybris安装和各个Extention简单介绍

前言:突然想好好梳理一下这几个月所学的内容了,顺便让自己的知识有一个系统的框架。这种安装仅仅适用于开发环境,不适于生产环境。 一、  安装JDK 请安装最新的O...

35111
来自专栏V站

WordPress丨如何利用.htaccess文件进行缓存?

将以上代码一字不漏的扔进website中的 .htaccess文件,规律是以秒计算,自行修改!

1414
来自专栏依乐祝

.NET Core实战项目之CMS 第七章 设计篇-用户权限极简设计全过程

接下来我们就正式进入.NET Core实战项目之CMS的设计篇了。在设计篇呢,我们需要对数据库进行设计,而数据库的设计又分为功能部分设计以及用户权限部分设计。作...

432
来自专栏存储

Storm集群搭建的错误分析

第一时间关注程序猿(媛)身边的故事 首先 storm 集群的搭建不再赘述, 网上有很多, 在此推荐一个: http://blog.csdn.net/lzm134...

1695
来自专栏容器云生态

shel脚本批量添加用户,首次登陆强制修改密码

企业里常用到脚本来批量管理很多用户,这些也可以理解为自动化管理。为企业之后自动运维部署做准备。 #!/bin/bash #description:userad...

1995
来自专栏大史住在大前端

webpack4.0各个击破(10)—— Integration篇

webpack在工具链中的角色定位是非常清晰的,那么为了与其他流程进行合作,就需要使用任务管理工具来启动webpack,本文介绍两种常见的方法。

703

扫码关注云+社区