Mobile app version of vmapp.org
Login or Join
Gretchen104

: How to change which image from website is shown in Google search result? Can anyone tell me how Google decides which image to use when it shows an image with the search results (as is the

@Gretchen104

Posted in: #GoogleSearch #Images #Serps

Can anyone tell me how Google decides which image to use when it shows an image with the search results (as is the case with mobile search, sometimes)?

If you look at these mobile search results …



… and take the AliExpress.com result as an example, by inspecting the HTML you can see that the image used by Google seems to have no special declaration, etc. It is just the first JPG that appears in that page's HTML - so I was thinking maybe that's why it's the image that is used in the Google search results.

However, when you look at these mobile search results …



… and consider the Backpack Billboards result, the HTML reveals that the image being used is actually the seventh image declared in the HTML.

So can anyone shed any light on how Google determines which image to be displayed? I would like to know so I can then have control over which image is displayed for my site.

Update / Solution

Thanks to the answers, below, this is the code I have now added to my head HTML in order to get the thumbnail shown in Google when searching for backpack billboards:

<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "Product",
"name": "Regular Backpack Billboard",
"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": "Backpack 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"
}
}
}
</script>

10.06% popularity Vote Up Vote Down


Login to follow query

More posts by @Gretchen104

6 Comments

Sorted by latest first Latest Oldest Best

 

@Michele947

Go to Google Search Console >> Search Appearance >>


Structured Data
Rich Cards
Data Highlighter


Through these, you can customize SERP results.

And also you see GMB. there are lots of great resource on how you can manage your Google My Business dashboard. To illustrate

Edit your business information (scroll down this page and see information on images)

Google My Business Help

Hope this helps

10% popularity Vote Up Vote Down


 

@Candy875

You have to update your Google Local Business listing page with new images, your old images will be replaced with new one.

Also second option you can report them as spam directly shown in Search results.

10% popularity Vote Up Vote Down


 

@Hamm4606531

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.

10% popularity Vote Up Vote Down


 

@Si4351233

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.

10% popularity Vote Up Vote Down


 

@Cofer257

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:
search.google.com/structured-data/testing-tool
They'll also indicate any missing properties they require to process your schema data

10% popularity Vote Up Vote Down


 

@Berryessa370

It should be able to change through Google Search Console.
You can highlight data of your webpage, including the image representing that page/article that will be shown in Google SERP.

However, this is just a way to change it in Google Browser, I can't heslo tou with changing it on another browsers.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme