需要对谷歌 AMP 指南进行澄清



我已经开始创建我的一个规范网站的精确副本 - 按照现代标准,这是一个只有大约6,500页的小网站 - 我希望最终在我完成时完全符合AMP。

我已经通读了您网站上的许多文档,我发现自己对一些问题有点困惑。因此,我有一些简单明了的问题。请允许我为你们列举其中的一些。

  1. 我的规范网站的副本符合 AMP 标准,位于我的常规规范网站顶层的文件夹/目录中。换句话说,我的 AMP 文件夹(它将是独立的,并包含我所有经过 AMP 转换的 HTML 文件)与同一网站的常规规范版本的索引.html文件位于同一级别。这样做有问题吗?

顺便说一句,我在旧的iMac上托管了自己的网络服务器,我真的负担不起为另一个新域付费,只是为了拥有我的网站的AMP版本。因此这种方法。

  1. 在我的网站的规范版本中,我真正需要的 AMP 相关信息是每个 HTML 文件的 head 部分,"<link rel="amphtml>"链接吗?

换句话说,我真的不需要"视口"元标记或"<html amp=>"等,对吧?所有这些都仅适用于实际的 AMP 网页,对吗?而且,是的,我的 AMP 页面上也会有一个链接回到规范页面。:)

  1. 在响应式网页设计基础部分中,您声明禁止使用外部样式表,并且所有CSS样式都应包含在每个HTML文档的head部分中。显然,这将使每个HTML页面更加膨胀,但如果这是需要这样做的方式,我会这样做。

但这就是让我感到困惑的地方。在网站的同一部分中,您将讨论CSS媒体查询,并提供使用".虽然我确实在我的规范网站中使用了很多内联 CSS(我知道我需要删除这些 CSS 才能符合 AMP 要求),但长期以来,我也使用了许多位于规范域顶层 CSS 文件夹中的 CSS 样式表文档。

所以你是说现在禁止这样做,并且样式表中的所有CSS信息都必须添加到每个文件的头部 - 根据您的"不允许的样式"部分 - 或者你的意思是"外部样式表",例如在另一个网站上?

  1. 在"不允许的样式"部分中,您还声明"过滤器"样式"由于性能问题而被列入后备列表"。你指的是下面这样的东西,因为我经常使用它来向数千页的顶部标题和图像部分添加渐变:

style="filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='# 34ddfc', endColorstr='#031578'); background: -webkit-gradient(linear, left top, left bottom, from(#34ddfc), to(#031578)); background: -moz-linear-gradient(top, #34ddfc, #031578);"

  1. 如果我正确理解了您的文档,我无法在我的任何 AMP 页面上使用 Facebook、Google+ 和 Twitter 共享按钮,因为它们使用内联脚本。这是对的吗?

  2. 根据我读到的有关样式的内容,您是否建议我实际上应该为同一图像创建不同的物理大小,然后使用"srcset"元素选择器和"layout="响应"来告诉页面要显示哪个图像,具体取决于所使用的设备?我仍在思考如何正确实现这一点。

  3. 根据我所阅读的内容,以及到目前为止我为将我的规范网站转换为 AMP 所做的工作,我已经提前知道我违反了 AMP 的一些基本规则。既然如此,为什么您的移动友好测试工具给我开绿灯,说我的文档通过了测试,并声称转换后的页面适合移动设备,而 amproject.org 显示我的页面的各种与AMP相关的问题,这些问题很可能是正确的?也就是说,我相信它们是有效的错误。

正如你从上面的七个问题中看到的那样,虽然我已经知道需要大量的时间和辛勤工作——也许是我几周或几个月的努力——才能将所有内容正确正确地转换为 AMP,但我致力于自己做这件事,因为我不可能付钱给别人为我做这件事。我老了,退休了。所以,我希望你能够清楚地回答上述七个问题,因为我非常渴望尽快比我已经投入到这个问题上。我有很多使用移动设备的朋友。值得庆幸的是,我使用了一个很棒的文本编辑器,与我必须手动完成所有操作相比,它使全局搜索和替换代码变得容易得多,而且耗时更少。是的,我也会被迫做很多手工工作,但情况可能会更糟。:)

提前感谢您提供的任何帮助。毫无疑问,在我进行这个项目时,我会有更多的问题。

  1. 无需担心:对于存储构成网站的文件的 AMP 没有区别

  2. 没错。您的规范网页只需要<link rel="canonical" href="...">标记。建议您的规范文档和 AMP 文档在内容方面也尽可能相似。

  3. 没错 — 有效的 AMP 要求 CSS 位于文档的<head>

  4. 在有效的 AMP 中禁止使用 CSS 过滤样式的所有用途,包括您描述的用法

  5. 禁止使用任何带有内联第三方脚本的按钮,但您可以使用 amp-social-share 来支持您正在寻找的功能。

  6. 您可以通过示例查看srcset在 AMP 中的工作方式的一个很好的例子
  7. 移动设备友好测试工具和 AMP 验证工具针对不相关的内容进行测试。如果您只想制作有效的 AMP 网页,AMP 验证工具应会为您提供所需的反馈。

相关内容

  • 没有找到相关文章

最新更新