通过JavaScript添加amphtml标签后，Google AMP测试显示页面无效？

没错，这确实是因为你通过JavaScript动态添加amphtml可发现性标签导致的问题。

核心原因： #

Google的AMP测试工具（以及搜索引擎爬虫）在抓取页面时，只会解析初始的静态HTML内容，不会执行页面中的JavaScript代码。当测试工具或爬虫请求你的页面时，amphtml标签还没被JS添加到<head>里，所以它们根本检测不到这个标签，自然会判定页面无效。

而Chrome的AMP Validator扩展是在浏览器的运行环境中工作的，它会完整执行页面的JS代码，所以能看到动态添加后的amphtml标签，也就可以识别到对应的AMP页面。

解决方案： #

要解决这个问题，你需要把amphtml标签直接静态嵌入到页面的<head>区域中，而不是通过AJAX请求后动态添加。这样一来，测试工具和爬虫在首次加载页面时，就能直接读取到这个标签，从而正确识别并验证你的AMP页面。

举个简单的静态嵌入示例：

<head>
  <!-- 静态添加amphtml标签 -->
  <link rel="amphtml" href="https://your-domain.com/path/to/amp-version.html">
</head>

这样修改后，再用Google的AMP测试工具检测，应该就能正常识别到AMP页面了。

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