FB OpenGraph og:image not pulling images (possibly https?)
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
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.
I don't know, if it's only with me but for me og:image
does not work and it picks my site logo, even though facebook debugger shows the correct image.
But changing og:image
to og:image:url
worked for me. Hope this helps anybody else facing similar issue.