Link Preview Image

New Member
8 0 0

Thank you!!!

0 Likes
New Member
17 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
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
Tourist
8 0 1

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

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