OG:IMAGE

Highlighted
New Member
1 0 1

Hi,

Is there a way to show specify the link preview images (og:image) that will be generated (in Facebook) if I share different website linkls?

For example, if I send the link https://www.glutax.com.ph the image preview will that should show is https://cdn.shopify.com/s/files/1/1593/0523/files/New_Glutax_Ad.png?15379481346853790320  and if I send the link https://www.glutax.com.ph/2000GS, the link preview image that should show is http://cdn.shopify.com/s/files/1/1593/0523/products/Glutax-2000-GS_1024x1024.jpg?v=1490331089

I am currently using Venture theme.

<!-- /snippets/social-meta-tags.liquid -->
{%- assign template_base = template | split: '.' | first -%}
{%- 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 -%}

{%- if template_base == 'product' -%}
  {%- assign og_title = product.title | strip_html -%}
  {%- 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 -%}

{%- elsif template_base == 'article' -%}
  {%- assign og_title = article.title | strip_html -%}
  {%- assign og_type = 'article' -%}
  {%- assign og_description = article.excerpt_or_content | strip_html -%}
  {%- 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 -%}
  {%- endif -%}

{%- elsif template_base == '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_base == 'product' -%}
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{%- endif -%}
{{ og_image_tags }}
{{ og_image_secure_url_tags }}

<meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">

Thank you.

1 Like
Highlighted
Tourist
17 0 3

I notice shopify refuses to answer these questions. I am working on the same problem but I suggest if it cant be fixed just do as we are planning to do, drop shopify and switch to BigCommerce

http://www.fhdsupply.com
0 Likes
Highlighted
Tourist
7 0 5

Are you wanting to change the default image used socially for each product?

0 Likes
Highlighted
Tourist
12 0 1

Actually I fixed it after a few long hours of trying different code, thanks though

http://www.fhdsupply.com
0 Likes
Highlighted
New Member
2 0 0

Roger. Can you please write your solution?

0 Likes
Highlighted
Shopify Partner
65 0 2

Hi,

You can try our Shopify App - SEO Product Optimizer. We know that some themes don't handle this part well. Our app allows you to set an share image for each product. 

It may be easier for you though our app also needs to change theme.liquid. We can help to install the code snippet in a min

Feel free to ping me for assistance.

0 Likes
Highlighted
Highlighted
Excursionist
36 3 4

The OP wanted showing images based on condition (different URL). Your proposed can have only one image person store

https://cuedd.com
0 Likes
Highlighted
Tourist
9 0 3

And for whatever reason after I change the image, the image stays the same. Even facebook's sharing debugger shows it's still pointing to the old image.

0 Likes