d
Topic
Posts:
9
February 20, 2016

Link Preview Image

Hello community,

 

I'm trying to change the link preview image for my website. For those, if any, that don't know what this is, I'm referring to the image that loads when you post your website link on Facebook for instance. 

Can anyone point me in the right direction? 

Thanks!

Rendell

i
Replies
Britton Jenner Shopify Employee
Posts:
411
February 21, 2016

Hi Rendell,

Britton here with the Shopify support team.

In order to change the image that loads when your Hompage is linked on Facebook you will need to do a little bit of coding. This code change can be broken down into three steps.

1. Tell Facebook which image you want. 

This code block tells Facebook what image to use for your site: 

<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png" />

For your site you will need to change the bit inside the quotations (https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png) to the URL of the image that you want Facebook to display. 

2. Comment out the existing instructions

Your theme probably comes with hard coded instructions already on how Facebook should find it's display image. You will need to delete that code (or better, comment it out: https://docs.shopify.com/themes/liquid/tags/theme-tags#comment) and then replace it with the code you created above. In the Brooklyn theme for example, it is located inside social-meta-tags.liquid. You can see here the relevant bit that I have commented out right at the end: 

<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
  Open graph tags.
{% endcomment %}
{% if template == 'index' %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:url" content="{{ canonical_url }}">
  {% if home_page_content_enabled %}
    <meta property="og:description" content="{{ pages[settings.home_page_content].content | strip_html | escape }}">
  {% else %}
    <meta property="og:description" content="{{ page_description }}">
  {% endif %}
  {%comment%}{% if hero_enabled %}
    {% for i in (1..6) reversed %}
      {% capture slide %}hero_slide_{{ i }}_enable{% endcapture %}
      {% capture slide_img %}hero_slide_{{ i }}_1024x1024.jpg{% endcapture %}
      {% if settings[slide] %}
        <meta property="og:image" content="http:{{ slide_img | asset_url }}">
        <meta property="og:image:secure_url" content="https:{{ slide_img | asset_url }}">
      {% endif %}
    {% endfor %}
  {% endif %}{%endcomment%}

Usually you will want to comment out the relevant bits under the {% if template == "index" %} portion as this affects your homepage. Don't comment out everything here though, the rest of it is still important!

3. Add in your new code

After you have commented out the old code, you can now paste in your new image instructions. A good place to put them is right underneath the last line of commented out code. You can see the rest of my example here: 

<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
  Open graph tags.
{% endcomment %}
{% if template == 'index' %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:url" content="{{ canonical_url }}">
  {% if home_page_content_enabled %}
    <meta property="og:description" content="{{ pages[settings.home_page_content].content | strip_html | escape }}">
  {% else %}
    <meta property="og:description" content="{{ page_description }}">
  {% endif %}
 {%comment%} {% if hero_enabled %}
    {% for i in (1..6) reversed %}
      {% capture slide %}hero_slide_{{ i }}_enable{% endcapture %}
      {% capture slide_img %}hero_slide_{{ i }}_1024x1024.jpg{% endcapture %}
      {% if settings[slide] %}
        <meta property="og:image" content="http:{{ slide_img | asset_url }}">
        <meta property="og:image:secure_url" content="https:{{ slide_img | asset_url }}">
      {% endif %}
    {% endfor %}
  {% endif %}{%endcomment%}
<meta property="og:image" content="https://upload.wikimedia.org/wikipedia/en/7/7d/Evil_dead_ver1.jpg" />

You can see that I have added on my new Facebook image meta tag underneath the last commented out line of code.

Keep in mind that these steps may be different for you depending on your theme. Some themes may not store their social meta information in social-meta-tags.liquid, so you may need to go looking for it. Also, Facebook caches data on which image it is using for display purposes; after the code change you may not see any change until Facebook updates its cache. You can find a useful doc on how to make these changes for the product pages in our documentation. The advice can be repurposed to some extent for this situation: https://docs.shopify.com/themes/customization/social-media/facebook.

I hope this helps!

-Britton

Britton Shopify Guru
Posts:
9
February 22, 2016

Thanks!

Posts:
1
July 29, 2016

This was a little too much. Was hoping for something easier. 

Posts:
1
10 months ago

Has the Brooklyn theme been updated?? My code for the social meta tags is different to that segment that has been pasted above.

Posts:
2
Last edited 8 months ago

.

Posts:
2
8 months ago
g
1
upvotes

Please post an identical step-by-step for the Debut theme. Please and thank you!

Posts:
16
6 months ago

I am having to correct this issue as well When I see this sort of outrageous complication for such a simple thing I wonder why they made it so hard ? Are they just trying to keep programmers employed? Anyway I am off to waste another half hour trying to fix this!!!! 

Posts:
16
6 months ago

Another thing i have had to give up on way to difficult 

Posts:
18
2 months ago

I am using the template venture. Trying to get Facebook to show one particular image when linking to the main index. Below is my raw code from social-meta-tags.liquid I have tried every way in the world but no luck. I just reverted it back to original code hoping someone can point out what code I need to put in to make this happen.


<!-- /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 template.name == '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.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: '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.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 }}

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

 

