前段时间做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. create-react-app 基于ts项目,使用react-router-dom搭建项目

    准备工作 来个react项目 create-react-app 基于TS的项目 ts项目安装后 删除node_modules,重新 yarn install, 不然jsx会报错 安装React-rou ...

  2. 仵航说 前后端分离,文件上传下载(springBoot+vue+elementUI)仵老大

    1.介绍 ​ 本文主要是介绍前后端分离的上传下载,后端使用的是SpringBoot,持久层用的是mybatis-plus,前端用的Vue,UI用的elementUI,测试了一下,文本,图片,excel ...

  3. Python高级语法-import导入-sys.path(4.4.1)

    @ 目录 1.说明 2.代码 关于作者 1.说明 在开发程序的过程中,往往使用sys.path去验证下导入的目录,返回的是列表 先后顺序,就是扫描的先后顺序 ,也可以加入搜索路径 import有个特点 ...

  4. 个人微信公众号搭建Python实现 -开发配置和微信服务器转入-配置说明(14.1.2)

    @ 目录 1.查看基本配置 2.修改服务器配置 3.当上面都配置好,点击提交 4.配置如下 1.查看基本配置 登录到微信公众号控制面板后点击基本配置 这里要讲的就是订阅号 前往注册微信公众号 2.修改 ...

  5. ASP.NET中二进制流下载文件时进度条的使用

    说明 在下载大文件时,页面会进入假死状态,于是加上一个进度条以标识后台程序正在运行. 目前,做的进度条并不是实时的,并不会根据程序执行的进度正确显示. 目前是将进度条定时加载到90%,然后停止,等待后 ...

  6. 函数进阶· 第3篇《常用内置函数filter()、map()、zip(),怎么用的呢?》

    坚持原创输出,点击蓝字关注我吧 作者:清菡 博客:oschina.云+社区.知乎等各大平台都有. 由于微信公众号推送改为了信息流的形式,防止走丢,请给加个星标 ,你就可以第一时间接收到本公众号的推送! ...

  7. 推荐使用并手写实现redux-actions原理

    @ 目录 一.前言 二.介绍 2.1 创建action 2.2 reducer 2.3 触发action 三. 认识与手写createAction() 3.1 用法 3.2 原理实现 四.认识hand ...

  8. [leetcode]39combinationsum回溯法找几个数的和为目标值

    import java.util.ArrayList; import java.util.Arrays; import java.util.List; /** * Given a set of can ...

  9. JavaDailyReports10_10

    1.4.2 键盘事件的处理 KeyListener  接口实现了处理键盘事件      KeyEvent 对象描述键盘事件的相关信息. KeyListener 接口有三个方法:KeyPressed K ...

  10. Liunx运维(八)-LIunx磁盘与文件系统管理命令

    文档目录: 一.fdisk:磁盘分区工具 二.partprobe:更新内核的硬盘分区表信息 三.tune2fs:调整ext2/ext3/ext4文件系统参数 四.parted:磁盘分区工具 五.mkf ...