Facebook og: image appears blank - facebook

I currently having a problem with FB OG image on Feed status of https://3dl.aut.ac.nz/.
On profile status. This works fine. It appears that the bug is only happening on HOME(news feed page) status
The site is built in wordPress. Normally I don't stuck on og image on my previous works on WordPress.
On fb object debugger, the site has the correct og image and seems no problem at all.
I suspect its because im using secure server? (https://) Also same thing happens if I try, http://3dl.aut.ac.nz/ (http).
I investigated this issue and found another similar thread on stackoverflow thread. The thread says that this has been an issue with https. However, the facebook.com has a thumbnail when posted the link on FB status.
Is this issue has something to do with the server settings?
Any help will be greatly appreciated.

Ran into the same problem myself. You're trying to share from a secure site using Yoast's Wordpress SEO plugin. Unfortunately, it doesn't properly handle the meta tags for secure images. Yoast includes:
<meta property="og:image" content="https://image-url-here" />
Facebook doesn't like that, but there's an easy fix, by adding:
<meta property="og:image:secure_url" content="https://image-url-here" />
I wrote up a blog post on how to hook into the plugin's wpseo_opengraph_image hook to handle this automatically.
Hope it helps.

https/http should be no problem, i suspect that the image is just too broad. Always use the correct aspect ratio and size: https://developers.facebook.com/docs/sharing/best-practices#images
Use images that are at least 1200 x 630 pixels for the best display on high resolution devices. At the minimum, you should use images that are 600 x 315 pixels to display link page posts with larger images.
Try to keep your images as close to 1.91:1 aspect ratio as possible to display the full image in News Feed without any cropping.

Please bear in mind that the facebook scraper works asynchronously and will need some time (during my tests around 10 minutes) to be able to display an image after seeing it for the first time.
For more information, here's a more thorough answer on a similar problem.

In my case, converting a PNG graphic with transparency to no transparency fixed the error.
Facebook API debug error image

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

Provided og:image url encountered an unknown error

Yesterday I attempted to share a web page on Facebook, specifically https://share.novamanus.com/ad/659, however this did not preview correctly on Facebook. When I attempted to scrape this with the Facebook Open Graph Debugger I saw an error I've not encountered previously.
Provided og:image url, https://novamanusprod.blob.core.windows.net/nmphoto/thumb_aa76caf4-f394-402a-a84a-58124222b6b4.jpeg encountered an unknown error.
There was no additional information elaborating about what was going on. The response from the web page was HTTP 200.
I could at the same successfully access the image url directly, but attempts to re-scrape the page with the Facebook Open Graph Debugger resulted in the same error message.
What could possibly be causing this? 30-40 minutes after this attempt everything worked perfectly. I've not been able to reproduce the issue thus far, nor has Azure blob storage logs told me anything.
I've encountered this same error and I checked the docs.
According to the documentation it recommends:
Optimize images to generate great previews
Image Sizes
Use images that are at least 1080 pixels in width for best display on high resolution devices. At the minimum, you should use images that are 600 pixels in width to display image link ads. We recommend using 1:1 images in your ad >creatives for better performance with image link ads.
https://developers.facebook.com/docs/sharing/best-practices#images
Since adding an image which has the minimum width of 1080px width this resolved my problem.
I also had this problem recently and I fixed it by uploading a smaller file (about 1024px wide, 72dpi ~ 100kb), it worked. I had to open the Facebook debugger and ask it re-scape the page.
It solved by
<meta property="og:url" content="FULL_PAGE_URL" />
<meta property="og:image" content="FULL_IMAGE_PATH" />

ShareThis Facebook share button doesn't find images on a page

The ShareThis Facebook button will only pull the logo as an image to choose from a page. I am not sure why this is the case since I have other images on pages that I am trying to share from. Can someone help me out with this. I am not really familiar with the ShareThis API. Thanks for any help or feedback.
I tried using the Facebook URL Debugger: https://developers.facebook.com/tools/debug. When doing so, Facebook found all the images on the page, but ShareThis doesn't seem to do the same. That is why I am guessing it is a ShareThis related issue.
The client wants the person posting the page/blog post to be able to select the image from the images on the page. This is normally the case with the ShareThis API, but does not seem to do so. Otherwise I would have just used the open graph option.
URL of site: http://www.atranquilnook.com/
1-30-14: I tried specifying an image with open graph meta on a page. The image was larger than 200 x 200, but it still did not work.
This appears to be happening on every page of the site.
Note: I did not build this site. It was built in Adobe Muse by someone else.
This is not a real answer, but I have to use the space here, to get you all the details of what I found out.
On the debugger it says https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.atranquilnook.com%2F :
Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image 'http://www.atranquilnook.com/images/header-home03.png' will be used instead.
Since there is the image with the couple, which is bigger than 200px x 200px, I do not know if this is the answer, but you could try by uploading some bigger image.
Although the whole warning is deceptive, since a line above it states, that there is no og:image.
Looks like you are relying on Facebook being smart enough to find "better" image on your site. What you should do instead is adding a meta tag in the head section of your page.
<meta property="og:image" content="http://www.yoursite.com/img/some-image.jpg"/>
This will tell Facebook exactly what you want to rest of the world to see.

Featured image from post not showing although Fb Debugger is OK

I´m finishing my site in WP and everything seems ok but I can´t get the featured image from my posts to show when sharing the link in FB.
I tryed the debugger, it sees the image ok and returnes a 200 response code.
Debugger test result here
The image size is 300x227 so I understand there is no problem regarding size or proportion.
The Meta included about the image is http://www.momento-marketing.es/wp-content/uploads/2013/01/Blog-Analitica-300x227.jpg'/>
Does anyone has a clue about this? Thanks a lot.
I have experienced very wobbly Facebook behavior recently, ie the last few days. Putting page through the Facebook debugger (with og image correctly specified), it says that a particular image is less than 200 x 200 when it is considerably more than this.
Several pages that used to give thumbnails very happily no longer do. Yet one with a really big image (for the sake of Pinterest) with the image reduced in size on the page, is fine.
One thing that DOES upset Facebook - the image has to be hosted on precisely the same domain as the page. I found that when I used a shortened version of my domain name (which forwards to the full one), that prevented thumbnails appearing. Suspect that even a subdomain for one, and not the other, might upset things.
Same problem here...when you try to share it on your browser trough the mobile website, it shows the image.. Try to share a link and replace https://www.facebook.com/sharer/sharer.php?u= to https://m.facebook.com/sharer.php?u= and you see it works, so must be a problem in the desktop Facebook website
Wordpress has changed its requirements for showing images on facebook timeline or on a facebook page. Even I experimented a lot of things and finally found out a solution. Here is how to do it,
Download WPSSO plugin from wordpress.com
Install the plugin
Then navigate into the plugin settings and find the "Images" tab
Set "Open graph Dimensions" as 600 x 315
Now use images above the size of 600 x 315 in your posts
Cick save settings and now try debugging the post with your facebook debugger tool.
I am sure this will solve your problem. If problems persist do post them we will try to reslve it.
Note - This tutorial was taken from this link Facebook image problem resolution

facebook won't show my oh:image thumbnails no matter what I do [duplicate]

This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How does Facebook Sharer select Images?
Ok guys.. I've researched this thoroughly- I'm at the end of my rope and my supervisor is getting pissed. Any help is appreciated.
facebook opengraph thumbnails do not work when I share pages from my site. I'm sure I have og:image implemented correctly. I have resized the JPG thumbnails to 130x110 pixels. I have even tried hiding another copy of the same thumbnails in the pages with display:none.
example page: http://www.classical917.org/houston_public_radio-arte_publico.php
from that page:
The Facebook debugger (formerly the Linter) picks up the URL of the image, but displays a blank box. When I click on the blank box, the image loads.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.classical917.org%2Fhouston_public_radio-arte_publico.php
When I post a page from my site into a Facebook 'What's on Your Mind?' box, Facebook gets the title and description from my og: tags, thinks for a while about the image, then loads with no image.
Is it because I'm trying to use the same logo image for every page on the site? Is that a no-no? Is there something wrong with my image (although I've tried several versions)? Am I being penalized for using the debugger too often? Does Facebook hate my site?
Thanks for any ideas or pointers on this. I'm desperate to fix it before I get called into my supervisor's office.. : P
Your site has 215 xhtml validation errors according to the w3c validator. Facebook may be having a hard time parsing your page with so many errors. It could also be a caching issue, although the linter tool should clean up the cache, and the linter tool is pulling in the image properly. It may also not like full path URL's. Try a relative path.
As a work-around, you could also try specifying an image the old way:
<link rel="image_src" href="/_images/logo-facebook-130x110-kuha.jpg" />
The rest of your questions are invalid (Facebook isn't penalizing you and they don't care if you are using the same image).
Try removing line break in the og:description meta.