FB OpenGraph og:image not pulling images (possibly https?)

Question

Facebook cannot grasp my og:image files and I have tried every usual solution. I'm beginning to think it might have something to do with https://...

• I have checked http://developers.facebook.com/tools/debug and have zero warnings or errors.
• It is finding the images we linked to in the "og:image", but they're showing up blank. When we click the image(s), however, they DO exist and it takes is straight to them.
• It DOES show one image -- an image hosted on a non-https server.
• We've tried square images, jpegs, pngs, larger sizes and smaller sizes. We've put the images right in public_html. Zero are showing up.
• It's not a caching error, because when we add another og:image to the meta, FB's linter does find and read that. It DOES show a preview. The preview is blank. The only exception we're getting is for images that are not on this website.
• We thought maybe there was some anti-leach on cpanel or the .htaccess that was preventing the images from showing up, so we checked. There was not. We even did a quick < img src="[remote file]" > on an entirely different server and the image shows up fine.
• We thought maybe it was the og:type or another oddity with another meta tag. We removed all of them, one at a time and checked it. No change. Just warnings.
• The same code on a different website shows up without any issue.
• We thought maybe it was not pulling images because we're using the same product page(s) for multiple products (changing it based on the get value, ie, "details.php?id=xxx") but it's still pulling in one image (from a different url).
• Leaving any og:image or image_src off, FB does not find any images.

I am at the end of my rope. If I said how much time myself and others have spent on this, you'd be shocked. The issue is that this is an online store. We absolutely, positively cannot NOT have images. We have to. We have ten or so other sites... This is the only one with og:image problems. It's also the only one on https, so we thought maybe that was the problem. But we can't find any precedent anywhere on the web for that.

These are the meta-tags:

<meta property="og:title" content="[The product name]" />  <meta property="og:description" content="[the product description]" />  <meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> <meta property="og:image" content="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-art-black.png" /> <meta property="og:image" content="http://www.[ADIFFERENTwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png" /> <meta property="og:image" content="https://www.[ourwebsite].com/images/ARShopHeader.png" /> <meta property="og:image" content="http://www.[ourwebsite].com/overdriven-blues-music-tshirt-art-black.JPG" /> <meta property="og:type" content="product"/> <meta property="og:url" content="https://www.[ourwebsite].com/apparel-details.php?i=10047" /> <meta property="og:site_name" content="[our site name]" />       <meta property="fb:admins" content="[FB-USER-ID-NUMBER]"/> <meta name="title" content="[The product name]" /> <meta name="description" content="[The product description]" /> <link rel="image_src" href="https://www.[ourwebsite].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> <meta name="keywords" content="[four typical keywords]"> <meta name="robots" content="noarchive"> 

In case you want it, here's a link to one of our product pages that we've been working on. [Link shortened to try to curb this getting into search results for our site]: http://rockn.ro/114

EDIT ----

Using the "see what facebook sees" scraper tool, we were able to see the following:

"image": [                 {          "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-details-safari.png"       },       {          "url": "https://www.[httpSwebsite].com/images/shirts/soul-man-soul-music-tshirt-art-safari.png"       },       {          "url": "http://www.[theotherNONSECUREwebsite].com/wp-content/uploads/2011/06/ARS-Header-Shine2.png"       }    ], 

We tested all links it found for a single page. All were perfectly valid images.

EDIT 2 ----

We tried a test and added a subdomain to the NONSECURE website (from which images are actually visible through facebook). Subdomain was http://img.[nonsecuresite].com. We then put all images into the main subdomain folder and referenced those. It would not pull those images into FB. However, it would still pull any images that were referenced on the nonsecure main domain.

POSTED WORKAROUND ----

Thanks to Keegan, we now know that this is a bug in Facebook. To workaround, we placed a subdomain in a different NON-HTTPS website and dumped all images in it. We referenced the coordinating http://img.otherdomain.com/[like-image.jpg] image in og:image on each product page. We then had to go through FB Linter and run EVERY link to refresh the OG data. This worked, but the solution is a band-aid workaround, and if the https issue is fixed and we go back to using the natural https domain, FB will have cached the images from a different website, complicating matters. Hopefully this information helps to save someone else from losing 32 coding hours of their life.

Answer 1

Some properties can have extra metadata attached to them. These are specified in the same way as other metadata with property and content, but the property will have extra :

The og:image property has some optional structured properties:

• og:image:url - Identical to og:image.
• og:image:secure_url - An alternate url to use if the webpage requires HTTPS.
• og:image:type - A MIME type for this image.
• og:image:width - The number of pixels wide.
• og:image:height - The number of pixels high.

A full image example:

<meta property="og:image" content="http://example.com/ogp.jpg" /> <meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />  <meta property="og:image:type" content="image/jpeg" />  <meta property="og:image:width" content="400" />  <meta property="og:image:height" content="300" /> 

So you need to change og:image property for your HTTPS URLs to og:image:secure_url

Ex:

HTTPS META TAG FOR IMAGE:

<meta property="og:image:secure_url" content="https://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> 

HTTP META TAG FOR IMAGE:

<meta property="og:image" content="http://www.[YOUR SITE].com/images/shirts/overdriven-blues-music-tshirt-details-black.png" /> 

Source: http://ogp.me/#structured <-- You can visit this site for more information.

Hope this helps you.

EDIT: Don't forget to ping facebook servers after updating your codes - URL Linter

Answer 2

I ran into the same problem and reported it as a bug on the Facebook developer site. It seems pretty clear that og:image URIs using HTTP work just fine and URIs using HTTPS do not. They have now acknowledged that they are "looking into this."

Update: As of 2020, the bug is no longer visible in Facebook's ticket system. They never responded and I don't believe this behavior has changed. However, specifying HTTPS URI in og:image:secure does seem to be working fine.