How can I set custom social sharing images for specific pages?

[irkakhodjaev]

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]

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.

[jam_chan]

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.

[irkakhodjaev]

@jam_chan @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!

[jam_chan]

The first one should be alright

[irkakhodjaev · 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.

[cindymdupreez]

Hi there, I've tried to use this code and I'm not sure if I've done it correctly. it doesn't seem to be working for me. What have i missed?

{% if handle == 'Quiz' %}
{%- capture og_image_tags -%}<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0692/7492/7334/files/Quiz_Image_Main.png?v=1725407824">{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https://cdn.shopify.com/s/files/1/0692/7492/7334/files/Quiz_Image_Main.png?v=1725407824">{%- endcapture -%}
{% endif %}

 it says the variable 'og_image_secure_url_tags is assigned but not used. also highlighted in orange. 

[gregbanbury]

I took the solution above and modified such that we can use a custom metafield on the page to set the image.

1. Create a new metafield in Shopify Admin settings under "Page"
2. Change the code in the meta-tags.liquid file to the below
3. Add your image by navigating to metafields set on your page in Online Store

{%- if page_image -%}
  {% if page.metafields.custom.meta_image != blank %}
    <meta property="og:image" content="http:{{ page.metafields.custom.meta_image | image_url }}">
    <meta property="og:image:secure_url" content="https:{{ page.metafields.custom.meta_image | image_url }}">
  {% else %}
    <meta property="og:image" content="http:{{ page_image | image_url }}">
    <meta property="og:image:secure_url" content="https:{{ page_image | image_url }}">
    <meta property="og:image:width" content="{{ page_image.width }}">
    <meta property="og:image:height" content="{{ page_image.height }}">
  {% endif %}
{%- endif -%}

[BourbonBaggers]

This worked perfectly for me both on pages as well as blog posts. Really helped me out with facebook and instagram posts and ads.

[igormanaue]

Thanks! the custom metafield has to be created with a specific name?

[kmoloo-sunswag]

Does this solution provide a fallback when an image isn't selected for a certain page? After the else statement, what will be pulled in from http:{{ page_image | image_url }} ?

Also, in my theme's file, I see the following:

<meta property="og:image" content="http:{{ page_image | img_url: 'master' }}">
<meta property="og:image:secure_url" content="https:{{ page_image | img_url: 'master' }}">

what does 'master' do?

[LIYAShop]

How can I use this code for pages and collections at the same time? Where one of the metafields is 

collection.metafields.custom.og_image

and the other is

page.metafields.custom.og_image

[fogr]

1. Create a new metafield in Shopify Admin settings under "Page"

Could you perhaps please specify in steps what type of Metafield you should create in order to make the solution work? 

Thanks

[Allyson9]

Thanks  @gregbanbury !
I just successfully implemented this using the code above.  It's been bothering me since I first signed up with Shopify that this isn't a baked-in feature. 

@fogr, here are the steps I took:

1. I created a metafield called 'meta_image' ("Add definition" in Settings > Custom data > Pages). Selected the metafield type 'file' from the 'most used' section. You will see image and video selected - I turned off video. Copy or make note of the 'Namespace and key' if you decide to call it something else as you need this exactly the same in the code that you put into your liquid file. 

2. Then I went to 'edit code' in my theme and found the 'social-meta.liquid' file. Copied all that code into a blank word doc in case I blew things up. 😂 Then searched for the section that includes "page_image" and replaced it with Greg's code above.

3. Finally, went to a page on my site and saw my new metafield and added an image. Then I went to Facebooks's debugger page to check if the new image was showing. It took about 10 minutes before it scraped the new image. 

Hope that helps. I've been searching for 2 years for a solution and am thrilled to have persevered and implemented one! 

[Niki_K]

Hi @irkakhodjaev,

not sure if this is still relevant as I can see that one of the answers have been marked as solved. However, I would like to let you know that we have just released an app SocialSeal.

This app enables you to set up personalized OG image templates for all your products and blog posts effortlessly. Easily adapt the font, font size, upload your logo, and choose custom colors that align with your brand’s identity and enhance your social media presence.

Hope this helps! 🙂