Custom og:image for pages

Solved
irkakhodjaev
Tourist
5 1 2

Hi!

1) As you all know, we can choose custom image (social sharing image) only for collections (there's an option to choose the image).

2) For product pages shopify takes the product image as social sharing image.

3) For all other pages shopify takes the picture from Online store preferences. This image is hardcoded in all pages (<meta property="og:image" content=")

I want to apply custom images for a certain pages. So I need to find the way the replace the default og:image on certain pages to the one I need.

I hope that makes sense.

UmairA
Shopify Partner
872 85 173

Hi there @irkakhodjaev,

Yes, you can do so either by duplicating the template for each unique page and then edit it or by using an if condition to check for page handle (Liquid code) to add the appropriate image link.

Hope it helps.

Need help with theme customization or to add a new feature? Hire me
Email: umairabbascs@gmail.com
WhatsApp: WhatsApp
Theme customization | Custom coding | Store Setup | SEO Audit | Speed Optimization | Tweaks & Bugs fixing

You can 

1. upload an image to your theme asset folder

2. hardcode the og:image tag for these special pages in the social meta tags liquid (or a similar liquid file, depends on your theme)

My app does offer this feature so it's how it works at the backstage.

SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
irkakhodjaev
Tourist
5 1 2

@sillycube @UmairA thank you for your reply!

Can you please help with the code? Which one is correct:

 

 

{% if page.handle == 'my-page' %}
<meta property="og:image" content="link to my image">
<meta property="og:image:secure_url" content="link to my image">
{% endif %}

 

 

OR

 

 

{% if page.handle == 'my-page' %}
{%- capture og_image_tags -%}<meta property="og:image" content="link to my image">{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="link to my image">{%- endcapture -%}
{% endif %}

 

 

 

Thank you in advance!

0 Likes
The first one should be alright
SPO - SEO App to research keywords & edit social link preview
BYOB - Build Your Own Bundles
0 Likes
irkakhodjaev
Tourist
5 1 2

This is an accepted solution.

Worked the following code in social-meta-tags.liquid:

 

{% if handle == 'your-page-handle' %}
{%- capture og_image_tags -%}<meta property="og:image" content="link-to-your-image">{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="link-to-your-image">{%- endcapture -%}
{% endif %}

 

This code replaces the default og:image code.