Question

在angularJS中开发网站时，您在开始使用网站之前必须先担心网页抓取工具，或者在网站完成之前将其推迟。

我已经读过HTML快照是一个很好的解决方案。如果您选择这样做，您是否可以在对网站进行编码后实施它，或者您是否必须基于此类功能创建网站。

Answer 1

我认为在项目开始时考虑策略并在项目结束时实施它是件好事。

我们在我工作的公司遇到了这个问题。

在所有情况下，您都需要回答对

等端点的GET请求

...?_escaped_fragment_=/home

当谷歌或必应时，会抓取网页

...#/home

有关详细信息，请参阅官方Google documentation。

问题是如何填写资源的内容

...?_escaped_fragment_=:path

有不同的策略：

每次抓取工具请求资源时都使用PhantomJS生成动态快照

这包括在运行时生成PhantomJS进程，将生成的HTML页面的内容重定向到输出并将其发送回爬虫。

如果您的网站有大量动态可抓取内容，我认为这是最横向和最透明的解决方案。

在构建时或点击网站CMS的保存按钮时使用PhantomJS生成静态快照

如果可抓取内容的内容永远不会发生变化，或者只是不时发生，那么这就很好了。

在开发时或点击网站CMS的保存按钮时生成静态«等效»内容文件

这是一个非常便宜的解决方案，因为它不涉及PhantomJS。如果内容很简单，并且您可以轻松地编写它或从数据库生成它，那么这很好。

如果要检索的内容很复杂，很难处理，因为您需要复制代码（一个客户端用于呈现Angular视图，一个服务器端用于为抓取工具生成整个页面“等效”内容）。

我提到了PhantomJS解决方案，但无论无头（或者如果你能负担得起显示器），浏览器都可以完成这项工作。您甚至可以想象能够在没有任何浏览器的情况下在服务器端渲染视图，而只是在NodeJS服务器中运行JS。

如果您将使用HTML5样式的URL，或散列或hashbang URL，请考虑一下。一旦内容被搜索引擎索引，这可能很难改变。我建议hashbang风格，即使它可以被视为“丑陋”。*

Answer 2

我的解决方案使Google可以对Angular进行抓取。用于aisel.co

https://github.com/localnerve/html-snapshots

将规则添加到.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

不要关于护目镜和其他抓取工具的指令。你的app应该包含元数据：

    <meta name="fragment" content="!">

谷歌的完整条款：https://developers.google.com/webmasters/ajax-crawling/docs/specification

使角度可爬行 - 项目的开始

2 个答案: