Facebook Link Preview Image

New Member
25 0 0

I'm using the Symmetry theme, when I post to Facebook the preview looks like the image below. How do I change that image to display the correct image? An image of my choosing.

Website: nosliwboutique.com

0 Likes
Shopify Staff
Shopify Staff
537 0 66

Hey there!

Savannah here from Shopify. :) 

  • First, you're going to get the link for the image you'd like to display instead, and insert it into this code. It'll look like this, but you'll replace the www.yourimagelink.com with the link to the image that you'd like to display: 
<meta property="og:image" content="www.yourimagelink.com" />
  • Navigate to your theme's liquid (Online store>Themes>Customize Theme, select the "..." menu and "Edit HTML/CSS.") 
  • Select the theme.liquid, and search for the <head> tag. On the line below that tag, paste the code above. 
  • Save the theme.liquid, and open up a new tab with Facebook's debugger. Enter the home page URL to scrape the page, and wait a few moments for the new image to populate. You may need to scrape the page once more. 

Let me know how that goes, or if you have any further questions!

Savannah | Social Care
support@shopify.com

0 Likes
New Member
25 0 0

Thank you! That worked perfectly. :)

0 Likes
Shopify Partner
24 0 2

How can I do this for specific PAGES on my site. I understand how to do it for my homepage, but what about specific pages. For example my FAQ page, my About Us page, my Warranty page, my Shipping and Returns page....etc...

Please help, thanks

Ahmad

0 Likes
New Member
1 0 0

You could probably use page.handle to accomplish what you are wanting. Such as:

{% if page.handle == 'contact' %}
<meta property="og:image" content="www.yourimagelink.com" />
{% endif %}

There might be a more elegant solution out there though.

0 Likes
Tourist
4 0 2

Hi guys!

I tried this and it sort of worked, but not quite. 

Our first image was not the image I wanted to share, so I tried the steps offered above.
The first image was a large full size image above a bit of text. Here it is:

 Screen Shot 2019-03-12 at 4.14.20 PM.png
However, when I tried changing the image out to our logo, it changed the format to a small square thumbnail-like image on the far left, with text to the right. I tried making the image much smaller to see if it would fit, but when I scraped (I scraped a lot), it showed no differences. 
TAoY7.png
That said, how do I get it back to having a large image above and text below OR fit our longer logo in to the left without it cutting off? 




0 Likes
Highlighted
Tourist
11 0 1

Crickets..

1 Like
Tourist
4 0 2

Haha! Crickets for sure...

 

Hoping to get a response soon! Looks like the original person who was helping on this thread from Shopify has not posted in a while, so hopefully a new expert steps in! 

1 Like
Shopify Partner
12 4 2

Hi @ExactMats and @Vonda_Youngkin,

 

To get Facebook to show a large thumbnail image it is recommended to use a landscape image that is 1200x630px in size or at a minimum of 600x315px.

 

To show a small thumbnail image it is best to use a square or portrait image. In my experience the image should not be any wider that 240px.

 

If you would like a demonstration of different share image sizes you can visits my website here: Product Share Examples

 

However @ExactMats how you have implemented this on your site is incorrect, now all of your products and pages are going to show the small thumbnail image you have posted earlier. Facebook scrapes the og image from the top down.

 

Most shopify themes include a setting usually under social media to include a default share image.

 

1 Like
Tourist
11 0 1

@PaulOwens wrote:

 

If you would like a demonstration of different share image sizes you can visits my website here: Product Share Examples

 

 


Paul,  

 

Thank you for the reply.  Maybe I'm missing it, but, how did you get a different image to appear in the Facebook link preview when I clicked the Sahre FB link at the bottom of https://www.optimumgraph.com/collections/all  and https://www.optimumgraph.com/collections/all/products/light-up-shoes ?

0 Likes