Menu
When you share a link on facebook it will automatically find images on the website and randomly picks one as a preview. How can you influence the preview image? When a person shares the website link on his facebook?
335
Under Design, click on Logo & Title, and scroll to the bottom. You'll see a spot to upload a Social Sharing Logo. You can upload your logo here, or you can upload any other image you'd rather display. (Bonus: You can also change your website favicon in this area.
Log into Facebook if you're not already with a username and password, visit the Facebook Sharing debugger page, Paste the link, for which the Preview wasn't shown, and click 'Debug'. Ignore the warnings and click 'Scrape Again', now debugger tool will show the link preview at the bottom of the page correctly.
You might not be seeing the Facebook link preview you want because the info has been cached by Facebook. (Facebook saves the info from URLs and pages that have already been shared, for better performance.) So you just may need to force Facebook to clear the cache. 1.
1. Include the Open Graph XML namespace extension to your HTML declaration
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:fb="http://ogp.me/ns/fb#">
2. Inside your <head></head> use the following meta tag to define the image you want to use
<meta property="og:image" content="fully_qualified_image_url_here" />
Read more about open graph protocol here.
After doing the above, use the Facebook "Object Debugger" if the image does not show up correctly. Also note the first time shared it still won't show up unless height and width are also specified, see Share on Facebook - Thumbnail not showing for the first time
193
Note also that if you have wordpress just scroll down to the bottom of the webpage when in edit mode, and select "featured image" (bottom right side of screen).
24
If you're using Weebly, start by viewing the published site and right-clicking the image to Copy Image Address. Then in Weebly, go to Edit Site, Pages, click the page you wish to use, SEO Settings, under Header Code enter the code from Shef's answer:
<meta property="og:image" content="/uploads/..." />
just replacing /uploads/... with the copied image address. Click Publish to apply the change.
You can skip the part of Shef's answer about namespace, because that's already set by default in Weebly.
37
Years and years pass and this problem with the facebook cache has not yet been solved ... Why doesn't facebook put a button to totally clear the cache in Debug Tools ???? How difficult is that?
OK ... Now the definitive solution:
Use this on "og:image"....: ?[sequentialNumber] example: ?1 / ?2 / ?3 .....
Example of use:
<meta property="og:image" content="http://example.com/image.jpg?1" />
Did you change the image? Add 1 to the number ...
<meta property="og:image" content="http://example.com/image.jpg?2" />
Each time the image is changed, add 1 to the number
This can be done manually or dynamically, with PHP for example.
It's working really well for me, I hope I helped.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
