2

I have a blogger website that I have recently migrated to amp-html.

I am having problems with the usage of amp-img tag. Firstly blogger does not recognize the First amp-img as the first image of the post and fails to make the default thumbnail out of it.

Also when sharing a page on facebook using amp-share, the selected image is invariably the fallback image, that I have tagged with og:image property.

The image resolution is more than the minimum mandated by facebook. I have seen this arrangement working fine on other websites. Can someone please have a quick look here: Pratyush.info

JF Bastien
  • 6,673
  • 2
  • 26
  • 34
Pratyush Srivastava
  • 79
  • 11

3 Answers3

2

A few days after posting this question I discovered that adding a noscript makes the image identifiable by blogger and can be used with data tags. So till google adds some inbuilt support for amp tags, may be this could be what someone is looking for.

<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

Pratyush Srivastava
  • 79
  • 11
1

I think your problem is that your meta tag is incorrect, in the link you post is

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

Although the url is an image, the extension is not valid, try to change the name of the image to a valid image extension, like png or jpg

Alejandro Alcalde
  • 5,990
  • 6
  • 39
  • 79
  • The case is opposite of what your observation predicts. If it was the problem, this image should not get loaded , but "pratyush.info-default-news.jp" is infact the image that ALWAYS gets loaded. Nevertheless the way I changed it to .jpg. – Pratyush Srivastava Mar 15 '17 at 16:48
1

The data layout tag data:post.firstImageUrl include in the <head> tag will always return empty because the the post namespace is only defined within the the statement <b:loop values='data:posts' var='post'> which is present inside the Blog widget

Instead, you will have to use the data layout tag data:blog.postImageUrl in the og:image tag to get a high-resolution image. The code will be like -

<meta expr:content='data:blog.postImageUrl' property='og:image'/>
Prayag Verma
  • 5,581
  • 3
  • 30
  • 56
  • 1
    That was indeed a mistake. Thank you for pointing that out. But I am still not able to get the image in the post to load. Also I noticed that even standard blogger widgets like "Popular posts" does not show the thumbnails for pages with "amp-img" tag. However both facebook share and the "Popular posts" are able to display thumbnails if i use "img" tag. I have added a widget at the bottom of the page to demonstrate. – Pratyush Srivastava Mar 15 '17 at 18:58
  • I checked how your blog looks when it is accessed via google search results. The AMP version does show the post image without issue - Check screenshot - http://i.imgur.com/6FZNvSe.png . The post image is visible without problem from my end. – Prayag Verma Mar 15 '17 at 19:16
  • The post image is visible but the same image is not being recognized by facebook share or blogger date layout tags when placed in "amp-html". Keeping everything else same, just replacing it with "img" tag - it is recognized everywhere. – Pratyush Srivastava Mar 15 '17 at 19:35
  • I noticed that the `og:image` tag is still using the fallback image. Have you replaced the Blogger layout tag to `data:blog.postImageUrl` inside the `` tag? Also, the condition wrapping the `og:image` tag would be `` instead of `` . – Prayag Verma Mar 15 '17 at 19:54
  • – Pratyush Srivastava Mar 16 '17 at 08:18
  • I get the issue now. Because the image is being added to the `amp-img` tag, Blogger is unable to find an image in the post (even though it is present) and the layout tags for fetching the image return empty. The alternative is to insert the `og:image` meta dynamically via JavaScript, but isn't support by Facebook (Refer to http://stackoverflow.com/a/16485238/933980 ). Another alternative being that you have to insert the image via the `` tag in the post content but that will make the AMP page invalid – Prayag Verma Mar 16 '17 at 08:48
  • Exactly. And i think this must be taken up as a bug in blogger now. Is there a way to draw their attention? ( I am very new to blogger) – Pratyush Srivastava Mar 16 '17 at 09:51
  • It would be quite difficult to raise this issue with Blogger. You can try the official forum or developer forum, but there is no guarantee that they would look into it. Hope they implement AMP for Blogger so that these issues can be resolved. – Prayag Verma Mar 16 '17 at 11:08
  • @PratyushSrivastava You might be able to do fix this issue by implementing the Facebook SDK and overriding the Share UI Dialog. Refer to this answer http://stackoverflow.com/questions/23781698/fb-ui-share-set-the-title-message-and-image/33924247#33924247 – Prayag Verma Apr 04 '17 at 17:20
  • I can try to load it in an amp-iframe, Is there any better way to do that. – Pratyush Srivastava Apr 05 '17 at 06:29