og:image doesn't work with Facebook - facebook

Im including the open graph tag for a special Facebook image:
<meta property="og:image" content="http://www.spaghetti-factory.ch/images/logo_sf_rosenhof_fb.jpg" />
But if you click the share-Link
..
it still shows the wrong image (it should show only the fox).
See on the Website http://www.spaghetti-factory.ch
Whats wrong? Thanks for help
regards
thomas

you should use facebook debugger to see what is wrong. But by just having a look at it, I can tell that you needed to Fetch new scrape information for your URL, which I did for you.
Beside that, your current image set as og is too small, therefore another picture is being fetched by Facebook. Have a look at og:image could not be downloaded or is too small and please note that:
use an image that's at least 200x200px and is accessible from Facebook
.

Related

Facebook's debugger shows a preview image, yet on Facebook it doesn't pull in that same preview image?

Facebook will randomly take posts I have shared on a company page and make the preview image blank/white. It is maddening.
Here's what I do to replicate:
Copy URL that I want to share
Go to Facebook's debug and check URL to confirm a preview image shows
Go to Facebook and share the URL in a post
Preview image is blank/white
Example URL: https://hoist.digital/content/blog/know-the-value-of-phone-calls-and-grow-your-business-with-call-tracking
Open graph code in on that URL
<meta property="og:image" content="https://hoist.digital/images/3/1/d/5/1/31d518d87ae71ad5bb2acc907b3ad304b99971e1-graphicstock-beautiful-young-mother-with-her-newbornsoeul9rzz.jpg" />
<meta property="og:image:secure" content="https://hoist.digital/images/3/1/d/5/1/31d518d87ae71ad5bb2acc907b3ad304b99971e1-graphicstock-beautiful-young-mother-with-her-newbornsoeul9rzz.jpg" />
Video of me replicating this: https://hoist.digital/facebookattempt.webm
If the open graph code is there, it's secure, what else could be causing Facebook to occasionally flake out and make some of the preview images white/blank? Here's a strange kicker too... sometimes I can edit/refresh the preview image within Facebook, and the preview image will show again... but in a few days it goes back to white/blank.
Unfortunately, it is well-known problem on Facebook that has not been fixed for years and there is no canonical answer to your question.
The main problem is URIs using HTTP works just fine and URIs using HTTPS do not. So first of all, you should try to change your og:image:secure property to og:image:secure_url, because due to documentation there is no og:image:secure property.
If it does not help, you can explore this thread and you gonna try different options unless, of course, you have tried it yet.
Please pay attention to such methods:
Try to add og:image:url (yes, it is similar to og:image but sometimes it can help).
Try to remove og:image:secure_url property (yes, it is looking strange, but it is Facebook, and it also might work).
Try to add other og properties such as og:image:type, og:image:width, og:image:height

Does Facebook always choose the picture in the head for thumbnail?

I have a logo image set in the head of my home page, but for some reason, when I use the share button for Facebook, the image Facebook chooses is a picture from elsewhere on the page. Is there a reason for this? Can I change it?
Visit this link: A Guide to Sharing for Webmasters
I guess if you change or paste this code between the "head" tags then facebook will show the correct image
<meta property="og:image" content="http://tenbooksamonth.com/example.jpg" />
Also You can check your details here
I hope it helps

Image used for wordpress posts on Facebook

I've seen it several times on my facebook timeline where the image of a shared link is not in the post itself. Example:
https://www.facebook.com/BarakaBits/posts/1065758210116791 - Image has text on it.
screenshot
Here's the post itself: http://www.barakabits.com/2015/01/beauty-moroccos-diversity-captured-stunning-photo-series
Is this a hidden image? I'm using a wordpress blog, how can I do this? Do I need a special plugin?
Thank you in advance!
Wil
I don't know exactly what this site is doing, but you can suggest that Facebook use a specific image (not necessarily one found on the page) by using the og:image Open Graph tag. For example, something like this would go in the <head> portion of your site:
<meta property="og:image" content="http://www.barakabits.com/wp-content/uploads/2015/01/Moroccos-faces-featured-6.jpg">
As you can see from the site you referenced, you can have multiple og:image tags, and the user will be able to choose which one is displayed in the post.
Here's Facebook's guide to Open Graph tags: https://developers.facebook.com/docs/sharing/best-practices

