如何改善无服务器网站的SEO？

Question

当我的网站托管在AWS S3上时,我想在无服务器架构中改进SEO(即,在搜索引擎上正确索引我的页面).

由于我正在使用JavaScript方法进行路由(类似于角度,但更简单),并获得动态内容来填充元标记,我发现一切对于没有JavaScript支持的抓取工具来说非常麻烦,比如Facebook.

我已经插入了默认元标记,当然,这些元标记加载得很好,但我需要更新的元标记.

我知道大多数人在服务器上或通过Prerender.io之类的东西使用预渲染,但我真的想找到一种在无服务器方法上有意义的替代方案.

我认为我已经弄清楚了,因为Open Graph元标记允许"指针"URL,如果需要,您可以在其中使用"仅元标记"HTML.所以我在考虑使用Lambda函数在GET请求中使用正确的元标记生成HTML响应.问题是因为Facebook刮刀没有JavaScript支持,我如何在GET请求上发送动态内容？

Answer 1

如果您愿意在S3存储桶之上使用CloudFront,则可以使用预渲染动态解决您的问题.Lambda @ Edge是一项新功能,允许在请求页面时以低延迟执行代码.有了这个,您可以验证代理是否是爬虫并为他预呈现该页面.

2016年12月1日公告:Lambda @ Edge - 预览

就在上周,我在Hacker News上发表的评论产生了一封来自AWS客户的有趣电子邮件!

(......)

以下是他向我解释他的问题的方法:

为了正确地被搜索引擎索引,并且为了在Facebook和Twitter中正确显示我们内容的预​​览,我们需要提供每个页面的预渲染版本.为了做到这一点,每次普通用户访问我们的网站时,都需要从Cloudfront为我们的正常用户提供服务.但如果用户代理与Google/Facebook/Twitter等匹配,我们需要将其重定向到网站的预渲染版本.

在没有溢出任何豆类的情况下,我让他知道我们非常了解这个用例,并且我们在工作中有一些有趣的解决方案.其他客户也让我们知道他们希望通过快速决策来定制他们的最终用户体验.

此功能目前处于预览模式(2016年12月),但您可以请求AWS体验它.

Answer 2

如果您使用的是S3,则必须在上传页面之前预先渲染它们.您无法动态调用Lambda函数,因为爬虫不会执行JavaScript.你甚至不能使用Prerender.io和S3.

建议:

1. 在本地托管您的网站.
2. 使用PhanthomJS获取页面并编写预渲染版本.
3. 在页面地址*之后将每个页面上传到S3.

*例如:从地址example.com/about/us必须映射为us.html一个文件夹内的文件大约在你的水桶根.

现在,您的用户和抓取工具将看到完全相同的页面,而无需JavaScript加载初始状态.不同之处在于,启用JavaScript后,您的框架(Angular？)将加载JS依赖项(如路由,服务等)并像普通SPA应用程序一样进行控制.当用户单击以浏览另一个页面时,SPA将重新加载内部内容,而不会重新加载整页.

优点:

• 易于设置.
• 服务内容非常快.您还可以使用CloudFront提高速度.

缺点:

• 如果您有1000页(例如:您在商店中销售的1000种产品),则需要制作1000个预呈现页面.
• 如果您的页面数据经常更改,则需要经常进行预呈现.
• 有时,抓取工具会将旧内容编入索引*.

*爬虫将看到旧内容,但用户可能会看到当前内容,因为SPA框架将控制页面并再次加载内部内容.

你说你正在使用S3.如果你想在运行中预呈现,你就不能使用S3.您需要使用以下内容:

Route 53 => CloudFront => API Gateway => Lambda

配置:
- 将API网关端点设置为CloudFront原点.
- 在"原始策略协议"(CloudFront)中使用"仅HTTPS".
- Lambda函数必须是代理.

在这种情况下,您的Lambda函数将知道所请求的地址,并能够正确呈现所请求的HTML页面.

优点:

• 由于Lambda可以访问数据库,因此将始终更新呈现的页面.

缺点:

• 加载网页要慢得多.