Set link preview for each individual products

[Osvaldo_Saez_Lo]

Hi, I'm trying to find a way to set the image used on link previews in Facebook, Twitter, etc. I already now that if you add a meta tag on the head of the page you can do this for your homepage, for instance. However, for individual products I don't know how to do it since what we can modify of the theme is the liquid template of the page and because the meta tag used to do this requires a hardcoded URL of the image I don't know how to reference a specific image.

This is the meta tag:

<meta property="og:image" content="url-image" />

How can I make the "url-image" specific to a certain image of the product? I'll appreciate any help.

[Aria]

Hey Osvaldo,

Aria here, one of the Social Care gurus at Shopify. ?

You can use the Facebook Debugger Tool to correct the image showing for a particular URL. That's the simple way to fix it for Facebook.

This blog post explains how to edit your metadata to correct the images displaying on each platform.

I hope this helps. Let me know if you need anything else. 

Aria
Social Care Guru
Shopify

[Osvaldo_Saez_Lo]

Thanks for the response. I'll be reading the post.

However, is there not an easy way to do it? Like a variable on the template or something, that holds the url of the product images and you can put it as part of the meta tag in order for the product page to be generated with the correct image as the link preview?

[Osvaldo_Saez_Lo]

For anyone that finds it useful. The solution I settled with was adding this code to the theme.liquid file in the head tag:

  {% if template.name == "product" %}
      <meta property="og:image" content="{{ product.featured_image.src | img_url: 'grande' }}" />
      <meta name="twitter:image" content="{{ product.featured_image.src | img_url: 'grande' }}" />
  {% endif %}

With this when the page of a product is being created these two meta tags are added and to its content property you add the url of the featured image of that product which is the main image you set for it. If you want to add more social networks just need to find the right name property for it and keep the content property as it is.

Also, remember that the ratio of the image may not be the same as the one used by social networks (1.91:1 generally), so your image will be cropped. Right now I don't find this to be a problem if you center the product, but keep it in mind. I hope this helps others with the same problem as me.

[cubewalker]

You can try our Shopify App - SEO Product Optimizer. Recently, we've just added a new function to use the first or last product image as the default option. It may be able to solve your problem. 

SPO listing on Shopify AppStore: https://apps.shopify.com/seo-product-optimizer