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>
alt
tag,title
tag or filename, etc?