How can i get a specific product Image from my shopify store to appear in google’s SERP?

Solved

How can i get a specific product Image from my shopify store to appear in google’s SERP?

CindyMoraDev
Shopify Partner
7 0 2

What mistake am I making in the changes I have applied to the products to display the second image in media in SERP Sections like Normal search, People also buy from, and Popular products?

We want to show the image as the third option in the screenshoot. Store: solti.com

Annotation 2024-11-04 172438.jpeg

 

After research, I applied changes in the product page and schema on October 22, but the images are not changing.

 

  • Optimize the file name. Include the name of your company and keyword. Ex: CompanyName_Mens_GreenLanternHat.jpg (keyword =Green Lantern Hat)   In Store File name: Sol-ti_GingerShot_ImmunityBoost_SuperShot
  • Image is compressed to an acceptable size for fast loading. In Store: Optimized
  • Fill out the Alt tag and include the keyword one time. Ex: Picture of a men's Green Lantern Hat sitting on a white shelf. Al text: A GINGER SuperShot bottle next to lemon slices, ginger root, and a green apple
  • Change product page schema code. In Store: 

<script type="application/ld+json">

{

      "@context": "https://schema.org/",

      "@type": "Product",

      "name": "{{product.title |escape}}",

      {% if product.media.size > 0 and product.media[0].media_type == 'image' %}

      "image": [

        "https:{{ product.media[1].image | img_url: '960x960' }}",

        "https:{{ product.media[1].image | img_url: '960x720' }}",

        "https:{{ product.media[1].image | img_url: '960x540' }}"

      ],

      {% endif %}

      "description": "{{product.description | strip_html | escape}}",

      "brand": {

        "@type": "Brand",

        "name": "{{product.vendor |escape}}"

      },

      "offers" : {

        "@type" : "Offer",

        "availability" : "https://schema.org/{% if product.available %}InStock{%else%}SoldOut{%endif%}",

        "price" : "{{product.price | money_without_currency }}",

        "priceCurrency": "{{shop.currency}}",

        "url" : "{{ shop.url }}{{routes.root_url}}{{product.url}}"

      }

}

</script>

CindyMoraDev
Accepted Solution (1)

Avitanshi_17
Pathfinder
100 10 14

This is an accepted solution.

Hey there!


Let’s tackle this step-by-step to make sure that the second image appears on Google SERP, People Also Buy From, and Popular Products sections. Sounds like you've put in a lot of work already, so I’ll just walk you through a few tweaks that might be the missing piece.


Step 1: Double-check the Image Schema Code

 

From what you've shared, I think the issue might be with the placement of your images in the JSON-LD schema markup. Google typically pulls the first image listed in the "image" array for the thumbnail, so we want to make sure the second image is listed first.
Here's what your code should look like, with the second image prioritized:


<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{product.title | escape}}",
"image": [
"https:{{ product.media[1].image | img_url: '960x960' }}",
"https:{{ product.media[0].image | img_url: '960x720' }}",
"https:{{ product.media[2].image | img_url: '960x540' }}"
],
"description": "{{product.description | strip_html | escape}}",
"brand": {
"@type": "Brand",
"name": "{{product.vendor | escape}}"
},
"offers" : {
"@type" : "Offer",
"availability" : "https://schema.org/{% if product.available %}InStock{%else%}SoldOut{%endif%}",
"price" : "{{product.price | money_without_currency }}",
"priceCurrency": "{{shop.currency}}",
"url" : "{{ shop.url }}{{routes.root_url}}{{product.url}}"
}
}
</script>

 

In the above code:
Make sure product.media[1] is actually the second image in your media gallery. If it’s not showing correctly, swap it with product.media[0] to get the desired image to display first.

 

Step 2: Verify Alt Tags and Filenames


