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

Question

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

我在使用 amp-img 标签时遇到问题。首先，博主无法将第一个 amp-img 识别为 post 的第一张图片，并且无法将其作为默认缩略图。

此外，当使用 amp-share 在 Facebook 上分享页面时，所选图像总是后备图像，我已用 og:image 属性.

标记

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

Answer 1

我认为你的问题是你的meta标签不正确，在link你post是

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

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

Answer 2

包含在 <head> 标签中的数据布局标签 data:post.firstImageUrl 将始终 return 空，因为 post 命名空间仅在语句 [=14] 中定义=] 存在于博客小部件中

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

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

Answer 3

发布此问题几天后，我发现添加 noscript 可使博主识别图像并可与数据标签一起使用。所以直到 google 添加了一些对 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

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

Use the first amp-img on the page for facebook share

html

share

blogger

amp-html

amp-img