前段时间做SEO的优化,使用的是GoogleChrome/rendertron,发现这个安装部署的时候还是会有一些要注意的地方,做个记录

为什么要使用rendertron

目前很多网站都是使用 vue、recat等框架开发的网站,一般都是在服务器上只有一个index.html,index.html引入JS,通过JS在客户端的浏览器上渲染出页面。

如果是搜索引擎的爬虫,它不像浏览器可以直接渲染,它只能拿到一段无意义的JS代码,这些代码对SEO的收录没有任何意义。

所以Google就做了rendertron。流程就变成这样了。

rendertron服务会调用Chromium浏览器,浏览器会将渲染结果返回给rendertron,然后rendertron会将结果返回给爬虫客户端

rendertron安装

安装流程

git clone https://github.com/GoogleChrome/rendertron.git
cd rendertron
npm install

安装的时候发现rendertron安装浏览器的时候,有时候由于墙的原因,有时候由于网络时长的问题,非常容易安装失败,所以需要忽略浏览器的安装,安装完rendertron的依赖之后再安装浏览器。

env PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true
npm install --loglevel verbose

安装完其他依赖之后再去安装浏览器。

先找到Chromium的版本

在以下文件中

node_modules/puppeteer/lib/esm/puppeteer/revisions.js

export const PUPPETEER_REVISIONS = {
chromium: '818858',
firefox: 'latest',
};

需要chromium 的版本号 818858

然后去 https://npm.taobao.org/mirrors/chromium-browser-snapshots/

下载现在相应的版本。

我的系统是centos,所以我下载的就是

https://npm.taobao.org/mirrors/chromium-browser-snapshots/Linux_x64/818858/chrome-linux.zip

下载完成之后解压,拷贝到相应系统的地址,我这边的地址就是这里

node_modules/puppeteer/.local-chromium/linux-818858/chrome-linux
win64的可能是这样的
node_modules/puppeteer/.local-chromium/win64-818858/chrome-win32 规则是这样的
node_modules/puppeteer/.local-chromium/系统-版本号/下载解压后的文件夹

这些都做完之后直接编译运行

npm run build
npm run start

具体的使用和安装可以看下官方的说明

https://github.com/GoogleChrome/rendertron

也可以先试用下网页版的

https://render-tron.appspot.com/

SEO大杀器rendertron安装的更多相关文章

  1. 单页面(如react,vue)网站的服务器渲染 SSR 之 SEO 大杀器 Rendertron

    单页面网站,比如vue.recat框架的网站,一般都是直接从服务器推送index.html,再根据自身路由通过js在客户端浏览器渲染出完整的html页面. 但是搜索引擎的爬虫可没有这么智能(实际上go ...

  2. 使用docker-compose 大杀器来部署服务 上

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  3. 使用docker-compose 大杀器来部署服务 上(转)

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  4. Postgresql-模糊匹配大杀器

    # Postgresql-模糊匹配大杀器 ## 问题背景 随着pg越来越强大,abase目前已经升级到5.0(postgresql10.4),目前abase5.0继承了全文检索插件(zhparser) ...

  5. [NewLife.XCode]反向工程(自动建表建库大杀器)

    NewLife.XCode是一个有10多年历史的开源数据中间件,支持nfx/netstandard,由新生命团队(2002~2019)开发完成并维护至今,以下简称XCode. 整个系列教程会大量结合示 ...

  6. [转]使用docker-compose 大杀器来部署服务 上

    本文转自:https://www.cnblogs.com/neptunemoon/p/6512121.html 使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker ...

  7. 使用docker-compose 大杀器来部署服务

    使用docker-compose 大杀器来部署服务 上 我们都听过或者用过 docker,然而使用方式却是仅仅用手动的方式,这样去操作 docker 还是很原始. 好吧,可能在小白的眼中噼里啪啦的对着 ...

  8. 【爬虫】大杀器——phantomJS+selenium

    [爬虫]大杀器——phantomJS+selenium 视频地址 江湖上有一个传说,得倚天屠龙者可称霸武林.爬虫中也有两个大杀器,他们结合在一起时,无往不利,不管你静态网站还是动态网站,通吃. pha ...

  9. Python中的网络扫描大杀器Scapy初探

    Python中的网络扫描大杀器Scapy初探     最近经历了Twisted的打击,这个网络编程实在看不懂,都摸不透它的内在逻辑,看来网络编程不是那么好弄的.还好,看到了scapy,这种网络的大杀器 ...

随机推荐

  1. [日常摸鱼]bzoj1444 [JSOI2009]有趣的游戏——AC自动机+矩阵

    今天学校跳蚤市场摆摊聚众吸毒打call,东西卖了一百多好开心_(:з」∠)_ (然后大家中午就去吃了一顿好的x) 下午听演讲然后现在来填坑orz(其实是昨晚的坑) 题目:bzoj1444 先用字符串构 ...

  2. LightningChart解决方案:XY和3D图表(Polymer Char GPC-IR®-工程案例)

    LightningChart解决方案:XY和3D图表(Polymer Char GPC-IR-工程案例) 所在行业:石化公司成立时间:1992年LightningChart解决方案:XY和3D图表 P ...

  3. winform关闭登录窗体打开主窗体的方法

    实际使用 Program.cs代码 //声明一个线程 private static System.Threading.Mutex mutex; /// <summary> /// 应用程序 ...

  4. 十个最常用的JVM 配置参数

    1.-Xms:初始堆大小.只要启动,就占用的堆大小. 2.-Xmx:最大堆大小.java.lang.OutOfMemoryError:Java heap这个错误可以通过配置-Xms和-Xmx参数来设置 ...

  5. C#——线程总结

    #线程详解 1. Thread基础之从 WinDbg 角度理解你必须知道的时间和空间上的开销 一:空间上的开销 1.thread本身来说就是操作系统的概念... <1> thread的内核 ...

  6. ROS开源小车TurtleBot3详情介绍(Burger)

    您为什么要选择ROS开源智能小车 ROS(RobotOperating System,机器人操作系统)是目前世界上更主流更多人使用的的机器人开源操作系统.它可以提供操作系统应有的服务,包括硬件抽象,底 ...

  7. js 中的 DOM 和 BOM

    BOM浏览器对象模型   概念:Browser Object Model   组成:   Window:浏览器窗口对象   Navigator:浏览器对象   screen:显示器屏幕对象   His ...

  8. Lesson_strange_words5

    certain 一些 the company's 公司的 implement 实现 plane 平面 sluggishly 迟缓地,缓慢地 frustrated 懊恼的 profiler 分析器,分析 ...

  9. HSRP技术(热备份)学习总结

    热备份学习视频https://www.bilibili.com/video/BV1i7411G7vm?p=78 • 命令:        ○ int fa0/x        ○ standby 1 ...

  10. 【Flutter】功能型组件之跨组件状态共享

    前言   在Flutter开发中,状态管理是一个永恒的话题.   一般的原则是:如果状态是组件私有的,则应该由组件自己管理:如果状态要跨组件共享,则该状态应该由各个组件共同的父元素来管理.   对于组 ...