You did a solid job optimizing the filenames and alt text, but let’s confirm these match up. Here’s how to do a quick double-check in Shopify:

  1. Go to your Shopify Admin and navigate to Products > All Products.
  2. Open the product you’re working on, scroll down to the Media section, and click on the image you want Google to use as a thumbnail.
  3. For the Alt Text, use something descriptive and keyword-rich, like “Sol-ti Ginger SuperShot bottle next to lemon slices, ginger root, and a green apple.” This matches what you want Google to understand about the image. (If you’re still missing this info, you can click "Edit Alt Text" directly on the image, add it, and then save.)
  4. Confirm the Filename for the image (e.g., Sol-ti_GingerShot_ImmunityBoost_SuperShot) is set up correctly. If not, you can re-upload the image with the right name.

Step 3: Clear Cache and Resubmit Sitemap to Google


If everything above looks good, it’s possible that Google hasn’t updated yet. Let’s try to speed up that process:

  1. In Shopify, navigate to Online Store > Preferences.
  2. Scroll to Search Engine Listing Preview and click on Edit Website SEO to double-check your updated SEO fields.
  3. Once you're sure everything is set, head over to Google Search Console. If you haven’t already, submit your updated sitemap.xml file to make sure Google crawls the changes faster. (To resubmit: In Search Console, go to Index > Sitemaps, remove any old sitemap if needed, and add /sitemap.xml.)
  4. Finally, clear your browser’s cache or try incognito mode to check if Google has updated the image preview.

Extra Tip: Shopify Metafields for More Image Options

 

If this approach doesn’t work as expected, you might want to set up Shopify Metafields to control which images display where.
Go to Settings > Custom Data > Products.
Add a metafield specifically for "SERP Image" and link it to the desired product image. Then, update your schema code to pull this specific metafield instead of just the product image.


Once you’ve done this, give it a little time (Google updates can take a few days).

Hope this helps, and feel free to share a screenshot if something doesn’t look right—happy to dive deeper!

Stay inspired,
Best regards,
Avitanshi
Contact Us at www.mastroke.com

View solution in original post

Replies 6 (6)

sanjnalal
Shopify Partner
81 2 4

Hi CindyMoraDev, 

 

You have to change the 'social sharing image' to get the desired image in the SERP. 

 

1. Click on 'online store' then navigate to 'preferences' 

sanjnalal_0-1730892341187.png

 

2. You can change your social share image from here

 

sanjnalal_1-1730892415203.png

 

As a pro tip - stick to the recommended 1200 x 628 px size. If you don't have an image with that size, you can always go to canva, add in the custom dimensions to create one. Hope this helps!

 

Sanjna Lal | Content Marketing Manager @ AdNabu


 - Was my reply helpful? Click Like to let me know! 


 - Was your question answered? Mark it as an Accepted Solution


 - Try our Nabu for Google Shopping Feed App from Shopify App Store. 

CindyMoraDev
Shopify Partner
7 0 2

Thank you, that's for the general page, is already done.
Any idea according to the question I asked to get the product images in SERP?

CindyMoraDev
sanjnalal
Shopify Partner
81 2 4

To change the featured image of a product on Shopify, go to your Shopify admin, navigate to the product you want to edit, and simply drag and drop the image you want to be featured to the top of the "Media" section; the first image in this list will automatically become the featured image for your product.

 

Now, bear in mind that it will take some time for these changes to be indexed. You can manually request indexing of that particular product page from search console. 

Sanjna Lal | Content Marketing Manager @ AdNabu


 - Was my reply helpful? Click Like to let me know! 


 - Was your question answered? Mark it as an Accepted Solution


 - Try our Nabu for Google Shopping Feed App from Shopify App Store. 

Avitanshi_17
Pathfinder
100 10 14

This is an accepted solution.

Hey there!


Let’s tackle this step-by-step to make sure that the second image appears on Google SERP, People Also Buy From, and Popular Products sections. Sounds like you've put in a lot of work already, so I’ll just walk you through a few tweaks that might be the missing piece.


Step 1: Double-check the Image Schema Code

 

