解决 AMP 页面问题

这个问题持续将近一年，没时间研究这部分，这次看看怎么解决。

Google Search Console 提示

致：https://leeyr.com/post/ 的所有者
Search Console 发现，您的网站受到了 1 个 AMP 类型新问题问题的影响。
出现次数最多的错误（至多仅列 5 个）
错误可能会致使您的网页/功能无法显示在 Google 搜索结果中。我们在您的网站中发现了以下错误：
标记 “iframe” 应被替换为等效的 “amp-iframe” 标记。
 
我们建议您详细了解并尽可能修正这些问题，以使您的网站能在 Google 搜索中尽可能实现最佳的用户体验和覆盖率。

出现问题的页面是：https://leeyr.com/post/amp/305.html 打开控制台发现错误：

问题 A
Blocked script execution in '<URL>' because the document's frame is sandboxed and the 'allow-scripts' permission is not set.

问题 B
<amp-iframe>elements must be positioned outside the first 75% of the viewport or 600px from the top(whichever is smaller).

因当前博客使用插件生成 AMP 快速页面，直接修改 Action.php：

    private function AMPInit($text)
    {
        ...
        
        // 修复问题 A to amp-iframe
        $text = str_replace('<iframe', '<amp-iframe  layout="responsive" sandbox="allow-scripts allow-same-origin allow-popups"', $text);
        $text = str_replace('iframe>', 'amp-iframe>', $text);
        
        // 修复问题 B to amp-audio
        $text = str_replace('<audio', '<amp-audio  layout="responsive"', $text);
        $text = str_replace('audio>', 'amp-audio>', $text);

        ...
    }

解释：
sandbox
amp-iframe 沙盒属性参数默认为 0，意思对 ifame 限制为最大。添加参数解除特定限制，详情在这里。

placeholder 待处理。
解决距离顶部 600px 内的限制才会显示 iframe 内容，详情 1，详情 2。

最后在 AMP 内容页head添加 JS 就能加载并显示 amp-ifame 内容：

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>

这里是 amp-audio：

<script async custom-element="amp-audio" src="https://cdn.ampproject.org/v0/amp-audio-0.1.js"></script>

谷歌 AMP 验证页面

https://search.google.com/test/amp