Link Preview Image

Highlighted
New Member
7 0 0

Thank you!!!

0 Likes
Highlighted
New Member
16 0 0

Hi Roger or anyone else that can help!

I've tried the above, but i believe its outdated...

Im using the Brooklyn theme, and this is what my 

Social-media-tags looks like...

 

<!-- /snippets/social-meta-tags.liquid -->
{%- 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 settings.share_image %}
  {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ settings.share_image | img_url: '1200x1200' }}">{%- endcapture -%}
  {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ settings.share_image | img_url: '1200x1200' }}">{%- endcapture -%}
{% endif %}

{% comment %} Template specific overides {% endcomment %}
{% if template.name == 'product' %}
  {%- assign og_title = product.title | strip_html -%}
  {%- assign og_type = 'product' -%}
  {% if product.images.size > 0 %}
    {%- capture og_image_tags -%}{% for image in product.images limit:3 -%}<meta property="og:image" content="http:{{ image.src | product_img_url: '1200x1200' }}">{% 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: '1200x1200' }}">{% endfor -%}{% endcapture -%}
  {% endif %}

{% elsif template.name == '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: '1200x1200' }}">{%- endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ article.image | img_url: '1200x1200' }}">{%- endcapture -%}
  {% endif %}

{% elsif template.name == 'collection' %}
  {%- assign og_title = collection.title | strip_html -%}
  {%- assign og_type = 'product.group' -%}
  {% if collection.image %}
    {%- capture og_image_tags -%}<meta property="og:image" content="http:{{ collection.image | img_url: '1200x1200' }}">{%- endcapture -%}
    {%- capture og_image_secure_url_tags -%}<meta property="og:image:secure_url" content="https:{{ collection.image | img_url: '1200x1200' }}">{%- 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 }}">
  <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 | split: 'twitter.com/' | last | prepend: '@' }}">
{% endunless %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">
 

 

What should i redo in order to put a picture i want as a thumbnail preview on my link? Please help. Thank you!

Art of an acquired taste.
0 Likes
Highlighted
Shopify Partner
65 0 2

You can try our Shopify App - SEO Product Optimizer. It can help you to set a custom link preview for each individual product. Recently, we have added a default option with your first or last product image. It may be able to help you guys. 

Feel free to let us know if there is any problem. 

 

0 Likes
Highlighted
Tourist
10 0 2

Thanks so much for this 

 

What still doesn't work for me however is a main picture for the entire site - does anyone else have this problem?

 

What is returned from a scrape test https://developers.facebook.com/tools/debug/og/object/ is the following:

 

<meta property="og:image" content="http://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b1..." />

 

It does warn that "The 'fb:app_id' property should be explicitly provided, " but I get this warning too on the Product pages that are now correctly bringing back the correct image so I think that's just a warning and not causing this problem.

 

This is the code for main image that should come through:

{% if template == 'index' %}
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/0026/4853/9245/files/Logo_square2_1359.jpg?1256" />

 

 

0 Likes
Highlighted
Tourist
10 0 2

Update: this is now fixed! For some reason it wasn't showing the image at all earlier, since trying it again it just too an hour or so to come through to the meta data checker.

0 Likes
Highlighted
Excursionist
12 1 5

I'm still relatively new to Shopify and liquid, so I'm avoiding touching code unless I absolutely have to. Fortunately, the rich preview image can be set through the config GUI, at least for the Debut theme.

 

Step 1: Go to Theme settings

Step 2: Click Social media

 

theme_settings.png

 

Step 3: Set the image for Social Sharing Image. Either upload a new image to set it the first time, or click Change to swap out another image.

 

social_image.png

 

Step 4: Wait several hours (up to 24 hours) for social sites to register the updated image. Facebook will let you manually purge the cache through their dev console. Not sure about Twitter, Pinterest, others.

 

If you don't set the share image, Shopify just grabs the first foreground image it finds on the home page.

0 Likes