AMP标准合规：amp-custom与amp-boilerplate标签放置顺序咨询

要符合AMP官方标准，amp-boilerplate 标签必须放在 amp-custom 标签之前，这是AMP验证规则里明确要求的。

为什么要这样排序？ #

• AMP boilerplate 的核心作用是在AMP运行时加载完成前，控制页面的初始显示状态（比如隐藏未渲染的内容，避免页面闪烁）。它需要被浏览器优先解析和应用，才能确保页面在加载初期的行为符合AMP的规范。
• 如果颠倒顺序，虽然部分浏览器可能不会出现明显的视觉问题，但你的页面会无法通过AMP官方校验，进而影响页面在AMP生态中的分发（比如无法出现在Google搜索的AMP结果栏里）。

符合规范的代码示例 #

<head>
  <!-- 先放置必要的meta、canonical链接等头部标签 -->
  <meta charset="utf-8">
  <link rel="canonical" href="your-page-url.html">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  
  <!-- 首先是amp-boilerplate样式 -->
  <style amp-boilerplate>
    body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
  </style>
  <noscript>
    <style amp-boilerplate>
      body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
    </style>
  </noscript>
  
  <!-- 加载AMP运行时脚本 -->
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  
  <!-- 最后放置自定义的amp-custom样式 -->
  <style amp-custom>
    h1 { color: red; }
    /* 其他自定义样式 */
  </style>
</head>

额外注意事项 #

• 整个页面中只能有一个 <style amp-custom> 标签，且必须放置在 <head> 区域内。
• 不要省略 <noscript> 中的 amp-boilerplate 样式，它是为禁用JavaScript的浏览器准备的回退方案。

内容的提问来源于stack exchange，提问作者TidyDev