1. 技术文章
  2. FB OpenGraph og:image not pulling images (possibly https?)

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

由 a 夏天 提交于 2019-11-26 16:57:38

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."

The bug can be seen here: https://developers.facebook.com/bugs/260628274003812

Syed I.R

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 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.

Got here from Google but this wasn't much help for me. It turned out that there is a minimum aspect ratio of 3:1 required for the logo. Mine was almost 4:1. I used Gimp to crop it to exactly 3:1 and voila - my logo is now shown on FB.

tl;dr – be patient

I ended up here because I was seeing blank images served from a https site. The problem was quite a different one though:

When content is shared for the first time, the Facebook crawler will scrape and cache the metadata from the URL shared. The crawler has to see an image at least once before it can be rendered. This means that the first person who shares a piece of content won't see a rendered image

[https://developers.facebook.com/docs/sharing/best-practices/#precaching]

While testing, it took facebook around 10 minutes to finally show the rendered image. So while I was scratching my head and throwing random og tags at facebook (and suspecting the https problem mentioned here), all I had to do was wait.

As this might really stop people from sharing your links for the first time, FB suggests two ways to circumvent this behavior: a) running the OG Debugger on all your links: the image will be cached and ready for sharing after ~10 minutes or b) specifying og:image:width and og:image:height. (Read more in the above link)

Still wondering though what takes them so long ...

I had the same error and nothing of previous have helped, so I tried to follow original documentation of Open Graph Protocol and I added prefix attribute to my html tag and everything became awesome.

<html prefix="og: http://ogp.me/ns#">
Scaraux

Don't forget to refresh servers through :

Facebook Debugger

And click on "Collect new info"

I had similar problems. I removed the property="og:image:secure_url" and now it will scrub with just og:image. Sometimes, less is more

I discovered another scenario that can cause this issue. I went through all the steps described in the question and the answers, still the problem remained.

I checked my images and found that some of my posts had way too large thumbnail images in og:image in the range of several thousand pixels and several megabytes.

This happened due to the recent migration from WP to Jekyll, I optimized my images with gulp, but used the original images in og:image by mistake.

Facebook gives us the following recommendations as of today:

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. Images can be up to 8MB in size.

So there is an upper limit of 8MB.

As I accidentally found, transparent blank image comes with response header indicating possible cause of the problem.

  1. Go to the debugger at https://developers.facebook.com/tools/debug/og/object/
  2. Put your URL
  3. In the bottom, facebook shows your "image" (transparent 1x1 GIF)
    1. Image is linked to your original image - no point pressing it
    2. Press right and view image (you'll get something like https://external-ams3-1.xx.fbcdn.net/safe_image.php?d=...&url=...)
  4. Turn on Net tab on firebug/developer tools, refresh page if needed
  5. You'll get x-error-detail response header with explanation

For example, in my case it was Invalid image extension for URL: https://[mydomain]/[myfilename].jpg

The real issue in my case was related to prerender.io.

As it turns out, if image is requested via prerender, it's converted to HTML. Something like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
<html>
<head><meta http-equiv="content-type" content="text/html; charset=utf-8"></head>
<body style="margin: 0px;"><img style="-webkit-user-select: none; cursor: -webkit-zoom-in; " src="https://[yourdomain].com/[yourfilename].jpg" width="1078" height="718"></body>
</html>

It's either bug in prerender itself, or it's supposed to be configured in your proxy to not use prerender for *.jpg requests (even if they are requested by Facebook bot).

It's really hard to notice this, as prerender is used only on certain user-agent headers.

I ran into the same issue and then I noticed that I had a different domain for the og:url

Once I made sure that the domain was the same for og:url and og:image it worked.

Hope this helps.

In my case the problem was in not providing CA Root Certificate. I figured it out after using: https://www.ssllabs.com/ssltest/analyze.html to analyze SSL configuration.

Similar symptoms (Facebook et al not correctly fetching og:image and other assets over https) can occur when the site's https certificate is not fully compliant.

Your site's https cert may seem valid (green key in the browser and all), but it will not scrape correctly if it's missing an intermediate or chain certificate. This can lead to many wasted hours checking and rechecking all the various caches and meta tags.

Might not have been your problem, but could be other's with similar symptoms (like mine). There's many ways to check your cert - the one I happened to use: https://www.sslshopper.com/ssl-checker.html

I can see that the Debugger is retrieving 4 og:image tags from your URL.

The first image is the largest and therefore takes longest to load. Try shrink that first image down or change the order to show a smaller image first.

In addition, this problem also occurs when you add a user generated story (where you do not use og:image). For example:

POST /me/cookbook:eat?
  recipe=http://www.example.com/recipes/pizza/&
  image[0][url]=http://www.example.com/recipes/pizza/pizza.jpg&
  image[0][user_generated]=true&
  access_token=VALID_ACCESS_TOKEN

The above will only work with http and not with https. If you use https, you will get an error that says: Attached image () failed to upload

From what I observed, I see that when your website is public and even though the image url is https, it just works fine.

For me this worked:

<meta property="og:url" content="http://yoursiteurl" />
    <meta property="og:image" content="link_to_first_image_if_you_want" />
    <meta property="og:image" content="link_to_second_image_if_you_want" />
    <meta property="og:image:type" content="image/jpeg" /> 
    <meta property="og:image:width" content="400" /> 
    <meta property="og:image:height" content="300" />
    <meta property="og:title" content="your title" />
    <meta property="og:description"  content="your text about homepage"/>

Had a similar problem today, which the Sharing Debugger helped me solve. It seems that Facebook can’t (currently) understand images with XMP metadata embedded. When I replaced the images on our articles with versions without XMP metadata, and re-scraped the page (using the Sharing Debugger), the problem went away. A hex editor will help you see whether or not your image contains XMP metadata.

I took http:// out of my og:image and replaced it with just plain old www. then it started working fine.

You can use this tool, by Facebook to reset your image scrape cache and test what URL it is pulling for the demo image.

Once you update the meta tag make sure the content(image) link is absolute path and go here https://developers.facebook.com/tools/debug/sharing enter you site link and click on scrape again in next page

After several hours of testing and trying things...

I solved this problem as simple as possible. I notice that they use "test pages" inside Facebook Developers Page that contains only the "og" tags and some text in the body tag that referals this og tags.

So what have i done?

I created a second view in my application, containing this same things they use.

And how i know is Facebook that is accessing my page so i can change the view? They have a unique User Agent: "facebookexternalhit/1.1"

标签
facebook
facebook-graph-api
opengraph
facebook-opengraph
open-graph-protocol
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!