Facebook thumbnail isn't showing

I have a odd problem - when I share a link of a page from our website, the image does not show as a thumbnail (sometimes). It has the correct meta data but its almost like it times out.
For example
http://modetro.com/our-favourites/vintage-retro-sankyo-japanese-flip-alarm-clock-mode-no-401-space-age-mid-century
Has the meta tag
<meta property="og:image" content="http://modetro.com/image/cache/data/ebay/vintage-retro-sankyo-japanese-flip-alarm-clock-mode-no-401-space-age-mid-century/652436936_o-340x340.jpg" />
If I share this link on FB it does not show the thumbnail? I have used the debug tool for this and other pages and SOMETIMES it gets the image and sometimes doesn't? any ideas why?
According to Facebook, they have a glitch that they are working on .. see this page here

How to clear debug tool cache data?

It seems the facebook debug tool http://developers.facebook.com/tools/debug is using a cache.
I made an update to my site but facebook debug tool is still showing up the old data.
Is their any way to force facebook to refresh its data? It has been a few days now and it seems the cache will not expire.
Go to http://developers.facebook.com/tools/debug
Enter the URL following by fbrefresh=CAN_BE_ANYTHING
Examples:
http://www.example.com?fbrefresh=CAN_BE_ANYTHING
http://www.example.com?postid=1234&fbrefresh=CAN_BE_ANYTHING
OR visit:
http://developers.facebook.com/tools/debug/og/object?q=http://www.example.com/?p=3568&fbrefresh=89127348912
I was having the same issue last night, and I got this solution from some website. I hope this helps.
The tool should update Facebook's cache for a given URL immediately, if Facebook is still returning 'stale' data, check that Facebook is actually getting the content you're expecting.
A quick way to check is to load your page from a command line tool like curl, using Facebook's user agent and see if the meta tags returned are what you were expecting.
One thing i've seen happen sometimes is people including all the correct tags on page X, except that page X has an og:url meta tag pointing to another url, Y.
Facebook will follow that tag and scrape page Y and use that metadata.
I've usually seen it where page X is 'something.com/article/x' and the og:url is set to 'something.com/articles/' or 'something.com'
I've the same problem. The ?fbrefresh=CAN_BE_ANYTHING didn't do anything clear the og:image cache.
The only solution that worked for me was to rename the image and the path on the og metaga. You can do something like:
<meta property="og:image" content="http://yourdomain.com/images/socia-photo-v2.jpg">
If somebody knows a better solution will be very appreciate.
Thanks.
This hasn't been added to in a couple of years, but I've just had the same issue and found a way that immediately resolved it.
Facebook say:
Use og:image:width and og:image:height Open Graph tags
Using these tags will specify the image to the crawler so that it can render it immediately without having to asynchronously.
Putting this into use should look like this:
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Solved the problem straight away! Hope this helps!
Go To
https://developers.facebook.com/tools/debug/
then put site URL
Now Click on button Scrape Again
I was getting the cache to show the right picture after updating my blog post, but when I went to post the link, Facebook was still showing an old picture. I didn't want to wait a day to see if it would finally change, so I did what's outlined on this page:
https://webapps.stackexchange.com/questions/18468/adding-meta-tags-to-individual-blogger-posts
In other words, something like this:
<b:if cond='data:blog.url == "http://urlofyourpost.com"'>
<meta content='http://urlofyourimage.png' property='og:image'/>
</b:if>
Basically, you're going to hard code an if statement into your page's HTML to get it to change the meta content for whatever you've changed for that one post. It's a messy solution, but it works.
You can try the object debugger and click on fetch new scrape information. It is mainly to debug the open graph meta data.
https://developers.facebook.com/tools/debug/og/object/