项目开始
在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样式的网址,哈希或hashbang网址,请考虑一开始。 一旦内容被搜索引擎索引,这可能难以改变。 我建议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 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
链接地址: http://www.djcxy.com/p/15853.html上一篇: Beginning of Project