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
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
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
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'/>
Related
If I post a link to a website on Facebook, an image is rendered beside it.
How does facebook decide which image to load from my site?
Is it possible to control what image is displayed? Can I set this somewhere, maybe in the meta tags?
Facebook (and other companies after FB proposed this standard) uses the Open Graph Protocol to gather information from your page.
If you provide the relevant meta tags within your <head> tag, e.g.:
og:title - The document's title
og:type - The document's type
og:image - An image URL to represent your document (this is the bit you are interested in)
og:url - The canonical URL the document.
For the image meta tag:
<meta property="og:image" content="https://example.com/pony.jpg" />
It will use the information in these tags to populate the post. Other online and messaging services and will also use this information if present.
If the OGP meta tags are absent, FB (and other services) will crawl the URL and try determine as best as they can which image should be used instead.
Recently Google has added a new interface when users click the star icon in the address bar to add a website to their bookmarks.
The UI displays the page title as well as anything from the meta description element if present, but I was wondering if there's a way to set the image that's displayed, or whether this is just purely decorative on Chrome's part:
It seems to be some datas included in the head part of the pages.
You probably know that you can use meta tags to set some favicon, gps coordinates, and many other things.
Some new tags, the Opengraph meta tags, are now used to define some informations to best describe the content of the website you're browsing. For example, on facebook, when you share a link, these opengraph datas are used to create a small block which summarize and show a picture of the linked website.
So, to be clear and to speak about code, just try with this line in your head section:
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Tried it while writing this post on a little static website I'm working on, seems to work prefect !
It's looks like Google collect all images on the webpage et allow you to choose which one you want for your bookmark.
I want my website to become eligible for Google+ Direct Connect.
So after googling a bit I found this Google Support page, which has since been edited.
View Google Support page providing these instructions via WayBack Machine:
You can directly link your website by inserting a small snippet of
code on your website and then listing that website as your Google+
page's primary link in the About section of the profile. For example,
if your Google+ page’s primary link is set to www.pagewebsite.com,
you can create a bidrectional link by placing the following code snippet in the <head> tag of the site’s HTML:
<a href="https://plus.google.com/{+PageId}" rel="publisher" />
What gives? An anchor tag within the head?
I thought only title/meta/link tags are allowed in the head.
Is it legal to place that above snippet in the head tag?
I think there's an error in Google's documentation and this should be a <link>-tag, like this:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
You can test it on https://developers.google.com/structured-data/testing-tool/ if it works. Include the <link>-tag into your website and see what Google detects with this tool. There's a section "Publisher" where you can see if Google detects the correct information.
I'm using <link> on my sites and Google detects the correct values.
An a element inside head is of course invalid according to any HTML specification. I have no idea why Google tells you to do so, but presumably their software actually looks for such tags.
What happens in practice in browsers is that the a tag implicitly closes the head element (you can see this if you look at the document tree in Developer Tools in a browser). This isn’t as bad as it sounds, since the rest of elements meant to be in the head will still be processed normally. For example, even a title element works when placed inside body. To tell truth, the division of a document into head and body is just a formality.
The tag <a href="https://plus.google.com/{+PageId}" rel="publisher" /> will be taken as a start tag only, potentially causing naughty surprises, since the start of the document will then be inside a link (which might extend to the end of the document!). Only if the page were served with an XML content type would the tag be taken as “self-closing”. So if you have been forced into using such an element, at least write it with a real end tag;
It will still be bad for accessibility and usability, since empty links may still participate in tabbing order etc.
Using link tag is the right (and valid!) way to go in the header:
<link href="https://plus.google.com/{+PageId}" rel="publisher" />
If you stick with the verbatim anchor tag when following the instructions (Link your brand page to your website), then you'll be setting yourself up for something to blow up down the road.
We just experienced it, in fact. It seems starting with iOS 8.x, mobile Safari will see this anchor tag and move it (along with the code below it!) to the body. This broke a smart banner we had in place.
We switched to using a link tag and verified that Google still detects the correct values.
Everytime I share a link on facebook from my site, http://reviewsie.com, the twitter thumbnail is selected as the image thumbnail. (This also happens in pinterest and some of my ad tools.) How do I make a certain image stand out and get selected correctly?
You need to set this meta tag in your head
<meta property="og:image" content="http://yourdomain.com/image.jpg"/>
you need to use the Open Graph Protocol.
To check how Facebook sees your page, use the URL Checker tool at:
https://developers.facebook.com/tools/debug
for your own example, check the tool with your url
and you can find that you are not using the OGP and for such, it simply randomly selects one picture.
and it reminds you about it:
Inferred Property: The og:image property should be explicitly provided, even if a value can be inferred from other tags
If it's still showing old thumbnail, you need to refresh it on https://developers.facebook.com/tools/debug/
Enter your web site link and debug. After that you'll see 'Scare again' button there.
first off a short explanation... the following two lines assure that once my website is shared on facebook a custom image (share-thumbnail.png) is posted.
<meta property="og:image" content="images/share-thumbnail.png"/>
<link rel="image_src" href="<images/share-thumbnail.png" />
Can you guys think of any creative way to overwrite that behaviour when I click a specific sharing link on my page?
E.g. i have a <a class="special-sharing" href="#">Share with special image</a> anchor on my page and when that one is clicked I don't want to use the share-thumbnail.png defined in my header.
My thought was to use jquery to listen to click events on the .special-sharing link and then… preventDefault(); and change e.g. the content attr of my meta tag in the head to a new image src. Then call the facebook?sharer= blabla.
How would you solve that?
(Caveat: I'm not familiar with Facebook's API, just Javascript and the web in general.)
Unfortunately, you can't.
While it's possible to affect <meta> and <link> tags with jQuery (or Javascript in general), it isn't possible to make changes outside the currently-loaded copy of the page in the user's browser. When the link to Facebook is called, the current page is discarded and Facebook's page is loaded, which then performs its own hit on your page to get the og:image, which will still have the original value because the file on the server hasn't changed.
Instead, you could perhaps set up your server so that you can customize the image via the URL. For example, have http://www.example.com/mypage.php produce the default value for og:image, but http://www.example.com/mypage.php?special-image=foo.gif change the value of the <meta> tag. You could then use Javascript to change the sharer passed to Facebook so that it uses the special URL that points to the special image.