http://www.fhdsupply.com
Posts:
18
Last edited about 2 months ago

Ok after some testing I have found two possible reasons for this.
(1) Shopify is caching older versions of code way too long and we are not seeing the update once we implement new code or
(2) Facebook debugger is simply not fething new info as it should.

I tested this theory with two different sets of code, each one using a different image. Its been 10 mins since the last code update and the debugger is still showing that the older version image is being pulled.

I notice shopify closes a lot of threads with no answers bringing me to thing either they dont give a crap or simply does not have an answer or the last.. dont want to fix their code problems.

So if Shopify is caching this horribly, we can forget any sort of progress to be made on code like this.
Another good reason to switch to BigCommerce

http://www.fhdsupply.com
Posts:
18
Last edited about 2 months ago
g
1
upvotes

After long hours of work, I think the folowing code should work for both Facebook links and Twitter.
Back up your current social-meta-tags.liquid and then replace with this.
(no thanks to shopify for support, all work done by PowerSurge Media & Frozen Head Distributing)

You can check twitter using this tool https://cards-dev.twitter.com/validator

<!-- /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 template == 'index' %}
<meta property="og:image" content="http://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?3163227978516227209" />
 


{%- elsif template.name == '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: '450x450' }}">{% 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: '450x450' }}">{% endfor -%}{% endcapture -%}
 
{%- 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: '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.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 }}

{% if settings.social_twitter_link != empty %}<meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">
<meta name="twitter:image:alt" content="{{ og_title }}">
{{ twitter_image_tag }}

 

http://www.fhdsupply.com
Posts:
1
about 1 month ago

Thank you so much for posting this, it helped me out greatly.  Cheers!!

Screen shot 2017 09 19 at 11.24.41 pm thumb
Posts:
1
25 days ago

Awesome! this worked perfectly at the beginning until your image started to show. Can you please tell me how to replace it with my image? Thanks!! :)

Spam thumb
Posts:
18
25 days ago

On line 9 of the code you will find 

<meta property="og:image" content="http://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?3163227978516227209" />


change the link to your image within the quotationmarks
 

<meta property="og:image" content="YOUR IMAGE LINK HERE" />


 

http://www.fhdsupply.com
Posts:
14
13 days ago

Hi

need to fix this as well.
Cyrrently when sharing my shopify website, wrong image is displayed.

I need to change that but do not know ehere exactly need to place the extra line with the new image link.

Here is my code:
 

<!-- /snippets/social-meta-tags.liquid -->
{% comment %}
  Open graph tags
{% endcomment %}
{% if template == 'index' %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title }}">
  <meta property="og:description" content="{{ page_description }}">
{% elsif template contains 'product' %}
  <meta property="og:type" content="product">
  <meta property="og:title" content="{{ product.title | strip_html | escape }}">
  {% for image in product.images reversed limit:3 %}
    <meta property="og:image" content="http:{{ image | img_url: 'grande' }}">
    <meta property="og:image:secure_url" content="https:{{ image | img_url: 'grande' }}">
  {% endfor %}
  <meta property="og:description" content="{{ product.description | strip_html | escape }}">
  <meta property="og:price:amount" content="{{ product.price | money_without_currency | strip_html | escape }}">
  <meta property="og:price:currency" content="{{ shop.currency }}">
{% elsif template contains 'article' %}
  <meta property="og:type" content="article">
  <meta property="og:title" content="{{ article.title | strip_html | escape }}">
  {% if article.image %}
    <meta property="og:image" content="http:{{ article | img_url: '1024x1024' }}">
    <meta property="og:image:secure_url" content="https:{{ article | img_url: '1024x1024' }}">
  {% endif %}
  <meta property="og:description" content="{{ article.excerpt_or_content | strip_html | escape }}">
{% else %}
  <meta property="og:type" content="website">
  <meta property="og:title" content="{{ page_title | escape }}">
  {% if settings.logo_use_image %}
    <meta property="og:image" content="http:{{ 'logo.png' | asset_url }}">
    <meta property="og:image:secure_url" content="https:{{ 'logo.png' | asset_url }}">
  {% endif %}
{% endif %}
<meta property="og:url" content="{{ canonical_url }}">
<meta property="og:site_name" content="{{ shop.name }}">

