How to change which image from website is shown in Google search result?
You can indicate to Google which image you'd like used for your property using Schema.org markup. Here's a quick company website example:
<script type="application/ld+json">
{"@context" : "http://schema.org",
"@type" : "Organization",
"name" : "Example Company",
"url" : "https://www.example.org",
"logo": "https://www.example.org/images/my-logo.png" }
</script>
Searching for that company is now much more likely to show that logo when Google needs an image.
If you're doing it for a product page, you'll need this markup:
<script type="application/ld+json">
{"@type": "Product",
"image": "http://example.org/product-image.png",
"url": "http://example.org/my-products-url",
"name": "Example Product Name"
}
</script>
You can then test the implementation using this tool to make sure Google is picking it up:
https://search.google.com/structured-data/testing-tool
They'll also indicate any missing properties they require to process your schema data
The issue you've cited is because Google is unable to determine which is your main image and that is why, it randomly pics an image on that page to show on the SERP result.
It is also dependent on which search query you've entered and which page (offer details page, offer listing page, seller's store front page etc) is displayed on the search result.
However, if I consider that in both of your screenshots the same page is appearing then here are possible solutions which you can apply on the page.
We can let Google crawler know what our page "means" through Strucuted Data Markup. We have to "tag" each and every elements on our page so Google understands it well and then gives enhanced results on the SERP.
You can tag this structured data markup programatically in either of these three formats
JSON LD (Recommended as it is acceptable by Google, Yahoo, Bing and Yandex)
Microdata
- RDFa
The JSON LD code example is already explained above by L Martin. You can read more about JSON LD product markup here.
Incase you want to do it quickly, then Google also has a Structured Data Markup Helper tool which you can use from the Google Webmasters.
Once it is done, then Google will understand which image to show on the search result page.
Hi, after the discussion in comments, here is the code which you can try and experiment. I have checked in Structured Data Testing Tool and it is working fine.
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": [
"Regular Backpack Billboard",
"Walking Billboards",
"Human Billboards"
],
"image": [
"https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-1x1.jpg",
"https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-4x3.jpg",
"https://backpackbillboards.com/wp-content/uploads/2017/12/backpack-billboards-16x9.jpg"
],
"description": "Backpack Billboards feature a rechargeable battery which powers the internal LED lights providing a bright illuminated display for up to 8 hours.",
"sku": "BPBB8",
"brand": {
"@type": "Thing",
"name": [
"Regular Backpack Billboard",
"Walking Billboards",
"Human Billboards"
]
},
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": "299.00",
"priceValidUntil": "2020-11-11",
"itemCondition": "http://schema.org/NewCondition",
"availability": "http://schema.org/InStock",
"seller": {
"@type": "Organization",
"name": [
"Backpack Billboards",
"Human Billboards",
"Walking Billboards"
]
}
}
}
</script>
I've tried following
- Added three properties as an array under an attribute "name" of type "Product"
- Added three properties as an array under an attribute "brand" of type "Thing"
- Added three properties as an array under an attribute "name" of type "Organization"
This script works in structured data testing tool, however, not sure if it the correct solution as per your query. Try it first and let me know if it works or not.
As a Google Top Contributor on the Webmaster Central Help Forum I've seen a lot of questions and use-cases. This specific question about the thumbnail relates to other questions where Google can behave in a similar way.
What these thumbnails are not: Based on other comments, these thumbnails are not:
- Business listings
- Structured data / rich snippets / json or schema data
- Part of the knowledge graph
- Part of carrousels like news articles / POIs
To my humble opinion the techniques behind these thumbnails and the A.I. of Google to decide to show them or which one are more related to title tags and meta descriptions than to structured data / rich snippets. So that's why I'll start with some basic explanation of how title tags and meta descriptions are shown. And follow that up with the thumbnails.
Title tags You can set a title-tag, but Google may change it if the title contains spam, is the same for on every page is missing relevant information or if Google can determine a title based on the content which is more related to the search query.
Meta description You can set a meta description. Again: if it is relevant, represents the content of the page and is related to the search query, probably Google will show your meta description. If Google thinks it can generate a more relevant, more attractive description, it will show their own preferred meta description.
Recently Google increased the length of the description in search results. So basically Google already adapts / extends most meta descriptions now. Best practice might be to leave your meta description empty, just like Wikipedia does.
Thumbnails
So basically Google can show images, especially when you didn't set things up. The thumbnails Google uses inside a search result item are used to strengthen your visibility / representation. As what I have seen so far and how I think Google would approach it, you can point Google in a direction to show a thumbnail on these conditions:
- the image of course needs to be crawlable and indexed, so don't prevent or block crawling.
- placed at the start / inside the main content of the page. In the past I had a website where I had an
<img>
inside the first<p>
. Google just used that image as thumbnail. And they even used the alt text in their version of meta description (which didn't look that good). At least the image was closely related to the main content. They strengthen each other. - the image needs to be unique. It would look strange if Google showed the same (stock) thumbnail for every search result on the first page.
- the image needs to be related to the search query and needs to represent it. When I search for 'London Eye', Google manages to generate a thumbnail of the head-image of the 4th article in this page. The head-images of the first three articles don't show the london eye. These images don't even have alt texts and the article is titled 'river cruise', so textual context is not taken care of. I think we can assume the image A.I. did a lot of work here. Screenshots are attached below.
- visible above the vow (on desktop). I don't have any prove for this, this is an assumption. But I think it helps a lot if the image is visible in the fetch&render tool from Google. And the indexed is nowadays still based on desktop, this year it will probably move to mobile first indexing. I think it's important that the image you want to show as a thumbnail needs to be one of the first images visible for visitors.
- used in the opengraph meta data and in the main content of the page. The opengraph meta data. Compare this with the meta description. If your
og:image
represents the page, is visible on the page and is related to the search query, why wouldn't Google use this one to generate it's thumb. - used in a (valid or invalid) meta tag (example) and in the main content of the page. The strange thing of this example is that it is the 3rd or 4th image in the slideshow, but it is mentioned in a custom meta tag. Maybe that's the reason why Google selected that one to generate a thumb.
- ignoring structured data. Structured data is used in carrousels for news, products, articles and so on... I haven't seen any relation between structured data and the thumbnails inside a search result item so far.
There isn't really clear documentation about it, but I found this blog post which is related to our discussion in here: Googles findings about watermarked images.. At least Google's findings about thumbnails are:
- Users prefer large, high-quality images (high-resolution, in-focus).
- Users are more likely to click on quality thumbnails in search results. Quality pictures (again, high-res and in-focus) often look better at thumbnail size.
- Distracting features such as loud watermarks, text over the image, and borders are likely to make the image look cluttered when reduced to thumbnail size.
Update 25-12: Fellow TC Barry Hunter pointed me to this twitter discussion where John Mueller says blocking this image is only possible with robots.txt.