Help with social meta tags in theme

Victoria_De_Boe
New Member
1 0 0

Hi.

I'm having issues with my social meta tags for my shopify store. I want to change the image shown as a thumbnail when linking to my store on Facebook. Linking to individual products works fine, it shows the product's image as a thumbnail, but not any other page, the homepage or a collections page. It just shows all the images on that page, all the product images and the logo, etc. I just want any page other than individual product pages to use one and the same thumbnail image. I've been using Facebook Object Debugger to check my attempts at fixing it, and it keeps giving me the warning that there is no value for "og:image". I've tried many options I've found online to add an og:image line to my coding, but nothing seems to work. Here is the current coding:

<q> {%- assign og_title = page_title -%}
{%- assign og_url = canonical_url -%}
{%- assign og_type = 'website' -%}
{%- assign og_description = page_description | default: shop.description | default: shop.name -%}

{% comment %} Template specific overides {% endcomment %}
{%- if template.name == 'product' -%}
{%- assign og_title = product.title | strip_html | escape -%}
{%- assign og_type = 'product' -%}
{%- capture og_image_tags -%}
{%- for image in product.images limit: 3 -%} <meta property="og:image" content="http:{{ image.src | product_img_url: '1024x1024' }}">
{%- endfor -%}
{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}
{%- for image in product.images limit: 3 -%}
<meta property="og:image:secure_url" content="https:{{ image.src | product_img_url: '1024x1024' }}">
{%- endfor -%}
{%- endcapture -%}
{%- capture twitter_image_tag -%}<meta name="twitter:image" content="https:{{ product.featured_image.src | product_img_url: '1024x1024' }}">{%- endcapture -%}

{%- elsif template.name == 'article' -%}
{%- assign og_title = article.title | strip_html | escape -%}
{%- assign og_type = 'article' -%}
{%- assign og_description = article.excerpt_or_content | strip_html | escape -%}
{%- if article.image -%}
{%- capture og_image_tags -%}<meta property="og:image" content="http:{{ article.image | img_url: '1024x1024' }}">{%- endcapture -%}
{%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1024x1024' }}">{%- endcapture -%}
{%- capture twitter_image_tag -%}<meta name="twitter:image" content="https:{{ article.image | img_url: '1024x1024' }}">{%- endcapture -%}
{%- endif -%}

{%- elsif template.name == 'password' -%}
{%- assign og_title = shop.name -%} {%- assign og_url = shop.url -%}
{%- assign og_description = shop.description | default: shop.name -%}
{%- endif -%}

<meta property="og:site_name" content="{{ shop.name }}">
<meta property="og:url" content="{{ og_url }}">
<meta property="og:title" content="{{ og_title }}">
<meta property="og:type" content="{{ og_type }}">
<meta property="og:description" content="{{ og_description }}">

{%- if template.name == 'product' -%}
<meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
<meta property="og:price:currency" content="{{ shop.currency }}">
{%- endif -%}
{{ og_image_tags }}
{{ og_image_secure_url_tags }}

{% unless settings.social_twitter_link == blank %}
<meta name="twitter:site" content="{{ settings.social_twitter_link | escape | split: 'twitter.com/' | last | prepend: '@' }}">
{% endunless %}
{% if twitter_image_tag %}
<meta name="twitter:card" content="summary_large_image">
{{ twitter_image_tag }}
<meta name="twitter:image:width" content="480">
<meta name="twitter:image:height" content="480"> {% else %}
<meta name="twitter:card" content="summary">
{% endif %}
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}"> </q>

I've tried adding a "{%- assign og_image..." line at the top, and a "<meta property=og:image..." etc line. Nothing seems to work. I've copied other people's codes and added my own values, and nothing seems to change. I'm not sure what I'm doing wrong. Any help from those more proficient in coding would be great 🙂

Replies 0 (0)