从非 amp html 页面链接的 amp-html 页面不起作用答案

【问题标题】：amp-html page linked from non-amp html page not working从非 amp html 页面链接的 amp-html 页面不起作用
【发布时间】：2017-04-26 16:36:21
【问题描述】：

https://www.washingtonvoterfile.com 是一个传统的 html（不是 amp-html）页面，带有指向 amp-html 页面的链接（例如：https://www.washingtonvoterfile.com/legal-notice.html）。

直接加载这些 amp 页面时，它们会正确呈现，并且 Google Chrome AMP Validator 插件表明它们是有效的 AMP。

当通过单击（非 amp）主页上的链接进行加载时，它们会在未加载 amp.js 的情况下呈现。 Google Chrome AMP Validator 插件显示为灰色，表明它们不是 AMP 页面。

如果刷新，amp.js 会加载并正确呈现。该插件显示 AMP 有效。

我尝试使用硬链接、相对链接等来解决这个问题，但没有成功。

任何意见将不胜感激。

更新

问题似乎是主页上使用的 JQuery Mobile 工作方式的结果。基本上，任何链接页面的 head 标记中的大多数项目都不会加载。

解决此问题的一种方法是将脚本标签移到正文标签 (https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page) 内，因为必须在 head 标签中加载 amp 脚本。

【问题讨论】：

您是否创建了一个链接到 amp 页面的页面，您已经将 amp-html 链接提供给了 amp 页面？
@Bhansa 我不明白你的问题。
您应该在您的 amp 页面和非 amp 页面之间建立连接。您已经为您的 amp 页面提供了链接，但我没有看到任何指向该链接的非 amp 页面。如果你已经创建了，你也可以添加那个链接吗？
没有非 amp 版本的 amp 页面。
Making your pages discoverable

标签： amp-html

【解决方案1】：

您在 amp 页面中提供的链接是：

<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice"/>

不存在。

如果您只有一个页面，并且该页面是 AMP 页面，您仍必须向其添加规范链接，然后该链接将简单地指向自身：

<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice.html"/>

正如您所解释的，您正在打开一个通过非 amp 页面链接的 amp 页面，即使它们都没有相互连接。

应该有两个页面，一个非 amp 有一个指向 amp 页面的规范标签。

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

在 amp 页面中：

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

如果您只有一个独立的 AMP 页面，它应该如上所述链接到自身。

希望对您有所帮助！

【讨论】：

我将 washingtonvoterfile.com/legal-notice"> 更改为 washingtonvoterfile.com/legal-notice.html">。问题依然存在。
关于您评论的第二部分：我不想为法律声明设置单独的 amp 和 non-amp 页面，只有一个 non-amp 页面。根据“如果我只有一页怎么办？”这很好。在您在上面提供的页面上 (ampproject.org/docs/guides/discovery)。
我不确定如何重现您面临的问题。 :-|
转到washingtonvoterfile.com。滚动到底部。点击任意链接。
我检查了页面，但在网络选项卡中没有看到任何对 amp js 文件的调用。问题在于您如何链接要加载的页面。您是否正确加载了整个页面？这就是您没有获得 amp-validation 的原因，因为没有调用 amp。

【解决方案2】：

对我自己的问题的不太满意的答案是，没有很好的方法可以从使用 JQuery Mobile 的页面链接到 AMP 页面，因为：

就我而言，我只是将 AMP 页面变成了非 AMP 页面。这对于这个用例来说很好。如果我真的需要它们成为 AMP，我需要重写主页上的搜索栏，这样我就不需要 JQuery Mobile。

【讨论】：

【解决方案3】：

您正在使用 jQuery Mobile 进行页面转换，但 AMP Validator 扩展仅在文档加载时运行。

为了支持这一点，AMP 验证器可以侦听 popstate 事件，但实际上没有理由这样做，因为 AMP 页面应该按原样加载。

【讨论】：