前段时间做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. numpy和pandas-数据分析模块

    应用:1.数据分析 2.深度学习 3.机器学习 运算速度快:numpy 和 pandas 都是采用 C 语言编写, pandas 又是基于 numpy, 是 numpy 的升级版本. 消耗资源少:采用 ...

  2. MVC 微信网页授权 获取 OpenId

    最近开发微信公众平台,做下记录,以前也开发过,这次开发又给忘了,搞了半天,还是做个笔记为好. 注意框架为MVC 开发微信公众平台.场景为,在模板页中获取用户openid,想要进行验证的页面,集成模板页 ...

  3. 4.自定义view-进度条控件

    1.效果 2.实现原理 画圆,画圆弧,画文字 外部控制进度,通过invalidate()方法更新 核心代码: @Override protected void onDraw(Canvas canvas ...

  4. java斐波纳契数列

    //斐波纳契数列,又称黄金分割数列,指的是这样一个数列:1.1.2.3.5.8.13.21.-- 这个数列从第三项开始,每一项都等于前两项之和. public class DiGui { public ...

  5. nginx二级域名配置[CentOS]

    目录 背景 域名配置 服务器配置 Nginx配置 页面访问生效 背景 只有一台云服务器,部署了自己写的后端管理系统,又需要部署下自己的个人博客平台,但是只有一个域名,想要合理的利用下二级域名. 域名配 ...

  6. File对象目录列表器

    /****File对象即能代表一个文件又能代表一组目录下的特定文件集:如果它代表一组文件那可以用list方法返回一组字符数组,数组内的对象是该目录下的符合条件的每个文件. 为什么说符合条件下这个前提呢 ...

  7. [Skill] git下载助手

    缘由 某些时候需要下载git项目中的某个独立的文件或者文件夹下的内容,克隆全部速度过于慢 搜索下发现有开源的实现,特此记录下 方案 国内不便于fq 源码 服务地址 国外原作者 源码 服务地址 使用方法 ...

  8. c3p0连接池使用:使用c3p0数据源步骤以及完成jdbcUtills类

    1.使用c3p0数据源步骤): a.下载c3p0jar,官网下载:https://sourceforge.net/projects/c3p0/: b.导入jar包时,应该导入下面两个包: c.编写c3 ...

  9. SpringCloud | 通过电商业务场景让你彻底明白SpringCloud核心组件的底层原理

    本文分为两个部分: Spring Cloud"全家桶"简单介绍. 通过实际电商业务场景,让你彻底明白Spring Cloud几个核心组件的底层原理. Spring Cloud介绍 ...

  10. #2020征文-TV# Tab切换选项卡同时更换内容

    Tab选项卡是应用程序中最最常用,也是最普遍存在的一种布局形态,无论是在PC端还是在移动端,都是一种清晰明了,层级关系简单的,能够使用户明确所处位置.Tab选项卡可以置于页面的底部,比如微信底部选项卡 ...