如何将现有页面转换为 AMP 兼容答案

【问题标题】：How to convert existing pages AMP compliant如何将现有页面转换为 AMP 兼容
【发布时间】：2023-03-22 05:05:01
【问题描述】：

我计划使我的新闻页面符合 AMP 标准，我成功地做到了。但是，我不得不删除一些自定义标签，例如、和属性，这很好。

现在的问题是整个新闻页面显示在另一个不符合 AMP 标准的 HTML 页面中。

例如

<html ...>
    <head>...</head>
    <script>...</script>
    <body>...
        <div id="story">
            <AMP PAGE Content>
        </div>
    </body>
</html>

这里的story div 包含完整的 AMP 页面数据，表示模板页面上显示的完整新闻故事。

现在问题是 story div 内的 AMP 页面成功完成验证，但模板在验证时出错。

如果这个模板没有完成验证可以吗？

对 Google 搜索或页面加载有任何影响吗？

这个页面也使用了jquery，那么，如果我们使用jquery和AMP有什么解决办法吗？

【问题讨论】：

标签： jquery css html amp-html

【解决方案1】：

如果这个模板没有完成验证可以吗？

据我所知，这并不好，因为这可能真的会影响您的网页被发现。我认为如果您填写 validation of your AMP pages 会更有益，因为这也可以确认您的 AMP 文档是 discoverable。

会对 Google 搜索或页面加载有任何影响吗？

如documentation 中所述，

如果 AMP 验证服务检测到您的网页有问题，它不会被第三方网站发现和分发，也不会出现在 Google AMP 缓存中。因此，您不仅会失去缓存的速度优势，而且很可能在很多地方都看不到您的页面！

这个页面也使用了jquery，那么如果我们使用jquery和AMP有什么解决办法吗？

其实AMP由three different parts组成：
- AMP HTML 是一种 HTML，它具有一些可靠性性能限制和一些扩展，用于构建基本 HTML 之外的丰富内容。
- AMP JS 库可确保快速呈现 AMP HTML 页面。
- Google AMP 缓存可用于提供缓存的 AMP HTML 页面。
但是，另请注意，文档中提到 AMP 仅允许异步 JavaScript 以防止 JavaScript 延迟页面呈现，而第三方 JS 仅允许在 iframe 中使用。而且，如果有依赖于 jQuery 的 JavaScript，它们必须在 JavaScript 之前加载。

希望有帮助！

【讨论】：

谢谢@Teyam。您会建议任何工具、框架或示例来自动化此 AMP 流程吗？我的意思是我们可以自动化将普通页面转换为 AMP 兼容页面的过程吗？由于我们有数以千计的新闻报道，我们可以手动使它们中的每一个都符合 AMP 标准。此外，这些故事也来自不同的来源，无法手动处理此操作。
关于AMP Implementation as an 'Article Type' 的讨论可能会为您提供一些关于自动化将普通页面转换为 AMP 的想法。
感谢@Teyam，我会阅读并尝试实现相同的。我最近尝试了 html-to-amp (github.com/micnews/html-to-amp)、html-to-article-json (github.com/micnews/html-to-article-json)、article-json-to-amp (github.com/micnews/article-json-to-amp)。但没有成功将 HTML 转换为适当的 AMP。