Google AMP 图片请求是 404 的答案

【问题标题】：Google AMP image requests are 404'ingGoogle AMP 图片请求是 404 的
【发布时间】：2016-11-25 15:07:16
【问题描述】：

我的 AMP 网页正在通过验证，但有些图片出现 404 错误。从我的网站访问页面时，图像加载正确。但是，当从 Google 的 AMP CDN 加载页面时（我相信它们会缓存所有页面），某些图像会返回 404。

在网络选项卡中，我注意到在我的网站上的图像 GET 请求是正确的（内容类型：图像/PNG）。另一方面，Google 的缓存页面会针对未加载的图像发出内容类型为“text/html”的 GET 请求。 GET 响应是一个基本的 HTML 页面，指示 404。

应该注意的是，有几张图片确实加载成功。它们存储在图像文件夹中，并远程存储在解析服务器上。两个图像位置都已成功提供图片，但并非一直如此；而且我似乎找不到任何可能导致某些响应 200，其他响应 404 的不一致。

我将不胜感激任何解决这个问题的提示！

编辑：谷歌可能还没有缓存图像吗？页面本身肯定是缓存的。

【问题讨论】：

提供一个示例页面的链接会很有帮助。要检查的一件事是是否允许 GoogleBot 访问所有图像，或者是否某些图像被阻止，例如通过 robots.txt。
@SebastianBenz 抱歉，这是一个示例链接：google.ca/amp/s/chargehub.com/amp/en/countries/united-states/… 请务必在移动设备或模拟移动设备上查看它以防止重定向（Chrome 中的 Ctrl+Shift+i ，点击左上角的手机图标，选择iPhone 6等手机）

【解决方案1】：

问题在于您使用的是图像的相对路径而不是绝对路径。所以下面的<amp-img>标签，

<amp-img ... src="/images/city_images/633_Image.png">

需要

<amp-img ... src="https://chargehub.com/images/city_images/633_Image.png">

这应该可以解决您的问题。

【讨论】：

【解决方案2】：

加载您的示例链接时，https://cdn.ampproject.org/ii/w1000/s/chargehub.com/images/city_images/633_Image.png 得到 404。当我从您的服务器请求相应的原始图像时，我看到一个Cache-Control: no cache 标头：

% HEAD https://chargehub.com/images/city_images/633_Image.png | grep Cache-Control
Cache-Control: no-cache

虽然我不知道为什么也使用Cache-Control: no cache 提供的其他图像，例如https://chargehub.com/logos/ChargeHub-Logo.png，做会被缓存，但我会尝试指示您的网络服务器不要设置这个标题看看是否有帮助。

【讨论】：

【解决方案3】：

问题定位！这些图像最初是从 Google 的 Image API 中提取的。 API 允许我指定文件格式（我想要 .png 的）。不幸的是，如果 Google 拥有的图像是 JPEG，他们只是添加了一个 .png 扩展名并将其返回给我。

基本上，如果 AMP-IMG 需要 example.png，那么它只有在 example.png 真正是 png 编码时才有效（您可以通过在文本编辑器中打开文件来判断编码，PNG 附近会有一个“png”顶部）。

在我的例子中，example.png 实际上是 example.jpg 重命名为 example.png（仍然是 jpeg 编码）。 Google 的缓存服务不喜欢这样，返回了 404。

我只是将所有照片重命名为 .jpg 扩展名，然后使用 Photoshop 将它们批量转换为真正的 .png。如果其他人遇到困难，希望这会有所帮助！

【讨论】：