如何改进无服务器网站的 SEO？
How to improve SEO for Serverless Websites?
当我的网站托管在 AWS S3 上时，我想在无服务器架构中改进 SEO（即在搜索引擎上正确索引我的页面）。
由于我正在使用 JavaScript 路由方法（类似于 angular，但更简单）并获取动态内容来填充元标记，因此我发现一切都非常麻烦没有 JavaScript 支持的抓取工具，例如 Facebook 的。
我已经插入了默认的元标记，当然，这些元标记加载得很好，但我需要更新的元标记。
我知道大多数人在服务器上或通过类似 Prerender.io 的方式使用预渲染，但我真的很想找到一种对无服务器方法有意义的替代方案。
我想我已经弄明白了，因为 Open Graph 元标记允许 "pointers" URL，如果需要，您可以在其中使用 "metatags-only" HTML。因此，我正在考虑使用 Lambda 函数在 GET 请求上生成具有正确元标记的 HTML 响应。问题是因为 Facebook 抓取器没有 JavaScript 支持，我如何在 GET 请求上发送动态内容？
如果您使用的是 S3，您必须在上传页面之前预呈现页面。您不能即时调用 Lambda 函数，因为爬虫不会执行 JavaScript。您甚至不能将 Prerender.io 与 S3 一起使用。
建议：
- 在本地托管您的网站。
- 使用 PhanthomJS 获取页面并编写预渲染版本。
- 按照页面地址*将每个页面上传到S3。
* 例如：来自 example.com/about/us 的地址必须映射为一个 us.html 文件存储桶根目录中的文件夹 about。
现在，您的用户和爬虫将看到完全相同的页面，无需 JavaScript 加载初始状态。不同之处在于启用 JavaScript 后，您的框架（Angular?）将加载 JS 依赖项（如路由、服务等）并像普通 SPA 应用程序一样进行控制。当用户点击浏览另一个页面时，SPA 将重新加载内部内容，而不会重新加载整个页面。
优点：
- 易于设置。
- 提供内容的速度非常快。您也可以使用 CloudFront 来提高速度。
缺点：
- 如果您有 1000 个页面（例如：您在商店中销售 1000 种产品），则需要制作 1000 个预渲染页面。
- 如果你的页面数据变化频繁，需要经常预渲染。
- 有时爬虫会索引旧内容*。
* 爬虫将看到旧内容，但用户可能会看到当前内容，因为 SPA 框架将控制页面并再次加载内部内容。
您说您正在使用 S3。如果您想即时预渲染，则不能使用 S3。您需要使用以下内容：
Route 53 => CloudFront => API 网关 => Lambda
配置:
- 将 API 网关端点设置为 CloudFront 来源。
- 在 "Origin Policy Protocol" (CloudFront) 中使用 "HTTPS Only"。
- Lambda 函数必须是代理。
在这种情况下，您的 Lambda 函数将知道请求的地址，并且能够正确呈现请求的 HTML 页面。
优点：
- 由于 Lambda 可以访问数据库，呈现的页面将始终更新。
缺点：
- 加载网页慢得多。
如果您愿意在您的 S3 存储桶之上使用 CloudFront，则有一种新的可能性可以使用即时预渲染来解决您的问题。 Lambda@Edge 是一项新功能，允许在请求页面时以低延迟执行代码。有了这个，你可以验证代理是否是爬虫并为他预渲染页面。
2016 年 12 月 1 日公告：Lambda@Edge – Preview
Just last week, a comment that I made on Hacker News resulted in an
interesting email from an AWS customer!
(...)
Here’s how he explained his problem to me:
In order to properly get indexed by search engines and in order for
previews of our content to show up correctly within Facebook and
Twitter, we need to serve a prerendered version of each of our pages.
In order to do this, every time a normal user hits our site need for
them to be served our normal front end from Cloudfront. But if the
user agent matches Google / Facebook / Twitter etc., we need to
instead redirect them the prerendered version of the site.
在不泄露任何豆子的情况下，我让他知道我们非常清楚
这个用例，我们在工作中有一些有趣的解决方案。
其他客户也让我们知道他们想要定制
通过在边缘做出快速决策来提升他们的最终用户体验。
此功能目前处于预览模式 (dec/2016)，但您可以请求 AWS 进行体验。
这是一个使用（并被批准）prerender.cloud的解决方案：https://github.com/sanfrancesco/prerendercloud-lambda-edge
这使用 Lambda@Edge 通过 make deploy 命令预呈现您的应用程序。
摘自 repo 的自述文件：
Server-side rendering (pre-rendering) via Lambda@Edge for single-page apps hosted on CloudFront with an s3 origin.
This is a serverless project with a make deploy command that:
- serverless.yml deploys 3 functions to Lambda (viewerRequest, originRequest, originResponse)
- deploy.js associates them with your CloudFront distribution
- create-invalidation.js clears/invalidates your CloudFront cache
实际上有几个选项。大多数情况下需要 Cloudfront 和 Lambda@Edge。一种可能的方法是向您的 lambda@edge 函数添加一些逻辑来检查请求的 'user-agent' header 以区分来自爬虫和普通用户的请求。如果请求来自爬虫，您可以使用针对此类请求优化的元标记来呈现爬虫友好的响应。
这肯定需要一些额外的工作，这意味着几乎每个请求都会执行 lambda@edge。我希望AWS在未来给我们一个基于header差异化的选择。
当我的网站托管在 AWS S3 上时，我想在无服务器架构中改进 SEO（即在搜索引擎上正确索引我的页面）。
由于我正在使用 JavaScript 路由方法（类似于 angular，但更简单）并获取动态内容来填充元标记，因此我发现一切都非常麻烦没有 JavaScript 支持的抓取工具，例如 Facebook 的。
我已经插入了默认的元标记，当然，这些元标记加载得很好，但我需要更新的元标记。
我知道大多数人在服务器上或通过类似 Prerender.io 的方式使用预渲染，但我真的很想找到一种对无服务器方法有意义的替代方案。
我想我已经弄明白了，因为 Open Graph 元标记允许 "pointers" URL，如果需要，您可以在其中使用 "metatags-only" HTML。因此，我正在考虑使用 Lambda 函数在 GET 请求上生成具有正确元标记的 HTML 响应。问题是因为 Facebook 抓取器没有 JavaScript 支持，我如何在 GET 请求上发送动态内容？
如果您使用的是 S3，您必须在上传页面之前预呈现页面。您不能即时调用 Lambda 函数，因为爬虫不会执行 JavaScript。您甚至不能将 Prerender.io 与 S3 一起使用。
建议：
- 在本地托管您的网站。
- 使用 PhanthomJS 获取页面并编写预渲染版本。
- 按照页面地址*将每个页面上传到S3。
* 例如：来自 example.com/about/us 的地址必须映射为一个 us.html 文件存储桶根目录中的文件夹 about。
现在，您的用户和爬虫将看到完全相同的页面，无需 JavaScript 加载初始状态。不同之处在于启用 JavaScript 后，您的框架（Angular?）将加载 JS 依赖项（如路由、服务等）并像普通 SPA 应用程序一样进行控制。当用户点击浏览另一个页面时，SPA 将重新加载内部内容，而不会重新加载整个页面。
优点：
- 易于设置。
- 提供内容的速度非常快。您也可以使用 CloudFront 来提高速度。
缺点：
- 如果您有 1000 个页面（例如：您在商店中销售 1000 种产品），则需要制作 1000 个预渲染页面。
- 如果你的页面数据变化频繁，需要经常预渲染。
- 有时爬虫会索引旧内容*。
* 爬虫将看到旧内容，但用户可能会看到当前内容，因为 SPA 框架将控制页面并再次加载内部内容。
您说您正在使用 S3。如果您想即时预渲染，则不能使用 S3。您需要使用以下内容：
Route 53 => CloudFront => API 网关 => Lambda
配置:
- 将 API 网关端点设置为 CloudFront 来源。
- 在 "Origin Policy Protocol" (CloudFront) 中使用 "HTTPS Only"。
- Lambda 函数必须是代理。
在这种情况下，您的 Lambda 函数将知道请求的地址，并且能够正确呈现请求的 HTML 页面。
优点：
- 由于 Lambda 可以访问数据库，呈现的页面将始终更新。
缺点：
- 加载网页慢得多。
如果您愿意在您的 S3 存储桶之上使用 CloudFront，则有一种新的可能性可以使用即时预渲染来解决您的问题。 Lambda@Edge 是一项新功能，允许在请求页面时以低延迟执行代码。有了这个，你可以验证代理是否是爬虫并为他预渲染页面。
2016 年 12 月 1 日公告：Lambda@Edge – Preview
Just last week, a comment that I made on Hacker News resulted in an interesting email from an AWS customer!
(...)
Here’s how he explained his problem to me:
In order to properly get indexed by search engines and in order for previews of our content to show up correctly within Facebook and Twitter, we need to serve a prerendered version of each of our pages. In order to do this, every time a normal user hits our site need for them to be served our normal front end from Cloudfront. But if the user agent matches Google / Facebook / Twitter etc., we need to instead redirect them the prerendered version of the site.
在不泄露任何豆子的情况下，我让他知道我们非常清楚 这个用例，我们在工作中有一些有趣的解决方案。 其他客户也让我们知道他们想要定制 通过在边缘做出快速决策来提升他们的最终用户体验。
此功能目前处于预览模式 (dec/2016)，但您可以请求 AWS 进行体验。
这是一个使用（并被批准）prerender.cloud的解决方案：https://github.com/sanfrancesco/prerendercloud-lambda-edge
这使用 Lambda@Edge 通过 make deploy 命令预呈现您的应用程序。
摘自 repo 的自述文件：
Server-side rendering (pre-rendering) via Lambda@Edge for single-page apps hosted on CloudFront with an s3 origin.
This is a serverless project with a make deploy command that:
- serverless.yml deploys 3 functions to Lambda (viewerRequest, originRequest, originResponse)
- deploy.js associates them with your CloudFront distribution
- create-invalidation.js clears/invalidates your CloudFront cache
实际上有几个选项。大多数情况下需要 Cloudfront 和 Lambda@Edge。一种可能的方法是向您的 lambda@edge 函数添加一些逻辑来检查请求的 'user-agent' header 以区分来自爬虫和普通用户的请求。如果请求来自爬虫，您可以使用针对此类请求优化的元标记来呈现爬虫友好的响应。
这肯定需要一些额外的工作，这意味着几乎每个请求都会执行 lambda@edge。我希望AWS在未来给我们一个基于header差异化的选择。