需要澄清的Google AMP指南

时间：2017-01-30 01:22:18

标签： css responsive-design styles amp-html

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

我已阅读了您网站上的大量文档，我发现自己对一些问题感到困惑。因此，我有一些简单，直截了当的问题。请允许我为你列举一些。

  1. 我的规范网站的重复AMP兼容版本位于我常规规范网站顶层的文件夹/目录中。换句话说，我的AMP文件夹 - 它将是自包含的，并保存我所有AMP转换的HTML文件 - 与同一网站的常规规范版本的index.html文件位于同一级别。这样做有问题吗？
    2. 顺便说一句，我在旧的iMac上托管我自己的网络服务器，我真的无法为另一个新域名付费，只是为了拥有我的网站的AMP版本。因此这种方法。

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

      2. 换句话说，我真的不需要＆＃34;视口＆＃34;元标记，或"<html amp=>"等，对吗？所有这些仅适用于实际的AMP页面，对吗？而且，是的，我的AMP页面上的链接也会返回到规范页面。 ：）

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

        2. 但是这让我很困惑。在您网站的同一部分中，您将讨论CSS媒体查询，并提供使用＆＃34;的明确示例。虽然我在我的规范网站中使用了很多内联CSS - 我知道我需要删除AMP兼容性 - 我也长期使用了一些CSS样式表文档，这些文档位于我的规范顶层的CSS文件夹中域。

        你是说现在禁止使用，并且样式表中的所有CSS信息都必须添加到每个文件的头部 - 按照你的＆＃34;禁止样式＆＃34;部分 - 或者你是指外部样式表＆＃34;还有其他什么东西，比如在另一个网站上？

        1. 在＆＃34;不允许的样式＆＃34;你还要说明＆＃34;过滤器＆＃34;由于性能问题，风格被列入后退。＆＃34;你指的是类似下面的东西，因为我经常使用它来将渐变添加到数千个页面的顶部标题和图像部分：

          2. 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. 根据我所读到的关于样式的内容，您是否建议我实际上应该为同一图像创建不同的物理尺寸，然后使用＆＃34; srcset＆＃34;元素选择器和＆＃34; layout =＆＃34;响应＆＃34;告诉页面显示哪个图像，具体取决于使用的设备？我仍然围绕着如何正确实现这一点。

          3. 根据我所读到的以及我迄今为止将我的规范网站转换为AMP所做的工作，我事先已经知道我违反了许多AMP的基本规则。既然如此，为什么你的移动友好测试工具给我开绿灯，并说我的文件通过测试，并声称转换的页面是移动友好的，而amproject.org显示各种与AMP相关的问题我的网页，这很可能是正确的？也就是说，我相信它们是有效的错误。

            4. 正如您在上述七个问题中所看到的那样，虽然我已经知道需要花费大量时间和辛勤工作 - 可能需要几周或几个月的努力 - 才能将所有内容转换为AMP并且恰当地，我承诺自己这样做，因为我不能支付别人为我做这件事。我老了，退休了。所以，我希望你能够清楚地回答上述七个问题，因为我非常渴望尽快投入比这更多的问题。我有很多使用移动设备的朋友。值得庆幸的是，我使用了一个出色的文本编辑器，这使得全局搜索和替换代码比我必须手动执行所有操作更容易，更省时。是的，我会被迫，但也会做很多手动的东西，但可能会更糟。 ：）

            提前感谢您提供的任何帮助。毫无疑问，当我继续这个项目时，我会有更多的问题。

1 个答案:

答案 0 :(得分：0)

  1. 无需担心：对于存储构成您网站的文件的AMP而言，它并没有什么不同

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

  3. 那是对的 - 有效的AMP要求CSS位于文档的<head>

  4. 有效AMP中禁止使用CSS过滤器样式，包括您描述的用法

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

  6. 您可以看到srcset在AMP by Example
    7. 的工作原理的一个很好的示例
  7. 移动友好测试工具和针对无关事物的AMP验证器测试。如果您只想制作有效的AMP页面，AMP验证器应该为您提供所需的反馈。
相关问题
最新问题