{% comment %}
  Twitter card
{% endcomment %}
{% unless settings.social_twitter_link == blank %}
  <meta name="twitter:site" content="@{{ settings.social_twitter_link | split: 'twitter.com/' | last }}">
{% endunless %}
{% if template contains 'article' and article.image %}
  <meta name="twitter:card" content="summary_large_image">
{% else %}
  <meta name="twitter:card" content="summary">
{% endif %}
{% if template == 'index' %}
  <meta name="twitter:title" content="{{ page_title }}">
  <meta name="twitter:description" content="{{ page_description | escape }}">
{% elsif template contains 'product' %}
  <meta name="twitter:title" content="{{ product.title | strip_html | escape }}">
  <meta name="twitter:description" content="{{ product.description | strip_html | truncate: 200, '' | escape }}">
  <meta name="twitter:image" content="https:{{ product | img_url: 'grande' }}">
  <meta name="twitter:image:width" content="600">
  <meta name="twitter:image:height" content="600">
{% elsif template contains 'article' %}
  <meta name="twitter:title" content="{{ article.title | strip_html | escape }}">
  <meta name="twitter:description" content="{{ article.excerpt_or_content | strip_html | truncate: 200, '' | escape }}">
  {% if article.image %}
    <meta property="twitter:image" content="https:{{ article | img_url: '1024x1024' }}">
  {% endif %}
{% endif %}

 

Posts:
14
12 days ago

someone??

Posts:
18
12 days ago

CP, Back up your current code then try using mine listed above
be sure to replace

{% if template == 'index' %}
<meta property="og:image" content="http://cdn.shopify.com/s/files/1/2161/0421/files/FHD-FB-FEED.jpg?3163227978516227209" />

With your image code
 

{% if template == 'index' %}
<meta property="og:image" content="YOUR IMAGE LINK GOES HERE" />

I assume from what I see that you are using the defult snippet which so far I have not been able to make work. The code I listed above seems to work fine for all instances, Facebook, Twitter site link and product links. Hope that helps

http://www.fhdsupply.com
Posts:
14
11 days ago

new code as i pasted it:

 

<!-- /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 template == 'index' %}
<meta property="og:image" content="https://cdn.shopify.com/s/files/1/1781/6091/files/tvscreenBeerShop4.jpg?12857615753484549690" />
 


{%- elsif template.name == '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: '450x450' }}">{% 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: '450x450' }}">{% endfor -%}{% endcapture -%}
 
{%- 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: '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.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 }}

{% if settings.social_twitter_link != empty %}<meta name="twitter:site" content="{{ settings.social_twitter_link | split: 'twitter.com/' | last | prepend: '@' }}">{% endif %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="{{ og_title }}">
<meta name="twitter:description" content="{{ og_description }}">
<meta name="twitter:image:alt" content="{{ og_title }}">
{{ twitter_image_tag }}

no changes.

Used facebook debugger, and pressed debug like 50 times.
Check what i get on the image i have uploaded
 

Screenshot developers.facebook.com 2017 10 10 21 59 48 546 thumb
Posts:
18
9 days ago

Looks right to me, that is the image you have specified in the code, are you wanting something else?
That image will be a specified image when linking "directly" to the store main front. Product listings will show different images. 

http://www.fhdsupply.com
Posts:
14
Last edited 9 days ago



Yes, actually it worked now. Being trying all day yesterday with no result, and during night it happened alone.
But i see now that whatever i share ie: https://beershopcy.com/blogs/news/how-the-pilsner-beer-style-conquered-the-world
that picture appears now. I do not want that. I only need that picture to appear as the main pic when sharing my website, not on every other link like blog posts....

So frustrating.

csoots Member
Posts:
4
5 days ago

Roger thank you so much! Your solution helped us fix the issue. Thank you for sharing. 

Posts:
18
5 days ago

When you share, check the options to select a second image. I tried it and it gives you the option for both images individually. When sharing the link it will either post the main image (if no post image is present) ..or it will grab both images ( main and post image) and give you an option of which to use. Let me know if you need further help. Keep in mind, Shopify seems to cache the images for a long period making it a bit difficult to see changes once made. As you noted it may take some time.

Here are some tools to use
Facebook Debugger https://developers.facebook.com/tools/debug/
Twitter Card Validator https://cards-dev.twitter.com/validator
Twitshot http://www.twitshot.com/

http://www.fhdsupply.com
Posts:
8
2 days ago

Just some FYI here, due to some errors on my last account and linking it to my shop, I had to make a new account. Please refer to this one if you have any questions. Starting freh here :D

http://www.fhdsupply.com