使用 Amazon S3 时如何将爬虫请求重定向到预渲染页面？

Question

问题

我有一个使用 Angular 构建并托管在 Amazon S3 上的静态 SPA 站点。我正在尝试让爬虫访问我的预呈现页面，但我无法重定向爬虫请求，因为 Amazon S3 不提供 URL 重写选项并且重定向规则有限。

我有什么

我已将以下元标记添加到我的 index.html 页面的 <head> 中：

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

此外，我的 SPA 使用漂亮的 URLs（没有散列 # 符号）和 HTML5 推送状态。

使用此设置，当爬虫发现我的 http://mywebsite.com/about link 时，它会向 http://mywebsite.com/about?_escaped_fragment_= 发出 GET 请求。这是一个 pattern defined by Google，后面还有其他爬虫。

我需要用 about.html 文件的预渲染版本来回答这个请求。我已经使用 Phantom.js 完成了此预渲染，但我无法将正确的文件提供给爬虫，因为 Amazon S3 没有重写规则。

在 nginx 服务器中，解决方案是添加重写规则，例如：

location / {
  if ($args ~ "_escaped_fragment_=") { 
    rewrite ^/(.*)$ /snapshots/.html break; 
  } 
}

但在 Amazon S3 中，我受到基于 KeyPrefixes 和 HttpErrorCodes 的 redirect rules 的限制。 ?_escaped_fragment_= 不是 KeyPrefix，因为它出现在 URL 的末尾，并且它不会给出 HTTP 错误，因为 Angular 会忽略它。

我试过的

我已经开始尝试在 ngRoute 中使用动态模板，但后来我意识到我无法使用任何 Angular 解决方案来解决这个问题，因为我的目标是无法执行 JavaScript.

使用 Amazon S3，我必须遵守他们的重定向规则。

我已经设法通过丑陋的解决方法让它工作。如果我为每个页面创建一个新规则，我就完成了：

<RoutingRules>

  <!-- each page needs it own rule -->
  <RoutingRule>
    <Condition>
      <KeyPrefixEquals>about?_escaped_fragment_=</KeyPrefixEquals>
    </Condition>
    <Redirect>
      <HostName>mywebsite.com</HostName>
      <ReplaceKeyPrefixWith>snapshots/about.html</ReplaceKeyPrefixWith>
    </Redirect>
  </RoutingRule>

</RoutingRules>

如您在此解决方案中所见，每个页面都需要自己的规则。由于 Amazon 仅限制 50 个重定向规则，因此这不是一个可行的解决方案。

另一种解决方案是忘记漂亮的 URL 并使用 hashbangs。有了这个，我的 link 将是 http://mywebsite.com/#!about 并且爬虫将使用 http://mywebsite.com/?_escaped_fragment_=about 请求它。由于 URL 将以 ?_escaped_fragment_= 开头，因此可以使用 KeyPrefix 捕获它，只需一个重定向规则就足够了。但是，我不想使用丑陋的 URLs.

那么，我怎样才能在 Amazon S3 中拥有静态 SPA 并且对 SEO 友好？

Answer 1

简答

Amazon S3（和 Amazon CloudFront）不提供重写规则并且只有有限的重定向选项。但是，您不需要 重定向或重写您的URL 请求。只需预渲染所有 HTML 文件并按照您的网站路径上传它们.

由于浏览网页的用户启用了 JavaScript，Angular 将被触发并控制页面，从而导致重新呈现模板。这样，所有 Angular 功能都将可供该用户使用。

关于爬虫，预渲染页面就够了

例子

如果您有一个名为 www.myblog.com 的网站和一个 link 到另一个页面 URL www.myblog.com/posts/my-first-post.您的 Angular 应用程序可能具有以下结构：一个 index.html 文件位于您的根目录中，负责所有内容。页面 my-first-post 是 HTML 文件的一部分，位于 /partials/my-first-post.html.

这种情况下的解决方案是在部署时使用预渲染工具。您可以使用 PhantomJS for this, but you can't use a middleware tool like Prerender，因为您在 Amazon S3 中托管了一个静态站点。

您需要使用此预渲染工具创建两个文件：index.html 和 my-first-post。请注意 my-first-post 将是一个没有 .html 扩展名的 HTML 文件，但是当你上传到 Amazon S3 时，你需要将它的 Content-Type 设置为 text/html。

你将index.html文件放在你的根目录下，my-first-post放在里面一个名为 posts 的文件夹，以匹配您的 URL 路径 /posts/my-first-post.

通过这种方法，抓取工具将能够检索您的 HTML 文件，并且用户将很乐意使用所有 Angular 功能。

注意：此解决方案要求使用根路径引用所有文件。如果您访问 link www.myblog.com/posts/my-first-post.

，相对路径将不起作用

根路径，我的意思是：

<script src="/js/myfile.js"></script>

使用相对路径的错误方法是：

<script src="js/myfile.js"></script>

编辑：

下面是一小段 JavaScript 代码，我用它来使用 PhantomJS 预呈现页面。安装 PhantomJS 并使用单个页面测试脚本后，在构建过程中添加一个脚本以在部署站点之前预呈现所有页面。

var fs = require('fs');
var webPage = require('webpage');
var page = webPage.create();

// since this tool will run before your production deploy, 
// your target URL will be your dev/staging environment (localhost, in this example)
var path = 'pages/my-page';
var url = 'http://localhost/' + path;

page.open(url, function (status) {

  if (status != 'success')
    throw 'Error trying to prerender ' + url;

  var content = page.content;
  fs.write(path, content, 'w');

  console.log("The file was saved.");
  phantom.exit();
});

注意：它看起来像 Node.js，但实际上不是。它必须使用 Phantom 可执行文件而不是 Node 执行。

使用 Amazon S3 时如何将爬虫请求重定向到预渲染页面？

How to redirect crawlers requests to pre-rendered pages when using Amazon S3?

seo

amazon-s3

amazon-web-services

angularjs

single-page-application

问题

我有什么

我试过的

简答

例子

编辑：