Showing the right image in search results
Published: March 13, 2026
We've all had it happen. The wrong image showing up in search results for a top selling product!
Google's documentation says the image shown is the one they feel "is the most relevant image from that particular web page for the given query."
This often led to Google getting it wrong and resulting in the wrong image showing up in search results. Sometimes the images aren't of the product on the page. Instead, they are a random product in the recommended products section or an image in the footer. So incredibly frustrating!
Fortunately, Google gave us the answer with the use of primaryImageOfPage.
By including the primaryImageOfPage in the structured data, we can now influence which image gets selected for search results.
Google's algorithm still determines which image they show in search results, but at least we can try to influence the algorithm.
Adding the primaryImageOfPage
For JSON-LD for SEO customers, we're automatically adding the primary image of the page when available. No action is required from you.
In other words, as long as an image is assigned to the product, blog post, or collection page, we'll include the primaryImageOfPage.
Custom primaryImageOfPage with metafields
You can also set a custom image for the product, blog posts, and collection page or add an image where no image exists.
The primaryImageOfPage field can be added using the following metafield to any page type in Shopify including but not limited to:
- Homepage (shop metafield)
- Products
- Collections
- Pages
- Blog Posts
namespace: jsonld
key: webpage_image
type: single_line_text or string
We'll use Shopify's native metafield editor for our example but you can use your metafield tool of choice.
-
Select Settings and go to Metafields and metaobjects
-
Select Products
-
Select Add a definition
-
Enter whatever name you wish, I used Webpage Primary Image.
-
Click on the light grey text to change the namespace and key. This is required for the data to work correctly.
-
Change the namespace and key to match the following text exactly. You can copy and paste if needed.
jsonld.webpage_image -
Change the type to use single_line_text.
-
Select Save
Set your value
-
Now go to the URL you wish to use a custom
primaryImageOfPagefield in the Shopify Admin. Scroll down until you see Metafields and locate the metafield we just created. In the box, paste the image URL you want to use.
-
Select Save at the top of the page.
Test the new data
Once that’s done you can test the product in Schema Markup Validator. Note that the Rich Results Testing Tool does not show the WebPage markup (yet).
Run the product URL through the Schema Markup Validator. Open up the WebPage data - if there is more than one, look for our data with #json-ld-for-seo-webpage appended to the @id. Once you found our data, search for primaryImageOfPage and the URL should match the same URL you entered.
From here, you'll just need to wait for Google to recrawl and reanalyze the page. Once that happens, you should be good to go.
Not a JSON-LD for SEO customer but want the ability to add or customize the primaryImageOfPage field? Contact me for a free structured data audit or install JSON-LD for SEO now.
