如何为动态网页创建 Google AMP？

Question

有没有一种方法可以为动态网页创建Google AMP？我的网站包含表单元素，如潜在客户表单、页面评论等。我对AMP印象深刻，并希望在整个网站中实现它。

- CRR7

Answer 1

这取决于“动态”程度。 AMP 可以被认为是 HTML 的简化版。您不能包含任意脚本，但 Google 维护了一组经过批准的 AMP 扩展程序，可以让您添加手风琴、灯箱、广告单元等功能。您也不能包括表单标签或任何 HTML 表单元素（input、select、textarea 等）。但是，您可以使用 amp-iframe 在 AMP 页面中嵌入另一个网页。这个网页不必符合 AMP 规范，因此您可以以这种方式自由地添加表单。只要记住标准 iframe 规则适用：您必须为框架设置固定高度（这可能对多步表单有问题，其中字段数量会随着页面而改变），并且您的成功响应将被限制在 iframe 中（这意味着您无法将整个页面重定向到其他地方）。尽管如此，这仍然可能是您可行的解决方案。

一般来说，AMP 页面应该是简单的。这是它的设计理念。Google 的限制是为了强迫你保持简单。AMP 最好的用途仍然是纯内容页面，比如博客文章、新闻和其他文章类型的页面。你可以推进更多，但是限制会变得有点烦人。以我的经验来看，需要进行相当多的试错，才能接近理想状态。

AMP 的好处在于它完全是自愿的，并且是分模块的。你不必转换整个站点。如果你想的话，只需处理一个页面。这让你可以尝试一下，为你的网站提供额外的动力，如果你不能用 AMP 实现想要的效果，你可以使用标准的网页，而不会受到任何惩罚。

- Chris Pratt

Answer 2

我刚刚为我们ABC新闻网站的所有8个站点创建了一个AMP引擎。我遇到的最大问题是必须通过HTTPS提供所有AMP标签。我们的视频播放器需要大量外部JS来支持它的播放，包括预滚动和广告。我们还在页面上与多个供应商进行广告投放。在开始之前，您肯定需要尽可能了解AMP。

如@chris_pratt所述，表单标签和元素不允许在AMP页面中使用。已经添加了在AMP页面中嵌入表单的支持。

要注意的最重要的事情有：

- 保持页面简单 - 避免使用复杂的CSS和JavaScript - 使用AMP组件代替自定义代码

1. 不使用外部JS（如果需要，必须通过amp-iframe引入）
2. 从AMP特定标签发出的调用必须通过HTTPS进行
3. 不能使用内联CSS和外部样式表。使用标记添加自定义CSS（最大50k）
4. 在我的情况下，我尝试将JS文件拉入AMP-IFRAME时遇到了混合内容警告（这将防止AMP页面有效）。
5. AMP页面有很多限制需要解决才能将AMP实现到您的项目中。在样式方面，您会注意到某些CSS不允许，其中之一是“！important”和“*”。这只是其中的一部分，请阅读其他限制。
6. 还有布局规则，您需要在开始之前了解。

总之，AMP非常快速地加载页面，但必须满足许多限制和要求才能实际显示AMP版本。一旦您了解了这些限制，您应该能够相应地计划攻击。

希望这可以帮助您。

- SBDuvallian