使用页面上的第一个 amp-img 进行 facebook 分享答案

【问题标题】：Use the first amp-img on the page for facebook share使用页面上的第一个 amp-img 进行 facebook 分享
【发布时间】：2017-03-14 06:23:57
【问题描述】：

我有一个最近迁移到 amp-html 的博客网站。

我在使用amp-img 标签时遇到问题。首先，博主没有将第一张amp-img 识别为帖子的第一张图片，并且无法从中制作默认缩略图。

此外，当使用 amp-share 在 facebook 上共享页面时，所选图像始终是备用图像，我已使用 og:image 属性进行了标记。

图像分辨率超过 facebook 规定的最低要求。我已经看到这种安排在其他网站上运行良好。有人可以在这里快速浏览一下吗：Pratyush.info

【问题讨论】：

您能分享您在模板中添加的 Open Graph Meta 标签的代码吗？（主要用Blogger数据布局标签）
您的 AMP-html 配置无效，如果您将 #development=1 附加到 url，然后打开控制台，您将看到：http://www.pratyush.info/2017/03/india-culture-then-and-now.html:569:0 The tag 'script' is disallowed except in specific forms.
@elbaulp 也许你在错误的时间抓住了我。我正在测试一些东西，所以它会在大约半小时左右无效。现在有效。
@PrayagVerma
................................................ .....................最重要的是 ---

标签： html share blogger amp-html amp-img

【解决方案1】：

发布此问题几天后，我发现添加noscript 可以使博主识别图像并且可以与数据标签一起使用。所以在谷歌添加一些对 amp 标签的内置支持之前，这可能是某人正在寻找的东西。

<noscript><img alt="www.pratyush.info" height="382" src="https://lh3.googleusercontent.com/--vp_bO1ozGI/WPegTDKQJDI/AAAAAAAADnQ/FXdCyVKJkTwEj09XneY7csB2Vwd_zVQrQCLcB/milk-protein-intolerance-baby-cow-2160x1200.jpg" title="www.pratyush.info" width="680"></noscript>

DEMO

【讨论】：

【解决方案2】：

我认为您的问题是您的meta 标签不正确，在您发布的链接中是

<meta content='https://1.bp.blogspot.com/-agH78RbEntg/WMFULOdxPMI/AAAAAAAADUI/0zId8itGNnA8GawUbVZqeewxq1DzGumyACLcB/s1600/pratyush.info-default-news.jp' property='og:image'/>

虽然url是图片，但扩展名无效，尝试将图片名称更改为有效的图片扩展名，如png或jpg

【讨论】：

情况与您的观察预测相反。如果是问题所在，则不应加载此图像，但“pratyush.info-default-news.jp”实际上是始终加载的图像。尽管如此，我将其更改为 .jpg 的方式。

【解决方案3】：

包含在<head> 标记中的数据布局标记data:post.firstImageUrl 将始终返回空，因为post 命名空间仅在语句<b:loop values='data:posts' var='post'> 中定义，该语句存在于博客小部件中

相反，您必须在og:image 标记中使用数据布局标记data:blog.postImageUrl 才能获得高分辨率图像。代码将像 -

<meta expr:content='data:blog.postImageUrl' property='og:image'/>

【讨论】：

这确实是个错误。谢谢你指出这一点。但是我仍然无法加载帖子中的图像。我还注意到，即使是像“热门帖子”这样的标准博客小部件也不会显示带有“amp-img”标签的页面的缩略图。但是，如果我使用“img”标签，facebook 分享和“热门帖子”都可以显示缩略图。我在页面底部添加了一个小部件进行演示。
我检查了您的博客在通过谷歌搜索结果访问时的外观。 AMP 版本确实显示没有问题的帖子图像 - 检查屏幕截图 - i.imgur.com/6FZNvSe.png。从我的角度来看，帖子图片是可见的。
帖子图片可见，但同一图片放置在“amp-html”中时无法被 facebook 分享或博客日期布局标签识别。保持其他所有内容相同，只需将其替换为“img”标签 - 它无处不在。
我注意到og:image 标签仍在使用备用图片。您是否已将 Blogger 布局标签替换为 data:blog.postImageUrl 在 <head> 标签内？此外，包装og:image 标签的条件将是<b:if cond='data:blog.postImageUrl'> 而不是<b:if cond='data:blog.postImageThumbnailUrl'>。