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.
Related
When you send a link via text, facebook message, or any mainstream messaging client you'll notice it generates a "rich preview". This is basically an image that pops up of the website you are linking.
I understand how to set this property, for example
<meta property="og:title" content="European Travel Destinations">
<meta property="og:description" content="Offering tour packages for individuals or groups.">
<meta property="og:image" content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" content="http://euro-travel-example.com/index.htm">
but I want to know how to use it.
What I'm trying to do is setup a website with a table of links and I want each link to not be just a text link, but a square image. I want those images to be generated based on the links as rich previews just like in messaging clients.
(If it helps I'm trying to pull from google photos albums, so I'm hoping the rich preview will be the album cover and the title will be the name of the album)
Ex: I want to obtain, album title, and cover image from
https://photos.app.goo.gl/5VogRQ6CvoVOJKpq1
I would also like to use the title and description but I'm sure the process is the same.
The big companies like Facebook and Twitter all have their own spiders that periodically crawl the web looking at the DOM of websites. If they see the relevant tags, they'll generate their respective 'preview' automatically.
Literally all you need to do is have the right <meta> tags in your head section. You've demonstrated the OpenGraph protocol in your sample above, which is used by most sites.
The basic tags, according to OpenGraph are:
og:title - The title of your object as it should appear within the graph, e.g., "The Rock".
og:type - The type of your object, e.g., "video.movie". Depending on the type you specify, other properties may also be required.
og:image - An image URL which should represent your object within the graph.
og:url - The canonical URL of your object that will be used as its permanent ID in the graph, e.g., http://www.imdb.com/title/tt0117500/.
There's a number of others, though those are the main ones that you need.
Sites often define their own prefixes though. Twitter, for example, additionally uses a custom twitter: prefix to allow for some extended functionality.
Facebook has a debug tool through which you can submit your URL to have them forcibly update their preview, and Twitter has their own card validator which will also forcibly crawl the site.
Simply wait for the site in question to crawl your own website, or submit your site manually through a respective tool, and your preview will be crafted. This preview will apply to anyone who attempts to hotlink to your website, not just you as the person who used the tool.
Hope this helps!
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'/>
What code elements do I need to add/modify on a Web page to ensure that it gets embedded properly on a facebook status update?!
See below for an example of what I think is a good embed:
Some web pages I tried to embed don't appear very well on facebook i.e. when you put their links in a status update. Also, sometimes it gives you a selection of images to choose from?!
Is this purely a <meta> tag play, or are there other things I could do to ensure that the web page gets embedded the way I want it to (images and all)?!
Thanks.
Yes this is meta tags at work. You need to specify Open Graph metadata to define what appears on Facebook. See http://ogp.me/
Lots of sites these days are able to extract the most appropriate thumbnail from a URL. For example, here it finds the picture of a headless Superman:
for example,
from this article.
Suppose that I want to control which thumbnail bots like this fetch for my URL, can I do that with a HTML meta tag or something?
In particular my page that I have in mind does not have a picture that is bigger than all the others.
I'm sure there isn't a solid standard but perhaps there's a decent convention that I can tap in to.
Place this inbetween the <head></head> tags.
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
Open Graph Protocol
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.