How to set custom meta image for different pages?

Store Design
, ,
1

Dear all,

Firstly I’m using non-shopify theme, and I managed to set different products image for different products like following:
file: [theme.liquid]
<meta property=“og:image” itemprop=“image” content={{ product.featured_image.src | img_url: ‘600x600’ }}>

But some pages like collections/AAA and collections/BBB don’t have product.featured_image.src, how can I keep showing products image for products pages, while showing other images for collections/AAA and collections/BBB?

I tried something like following but not working:
{% if page_title == ‘AAA’ %}
<meta property=“og:image” itemprop=“image” content=“https://cdn.shopify.com/s/files/xxx.jpg”
{% endif %}

{% if page.url == ‘collections/AAA’ %}
<meta property=“og:image” itemprop=“image” content=“https://cdn.shopify.com/s/files/xxx.jpg”
{% endif %}

Thanks

2

Hi @SandyChan :waving_hand:

But some pages like collections/AAA and collections/BBB don’t have product.featured_image.src,

A product is not a collection , if you want to work with a collection you refer to the collection not a product.

Use the docs to find different properties for different objects

https://shopify.dev/docs/api/liquid/objects/collection#collection-featured_image

Use the objects handle , or the routes object, for conditionals based on the url

https://shopify.dev/docs/api/liquid/basics#handles

https://shopify.dev/docs/api/liquid/objects/routes

i.e. {% if collection.handle == “some-collection-handle” %}…

Good Hunting