从非 amp html 页面链接的 amp-html 页面无效
amp-html page linked from non-amp html page not working
https://www.washingtonvoterfile.com is a traditional html (not amp-html) page with links to amp-html pages (for example: https://www.washingtonvoterfile.com/legal-notice.html).
直接加载这些 amp 页面时,它们会正确呈现,并且 Google Chrome AMP 验证器插件表明它们是有效的 AMP。
当通过点击(非放大器)主页上的 link 加载时,它们在没有 amp.js 加载的情况下呈现。 Google Chrome AMP 验证器插件显示为灰色,表明它们不是 AMP 页面。
如果刷新,amp.js 会加载并正确呈现。该插件显示 AMP 有效。
我已经尝试使用硬 links、亲戚 links 等来解决这个问题,但没有成功。
如有任何意见,我们将不胜感激。
更新
问题似乎是主页上使用的 JQuery Mobile 的工作方式造成的。基本上,任何 linked 页面的 head 标签中的大多数项目都不会加载。
解决此问题的一种方法是将脚本标签移动到 body 标签 (https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page) 中,但该方法不起作用,因为 amp 脚本必须加载到 head 标签中。
您在 amp-page 中提供的 link 是:
<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice"/>
不存在。
如果您只有一个页面,并且该页面是 AMP 页面,您仍然必须向其添加规范 link,然后它将简单地指向自身:
<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice.html"/>
另外,正如您所解释的,您正在通过非 amp 页面打开一个 amp 页面 linked,即使它们彼此没有连接。
应该有两个页面,一个非 amp,它有一个指向 amp 页面的规范标签。
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
并在 amp-page 中:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
如果您只有一个独立的 AMP 网页,它应该 link 如上所述。
希望对您有所帮助!
您正在使用 jQuery 移动设备进行页面转换,但 AMP 验证程序扩展仅在文档加载时 运行。
为了支持这一点,AMP 验证器可以侦听 popstate
事件,但实际上没有理由这样做,因为 AMP 页面应该按原样加载。
我自己的问题的不太令人满意的答案是,没有好的方法可以从使用 JQuery 移动设备的页面 link 到 AMP 页面,因为:
- JQuery 移动设备不会加载 linked 的 head 标签中的大部分内容
页数。
- amp.js 不能按照 AMP 规则进入 body 标签。
- JQuery Mobile 和 amp.js 冲突,所以 amp.js 无法在主页上加载。
就我而言,我只是将 AMP 页面制作成非 AMP 页面。这对于这个用例来说很好。如果我真的需要它们成为 AMP,我需要重写主页上的搜索栏,这样我就不需要 JQuery Mobile。
https://www.washingtonvoterfile.com is a traditional html (not amp-html) page with links to amp-html pages (for example: https://www.washingtonvoterfile.com/legal-notice.html).
直接加载这些 amp 页面时,它们会正确呈现,并且 Google Chrome AMP 验证器插件表明它们是有效的 AMP。
当通过点击(非放大器)主页上的 link 加载时,它们在没有 amp.js 加载的情况下呈现。 Google Chrome AMP 验证器插件显示为灰色,表明它们不是 AMP 页面。
如果刷新,amp.js 会加载并正确呈现。该插件显示 AMP 有效。
我已经尝试使用硬 links、亲戚 links 等来解决这个问题,但没有成功。
如有任何意见,我们将不胜感激。
更新
问题似乎是主页上使用的 JQuery Mobile 的工作方式造成的。基本上,任何 linked 页面的 head 标签中的大多数项目都不会加载。
解决此问题的一种方法是将脚本标签移动到 body 标签 (https://forum.jquery.com/topic/script-not-running-unless-i-refresh-page) 中,但该方法不起作用,因为 amp 脚本必须加载到 head 标签中。
您在 amp-page 中提供的 link 是:
<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice"/>
不存在。
如果您只有一个页面,并且该页面是 AMP 页面,您仍然必须向其添加规范 link,然后它将简单地指向自身:
<link rel="canonical" href="https://www.washingtonvoterfile.com/legal-notice.html"/>
另外,正如您所解释的,您正在通过非 amp 页面打开一个 amp 页面 linked,即使它们彼此没有连接。
应该有两个页面,一个非 amp,它有一个指向 amp 页面的规范标签。
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
并在 amp-page 中:
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
如果您只有一个独立的 AMP 网页,它应该 link 如上所述。
希望对您有所帮助!
您正在使用 jQuery 移动设备进行页面转换,但 AMP 验证程序扩展仅在文档加载时 运行。
为了支持这一点,AMP 验证器可以侦听 popstate
事件,但实际上没有理由这样做,因为 AMP 页面应该按原样加载。
我自己的问题的不太令人满意的答案是,没有好的方法可以从使用 JQuery 移动设备的页面 link 到 AMP 页面,因为:
- JQuery 移动设备不会加载 linked 的 head 标签中的大部分内容 页数。
- amp.js 不能按照 AMP 规则进入 body 标签。
- JQuery Mobile 和 amp.js 冲突,所以 amp.js 无法在主页上加载。
就我而言,我只是将 AMP 页面制作成非 AMP 页面。这对于这个用例来说很好。如果我真的需要它们成为 AMP,我需要重写主页上的搜索栏,这样我就不需要 JQuery Mobile。