How to I specify an image to be used for social sharing ON EACH PRODUCT?

Shopify Discussion
1

I know how to set the og:image for the store, but I want an og:image for each individual product. And I don’t want to use the featured image because it’s not 1200x628. I also don’t want to have to make all my product images 1200x628 just to get around this omission in the Shopify platform.

I can’t believe Shopify lets me set the meta title, meta description & alt tags on a per-product basis but not the og:image!

Surely I must be missing something?

2

Hi There!

Well you could address that by creating a metafield as an image which can be configured with a different picture per product. You would then generate the the og:image tag in the product page based on that metafield.

3

Interesting idea. But can I name the metafield “og:image” and ensure it’s inserted into the section?

4

The metafield only needs to be an image, you would then write a product condition inside theme.liquid that would conditionally display the default og:image if metafield entry is empty.

5

Could you explain a little more? I don’t want the og:image to display on the product page (it’s a different size than the other images), so how would I specify the image URL for each product?

I also have an og:image for the overall store that I want used when someone shares the home page.

6

Gonna write the pseudo code for that:

if (currentpage == product)

{{metafield.photo.url}}

else

Original store-wide og:image

When creating the metafield, add an image metafield to the product object, that way when you upload an image it will fetch its URL directly when you call it in the conditional code.

7

Thank you so much. Really appreciated!

8

Sure thing! Let me know how it goes with you!

9

@JHKCreate I am not getting the thumbnail image, can you help me exactly with the right steps needed to be followed?

In order to get the 1st product image in the thumbnail while sharing it on social media instead of logo i.e. setting in Preference?

I’m using Debut theme.

10

Our app can help you to change your social sharing image on each product, collection or page. We’re using metafields too but we provide an interface to do so.

After installing our app & code snippet, the code snippet will overwrite the existing social meta tags and you can set a custom preview image.

11

Am I correct that in current Shopify development this issue is solved by a new feature?

P.S. any user from Shopify Staff can answer ?

https://help.shopify.com/en/manual/metafields