点这里阅读目录
Prerender 服务能够为网络爬虫提供预先渲染的动态页面内容，解决了用 JavaScript 框架构建的 Web 站点不支持爬虫抓取的问题。本文详细描述了一种解决方案，尤其是提供了集成 Prerender 服务的 Docker 容器镜像。
如果你正在使用 AngularJS 构建一个面向大众消费者的应用，你肯定希望用户能把它分享到社交媒体上。对于特定的应用而言，丰富的社交分享差不多是最重要的营销渠道。所谓「丰富的社交分享」，是指像下面这样的分享：
可以看到， Facebook, Twitter 等社交站点能够获取非常丰富的内容，不仅限于网页标题和图片。为什么可以做到这一点？因为在网页 HTML 文档的head部分包含了有特别含义的元数据标记。像 Facebook 以及 Pinterest 和 Google+ 等社交站点能读取遵循 开放图协议标准的元数据，例如，
<head> <meta property="og:title" content="My Page" /> <meta property="og:description" content="A description of my page." /> <meta property="og:image" content="http://www.mysite.com/images/my_lovely_face.jpg" /> <!-- etc. --> </head>Twitter 也支持类似的机制，不过它用的元数据属性前缀是twitter:，而不是og:。
当用户在社交站点上分享一个 URL 时，社交站点会启动一个网络爬虫去抓取该页面的内容。网络爬虫首先在网页源文档中找出各种元数据标记，然后才会查看常规 HTML 元素的内容，例如，<head>标记和网页中的图像等。
用 AngularJS（以及其它 JavaScript 框架）开发的 Web 站点不支持爬虫的抓取
我已经在 Earlyclaim 站点的网页中添加了所有必需的遵循开放图协议标准的元数据标记。但是，当我把 Earlyclaim 站点的一个链接分享到 Facebook 时，显示的结果却是非常令人失望的：
导致如此糟糕的结果的原因很简单： 抓取网页时，网络爬虫并不会执行网页中的 JavaScript 代码。因此，爬虫抓取到的内容是这样的：
<head> <meta property="og:title" content="{{meta.title}} - earlyclaim.com" /> <meta property="og:description" content="{{meta.description}}" /> <meta property="og:image" content="{{meta.image}}" /> <!-- etc. --> </head>解决方案
解决方案的基本思想是：应用一种在服务器端执行的用户代理探测方法，识别出当前请求来自于社交站点的爬虫；此时，服务器不会像 处理浏览器请求那样返回一个 AngularJS 模板文件，而是重定向到一个服务器端生成的页面，页面中包含了希望提供的元数据标记以及正确填写的信息。
经过 Google 搜索，以及与其它创业公司 startypchile 的技术人员的讨论，我们发现了 prerender.io 服务，它能够预先渲染好动态页面的内容。这为问题的解决奠定了良好的开端。
Prerender 的开发者提供了很多 中间件， 还把 prerender 引擎开源，因为他们认为
我们相信搜索引擎优化（SEO）是一种权利，而非一种特权！
当然，如果你愿意，也可以付费使用他们提供的 Prerender 托管服务。
支撑 Earlyclaim 的基础设施是以 Docker 为基础构建的。为了集成 Prerender 服务，我们首先在 Docker Hub 中找出相关的几个容器镜像，然后进行试用，结果难以令人感到满意。
我们的需求包括：
这些也是我们自行构建容器镜像的原因！
为什么公开我们的解决方案
首先，我们信仰「协同智能」：
协同智能是多主体、分布式系统的特征，其中每个主体（人或者机器）都有唯一的位置，自主地为问题解决网络作贡献。在生态 系统中，有机体的协同自治使得演化成为可能。在自然生态系统中，每个有机体的唯一标识来自于自身的基因、环境以及它在生态系统中的行为和位置。自然生态系 统为设计下一代社交网络提供原则，使之能够支持协同智能、众包个人的专长、偏好以及在问题解决过程中的独特贡献。
- 摘自 维基百科我们的解决方案是建立在开源的 prerender.io 引擎 的基础之上：没有它，就不会有我们的解决方案。 Prerender 团队太棒了。
其次，同样重要的是，在与很多创业公司的开发者交流之后，我们了解到：他们很多人都在使用 AngularJS 或者其它框架构建 Web 应用，也需要解决搜索引擎优化/丰富的社交分享问题。然而，由于不知道解决方法，或者感觉解决起来太耗费时间，或许会影响更为重要的产品发布时间，他们暂 时搁置这个问题，留待以后解决。还有些开发者甚至没有意识到有这个问题，当从我们这里听说了之后，他们请求我们把解决方案分享出来。
我们相信这个方案能够加速整个开发进程，因为它解决了一个普遍的问题。很高兴能够分享这个方案。
实现
如果技术人员想把我们构建的容器镜像添加到自己的基础设施中，请参考 Docker Hub 上的文档：https://registry.hub.docker.co ... edis/
AngularJS 服务
如果是 AngularJS 应用，首先实现下面的代码：
‘use strict‘; !(function (window, document, undefined) { var getModule = function (angular) { return angular.module(‘seo‘, []) .run([ ‘$rootScope‘, function ($rootScope) { $rootScope.htmlReady = function () { $rootScope.$evalAsync(function () { // fire after $digest setTimeout(function () { // fire after DOM rendering if (typeof window.callPhantom === ‘function‘) { window.callPhantom(); } }, 0); }); }; } ]); }; if (typeof define === ‘function‘ && define.amd) { define([‘angular‘], getModule); } else { getModule(angular); } })(window, document);然后通过angular.module(‘youApp‘, [‘seo‘])调用。
结论
如果你使用我们的容器，觉得还不错，请一定告知我们（ @Earlyclaim）。
如果你觉得有人会对此感兴趣，请转发给他们（点击社交分享按钮）！
任何建议，请发推特并通知 @Earlyclaim ：非常期待您的观点和文字！
任何代码改进，请通过 GitHub 推送合并请求！
顺便说一句，我们热爱创业公司，我们热爱开发者，我们热爱社区！ 开放生态系统万岁！
原文：Get your Javascript website perfectly crawled with Docker （翻译：柳泉波 校对：佚名）
有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取
时间： 2024-10-19 05:59:12
有了 Docker，用 JavaScript 框架开发的 Web 站点也能很好地支持网络爬虫的内容抓取的相关文章
Python快速开发分布式搜索引擎Scrapy精讲—编写spiders爬虫文件循环抓取内容
编写spiders爬虫文件循环抓取内容 Request()方法,将指定的url地址添加到下载器下载页面,两个必须参数, 参数: url='url' callback=页面处理函数 使用时需要yield Request() parse.urljoin()方法,是urllib库下的方法,是自动url拼接,如果第二个参数的url地址是相对路径会自动与第一个参数拼接 # -*- coding: utf-8 -*- import scrapy from scrapy.http import Request
Python-在CentOS7上使用nginx+uwsgi部署Flask框架开发的Web项目
第一步:准备CentOS7服务器 此次部署我采用的是部署到本机的虚拟机环境中,所以先在VM上安装CentOS7.为了避免每次启动虚拟机服务器IP地址就发生改变,所以先配置静态IP,首先在VM workstation的菜单栏上找到虚拟网卡配置菜单,然后将adapter8的dhcp去掉,然后查看gateway(中文名网关).在centos中主要涉及一个文件的配置,在/etc/sysconfig/network_config/(网卡编号,类似cfg_eth0的文件),然后编辑5个地方: 1.BOOTP
使用Struts框架的Java Web项目中的两个Session的区别和常见的Session取值为空的错误
我的百度知道回答,感觉这个知识很有意义,专门贴出来. 不过还有待验证的地方,就是 ActionContext.getContext().getSession("name", "Tom"); //如果在JSP中通过 EL 或者 Struts2 标签怎么显示? 以下是回答正文. 很多初学Java Web的同学因为使用 Strut2框架而分不清两个 Session的区别. 1. JSP/Servlety有个原生的 session 对象,这是9大内置对象中的一个,书上写
【搜索引擎Jediael开发笔记1】搜索引擎初步介绍及网络爬虫
详细可参考 (1)书箱:<这就是搜索引擎><自己动手写网络爬虫><解密搜索引擎打桩实践> (2)[搜索引擎基础知识1]搜索引擎的技术架构 (3)[搜索引擎基础知识2]网络爬虫的介绍 (一)搜索引擎的开发一般可分为以下三大部分 1.数据采集层:一般使用爬虫获取互联网的数据,重要的开源项目有Heritrxi 2.数据分析处理层:将从互联网上获取到的数据进行提取归类.分词.语义分析得出索引得内容,等待用户查询使用,重要的开源项目有Lucene 3.视图层:也用户的交互界面,如
常用JavaScript 框架比较
简介 JavaScript 是面向对象的脚本语言,长期以来用作 Web 浏览器应用程序的客户端脚本接口.JavaScript 让 Web 开发人员能以编程方式处理 Web 页面上的对象,并提供了一个能够动态操作这些对象的平台.在最初引入 JavaScript 时,通常只用于提供 Web 页面上的一些不重要的特性,如时钟功能和浏览器状态栏中的滚动文本等.另一个常见的特性是 "rolloverlink",就是当用户将鼠标移到图片或文本链接上时,图片或文本链接的颜色会改变.然而,近年来,随着
JavaScript 面向对象开发知识基础总结
JavaScript 面向对象开发知识基础总结 最近看了两本书,书中有些内容对自己还是很新的,有些内容是之前自己理解不够深的,所以拿出来总结一下,这两本书的名字如下: JavaScript 面向对象精要 JavaScript 启示录 如果对于 JavaScript 面向对象编程理解不够深的话,第一本书还是强烈推荐的.第二本书比较适合初中级的开发者阅读.对各种知识点都有代码示例.内容中规中矩. 1.JavaScript 中的变量类型和类型检测 C#和Java等编程语言用栈存储原始类型,用堆存储引用
【JAVA系列】Google爬虫如何抓取JavaScript的？
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[JAVA系列]Google爬虫如何抓取JavaScript的? 前言部分 大家可以关注我的公众号,公众号里的排版更好,阅读更舒适. 正文部分 我们测试了谷歌爬虫是如何抓取 JavaScript,下面就是我们从中学习到的知识. 认为 Google 不能处理 JavaScript ?再想想吧.Audette Audette 分享了一系列测试结果,他
分享我开发一系列web工具
分享我开发一系列web工具1.搜索工具:支持谷歌.冲鸭.百度,或许是很好的搜索工具2.翻译工具:支持谷歌.百度.有道,欢迎体验对比反馈,希望能做的更好3.今日新闻:每天2小时自动更新,关心国家大事,欢迎提意见,把这个功能做的更好,更合乎大家需求4.娱乐开心:笑话,英语短语,拍打养生,边打发时间还能边学习5.说大话,开心大话聊天吧6.需求登记表,欢迎提出您的需求7.可以收藏或者把这个URL地址设置为 手机浏览器首页,帮助你更好工作与娱乐的工具 https://go.readmorejoy.com
如何在程序开发项目中选择合适的 JavaScript 框架，节省时间和成本的9款极佳的JavaScript框架介绍
从技术上来看,iOS,Android 和 Windows Phone 上的移动应用是使用不同的程序语言开发的,iOS 应用使用 Objective-C,Android 应用使用 Java,而 Windows Phone 应用使用 .NET. .随着 JavaScript,CSS 和 HTML 知识技能的提升,相信你也可以构建一个超赞的移动应用.在这篇博客里,我们将会介绍一些极好的 JavaScript 移动应用程序开发框架. 说到网络开发,就不得不说 JavaScript,这是一款很有前途的程序