From what you've shared, I think the issue might be with the placement of your images in the JSON-LD schema markup. Google typically pulls the first image listed in the "image" array for the thumbnail, so we want to make sure the second image is listed first.
Here's what your code should look like, with the second image prioritized:


<script type="application/ld+json">
{
"@context": "https://schema.org/",
"@type": "Product",
"name": "{{product.title | escape}}",
"image": [
"https:{{ product.media[1].image | img_url: '960x960' }}",
"https:{{ product.media[0].image | img_url: '960x720' }}",
"https:{{ product.media[2].image | img_url: '960x540' }}"
],
"description": "{{product.description | strip_html | escape}}",
"brand": {
"@type": "Brand",
"name": "{{product.vendor | escape}}"
},
"offers" : {
"@type" : "Offer",
"availability" : "https://schema.org/{% if product.available %}InStock{%else%}SoldOut{%endif%}",
"price" : "{{product.price | money_without_currency }}",
"priceCurrency": "{{shop.currency}}",
"url" : "{{ shop.url }}{{routes.root_url}}{{product.url}}"
}
}
</script>

 

In the above code:
Make sure product.media[1] is actually the second image in your media gallery. If it’s not showing correctly, swap it with product.media[0] to get the desired image to display first.

 

Step 2: Verify Alt Tags and Filenames


You did a solid job optimizing the filenames and alt text, but let’s confirm these match up. Here’s how to do a quick double-check in Shopify:

  1. Go to your Shopify Admin and navigate to Products > All Products.
  2. Open the product you’re working on, scroll down to the Media section, and click on the image you want Google to use as a thumbnail.
  3. For the Alt Text, use something descriptive and keyword-rich, like “Sol-ti Ginger SuperShot bottle next to lemon slices, ginger root, and a green apple.” This matches what you want Google to understand about the image. (If you’re still missing this info, you can click "Edit Alt Text" directly on the image, add it, and then save.)
  4. Confirm the Filename for the image (e.g., Sol-ti_GingerShot_ImmunityBoost_SuperShot) is set up correctly. If not, you can re-upload the image with the right name.

Step 3: Clear Cache and Resubmit Sitemap to Google


If everything above looks good, it’s possible that Google hasn’t updated yet. Let’s try to speed up that process:

  1. In Shopify, navigate to Online Store > Preferences.
  2. Scroll to Search Engine Listing Preview and click on Edit Website SEO to double-check your updated SEO fields.
  3. Once you're sure everything is set, head over to Google Search Console. If you haven’t already, submit your updated sitemap.xml file to make sure Google crawls the changes faster. (To resubmit: In Search Console, go to Index > Sitemaps, remove any old sitemap if needed, and add /sitemap.xml.)
  4. Finally, clear your browser’s cache or try incognito mode to check if Google has updated the image preview.

Extra Tip: Shopify Metafields for More Image Options

 

If this approach doesn’t work as expected, you might want to set up Shopify Metafields to control which images display where.
Go to Settings > Custom Data > Products.
Add a metafield specifically for "SERP Image" and link it to the desired product image. Then, update your schema code to pull this specific metafield instead of just the product image.


Once you’ve done this, give it a little time (Google updates can take a few days).

Hope this helps, and feel free to share a screenshot if something doesn’t look right—happy to dive deeper!

Stay inspired,
Best regards,
Avitanshi
Contact Us at www.mastroke.com
CindyMoraDev
Shopify Partner
7 0 2

Thank you for your detailed explanation and sharing your knowledge! I'm going to apply every piece of advice until I get the result.

CindyMoraDev
Avitanshi_17
Pathfinder
100 10 14

Hi @CindyMoraDev 

Glad to help! 😊


If my answer was able to help you out I would greatly appreciate it if you would mark it as an accepted solution for your query.

Thanks in advance! 😊

Stay inspired,
Best regards,
Avitanshi
Contact Us at www.mastroke.com