Solved

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

irkakhodjaev
Excursionist
14 1 3

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.

Accepted Solution (1)
irkakhodjaev
Excursionist
14 1 3

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.

View solution in original post

Replies 12 (12)

UmairA
Shopify Partner
1106 101 225

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
Shopify Partner
906 23 177

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.

BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
irkakhodjaev
Excursionist
14 1 3

@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
Shopify Partner
906 23 177
The first one should be alright
BYOB - Build Your Own Bundles, SPO - SEO App to research keywords & edit social link preview
irkakhodjaev
Excursionist
14 1 3

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.

gregbanbury
Visitor
1 0 5

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
Visitor
2 0 0

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
Visitor
1 0 0

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

kmoloo-sunswag
Tourist
3 0 1

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
Excursionist
30 2 2

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
Visitor
2 0 0
  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

Niki_K
Shopify Partner
448 46 125

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! 🙂

Send me a link to your store to niki@ecommercepot.com and I'll help you out.
For more info what I do, visit my agency website ecommercepot.com or my personal website nikikozak.me.