21

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>
8
  • What is/are the search query(s)?? It may be impossible to answer this question with knowing how you searched.
    – closetnoc
    Mar 29, 2017 at 19:58
  • I'm not sure what the search query was for this particular example. Are you suggesting the solution may be to try and include the search query into the desired image's alt tag, title tag or filename, etc? Mar 29, 2017 at 20:08
  • No. Search results rely upon the search query. As for myself, I would take the search query and see how it is resolved on the desktop first. From there, I can conclude where various result elements come from. Then I compare what elements remain for a mobile search and can often race back where result elements come from and why. Such as, the knowledge, the answer engine, or featured snippet.
    – closetnoc
    Mar 29, 2017 at 20:15
  • "Trace" back, I think you meant(?) What do you mean by "the knowledge" and "the answer engine"? Mar 29, 2017 at 20:20
  • Ooopppsss!! Sorry. The knowledge graph (missed this word) is a form if semantic fact database. Knowledge graph cards are based upon brand searches and fact links. The answer engine uses the knowledge graph to answer questions found within the query. Queries may not always be questions to be handled by the answer engine. A featured snippet do not use either the knowledge graph or the answer engine, however, does find a particular set of features found on the page that provide better semantic clues that appear to match the query directly. Results can be a mixed bag.
    – closetnoc
    Mar 29, 2017 at 20:31

6 Answers 6

19
+50

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

2
  • 1
    This is for a single-product (but multi-page) website. It is our home page that is appearing in the Google search results, so I'd like Google to show our product image. So, to achieve that, would I need to use your second code snippet on our home page? And, if so, would it be correct if I specifed the "url" value as the product page url rather than the home page url? Dec 23, 2017 at 9:54
  • 2
    @ban-geoengineering Yes you have understood it correctly. You would need an actual image URL hosted on your server in the Structured Data JSON LD Markup. Inshort, you would need to "tag" these images in various types of markup available. (e.g. markup - product, recipe, review, article, etc.) You can read more about Structured Data Product Markup here: developers.google.com/search/docs/data-types/product I will also elaborate more in separate answer. Dec 23, 2017 at 15:30
7

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

  1. JSON LD (Recommended as it is acceptable by Google, Yahoo, Bing and Yandex)

  2. Microdata

  3. 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

  1. Added three properties as an array under an attribute "name" of type "Product"
  2. Added three properties as an array under an attribute "brand" of type "Thing"
  3. 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.

11
  • I've updated my question with the working code. However, my customer is getting different results than me. For him, the image is only showing when searching for backpack billboards. Do you know what changes I need to make to the code in order to make the image also display when searching for walking billboards or human billboards? Jan 4, 2018 at 15:56
  • Are you targeting backpack billboards, walking billboards, and human billboards as three different keywords for a single product called “backpack billboards” or are these three totally different products? If they are totally different three products then you need to do an individual markup for each of them. Your case will be “Multiple Entities on the same page” and you need to mark them up individually. Jan 4, 2018 at 16:15
  • Plus, keep in mind that it totally depends on Google whether they want to show the image and other markup or not. They quote multiple reasons for the same - like user’s search history, the page’s traffic, page authority, page rank blah blah.. Something like, we never know if our girlfriend says yes or no while proposing her, but there is nothing wrong in trying ;) (If client argues a lot, then pitch him this example. :) ) Jan 4, 2018 at 16:21
  • The three different keywords are all for the same, single product, so what should I do in this situation? (Hopefully, it won't involve proposing to anyone! :-) ) Jan 4, 2018 at 17:08
  • In this case, I would suggest you to do some trials and experiments. Actually there are two different concepts which we are mixing at the moment. One is SEO and Second and Structured Data. You could rank higher for multiple keywords but Google needs to understand that these all are for the same products and it should consider them equally. Few things you can experiment are 1) prepare your Page SEO ready and write appropriate content for all of the 3 products - (suggestion is continue in my next comment ) Jan 5, 2018 at 0:57
5

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.

Screenshot search result London Eye on mobile Example for London Eye, using the River Cruise article image

1

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.

1
  • I couldn't see how to do this in Google Search Console. Could you provide the steps? (I have added a 100 bounty, so would be happy to award that to you if it works for me.) Dec 21, 2017 at 17:01
0

Go to Google Search Console >> Search Appearance >>

  1. Structured Data
  2. Rich Cards
  3. 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

-1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.