在使用 angularJS 开发网站时,您是否必须在开始处理您的网站之前担心网络爬虫,或者您可以将其推迟到网站完成之前。
例如,我读过 HTML 快照是一个很好的解决方案。如果您选择这样做,您是否能够在编写网站代码后实现它,或者您是否必须基于这种功能创建网站。
我认为在项目开始时考虑策略并在接近项目结束时实施它是很好的。
我们在我工作的公司遇到了问题。
在所有情况下,您都需要回答对端点的 GET 请求,例如
...?_escaped_fragment_=/home
什么时候,比如 Google 或 Bing,会抓取页面
...#/home
有关详细信息,请参阅 Google 官方文档。
问题是你将如何填充资源的内容
...?_escaped_fragment_=:path
有不同的策略:
每次爬虫请求资源时,使用 PhantomJS 生成动态快照
这包括在运行时生成 PhantomJS 进程,将生成的 HTML 页面的内容重定向到输出并将其发送回爬虫。
如果您的网站有很多动态可抓取内容,我认为这是最横向和透明的解决方案。
在构建时或点击网站 CMS 的保存按钮时使用 PhantomJS 生成静态快照
如果您的可抓取内容的内容从不更改或只是不时更改,这很好。
在开发时或点击网站 CMS 的保存按钮时生成静态“等效”内容文件
这是一个非常便宜的解决方案,因为它不涉及 PhantomJS。如果内容很简单并且您可以轻松地编写它或从数据库生成它,这很好。
如果内容难以检索,则很难处理,因为您需要复制代码(一个客户端渲染 Angular 视图,一个服务器端为爬虫生成整个页面的“等效”内容)。
我提到了 PhantomJS 解决方案,但任何无头(或者如果你能负担得起显示器)浏览器都可以完成工作。您甚至可以想象能够在没有任何浏览器的情况下在服务器端呈现您的视图,而只需在 NodeJS 服务器中运行您的 JS。
如果您将使用 HTML5 样式的 URL、散列或 hashbang URL,还请考虑一开始。一旦内容被搜索引擎索引,这可能很难改变。我建议 hashbang 风格,即使它可以被视为“丑陋”。*
我的解决方案是让 Google 可以抓取 Angular 上的应用程序。用于aisel.co
将规则添加到您的 .htaccess
RewriteCond %{QUERY_STRING} ^_escaped_fragment_=(.*)$
RewriteCond %{REQUEST_URI} !^/snapshots/views/ [NC]
RewriteRule ^(.*)/?$ /snapshots/views/%1 [L]
为快照创建 node.js 脚本,并在终端中运行它:node snapshots.js
var htmlSnapshots = require('html-snapshots');
var result = htmlSnapshots.run({
input: "array",
source: [
"http://aisel.dev/#!/",
"http://aisel.dev/#!/contact/",
"http://aisel.dev/#!/page/about-aisel"
],
outputDir: "web/snapshots",
outputDirClean: true,
selector: ".navbar-header",
timeout: 10000
}, function(err, snapshotsCompleted) {
var fs = require('fs');
fs.rename('web/snapshots/#!', 'web/snapshots/views', function(err) {
if ( err ) console.log('ERROR: ' + err);
});
});
确保一切都适用于 curl,输入终端
curl http://aisel.dev/ \?_escaped_fragment_\=/page/about-aisel/ 这应该显示快照的内容.../www/aisel.dev/public/web/snapshots/views/page/about-aisel /index.html
不要对护目镜和其他爬虫的指令。您的应用程序应在头部包含元规则:
<meta name="fragment" content="!">
来自谷歌的完整条款:https ://developers.google.com/webmasters/ajax-crawling/docs/specification