Setting unique social sharing images for individual pages, products and blogs

[luce333]

hi all,

i'm working on setting unique social sharing images for individual pages and products.

i have successfully done that by adding page and product image url metafields > adding custom code in the dawn theme.liquid to get the image selected for social sharing. however, i noticed the page social sharing image goes back to the default set in online store > preference after i added the custom code for products. 

here are the changes i made in chronological order:

1. added custom coding for unique social sharing images for individual pages
2. unique social sharing images for individual pages confirmed to be working when checking on whatsapp
3. added custom coding for unique social sharing images for products
4. unique social sharing images for products are working, but social sharing images for pages have reverted back to the default set in online store > preference when checking on whatsapp
5. added conditional logic to the code to to check the template rendered on page load and get the correct image, but it's not working

attached is the code i'm using in the dawn theme liquid with the conditional logic. i have checked with shopify support that the template values are correct.

<!-- SEO IMAGE CODE -->

  <!-- Common Open Graph tags -->
  <meta property="og:site_name" content="{{ shop.name }}">

  {% if template == 'product' %}
    <!-- Product Open Graph Tags -->
    <meta property="og:title" content="{{ product.title }}">
    <meta property="og:description" content="{{ product.description | strip_html | truncate: 160 }}">
    {% if product.metafields.product_data.og_image %}
      <meta property="og:image" content="{{ product.metafields.product_data.og_image }}">
    {% else %}
      <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0431/3510/7236/files/Malaysia_s_1_Premium_Chiro-Recommended_Mattresses_Lunox.png?v=1721535175">
    {% endif %}
  {% elsif template == 'page' %}
    <!-- Page Open Graph Tags -->
    <meta property="og:title" content="{{ page.title }}">
    <meta property="og:description" content="{{ page.content | strip_html | truncate: 160 }}">
    {% if page.metafields.custom.og_image %}
      <meta property="og:image" content="{{ page.metafields.custom.og_image }}">
    {% else %}
      <meta property="og:image" content="https://cdn.shopify.com/s/files/1/0431/3510/7236/files/Malaysia_s_1_Premium_Chiro-Recommended_Mattresses_Lunox.png?v=1721535175">
    {% endif %}
  {% endif %}

appreciate any help i can get on this. thank you

[Liam]

Hi Luce,

If you remove the Social sharing image preview image from the online store > preferences section, and just rely on displaying an image based on rules set in code, are you seeing this work as expected? My guess is that since there are currently two different methods for displaying an OG tag (the native admin method and a custom code method) you're seeing unpredictable results. I'd recommend just having one method - the custom code one.