FB debugger says that my og:image should be larger

问题:

Check out this result of debugging an article using Facebook debugger.

It comes up with this warning:

og:image should be larger. Provided og:image is not big enough. Please use an image that's at least 200x200 and preferably 1500x1500.

But if you open the image displayed in the "og:image"-field below, you can clearly see that the image is big enough - 700x350 px.

This results in Facebook picking random images when I'm publishing articles on my wall.

Any idea why this happens?

Edit: Could the problem be caused by my CMS redirecting the url of the image?

回答1:

Try to add this:

<meta property="og:image:width" content="200" />
<meta property="og:image:height" content="200" />

回答2:

First of all you need to upload an image that is more than 200 x 200 (for instance I've uploaded the maximum size that is 1500 x 1500). Some people say that the image width and height should be the same size. I've never took chances to check if it's right or not although.

After updating the image size the problem still exists and you'll need to add certain parameter to the og: image link in order to make Facebook debugger update the cache of the image.

For instance:

<meta property="og:image" content="http://bri.ge/img/brige1.png?t=12345?">

This is the parameter: ?t=12345?

Wait for about 5 minutes and the issue will be fixed.

回答3:

This was due to my CMS system redirecting the URL of the image. So the correct image showed up in the Facebook debugger, but FB was probably looking for the image size before the redirection took place, and then it had no size yet.

So I told my CMS not to redirect the URL of my images. How that works depends on what kind of CMS you are using.

回答4:

I had

<meta property="og:type" content="website" />

in the meta tags.

Removed that line and it worked, so current tags look like this:

    <meta property="og:title" content="PUT TITLE HERE" />   
    <meta property="og:url" content="http://www.example.com" />
    <meta property="og:image" content="http://www.example.com/images/myimage.jpg"/>

回答5:

It's a bit late, but I had this issue for after creating a new open graph image in photoshop. It didn't make any sense because in the debugger it still displayed the image that was found, which was 359x379. It still complained it was smaller than 200x200, though.

I did not try changing any other header tags, as I did not believe that was the issue.

Instead, I opened photoshop again and saved the image again. I saved it as a JPG at 85% quality -- and the difference was that I used "Progressive" instead of "Optimized". This fixed the issue immediately, although I'm not positive the "Optimized" setting was the issue.

回答6:

Another issue that could cause this is the use of characters like # in the filename.

Allthough browser will show them correctly, facebook will give an error stateting the img is to small, while infact it isn't able to read it.

So make sure you image filename only uses the standard characters A to z, _, -, 0-9

回答7:

If someone is still running into this issue, even though facebook's scrapper correctly scrapes the image of size >= 200x200, wait an hour and go have coffee. Come back and hit debug again and it should be fine. It takes time for facebook to update its stored graph data.

回答8:

I just ran into this problem and tried saving as a JPEG with slightly lower quality as another answerer suggested. Once I'd referenced that and tried again on the debugger page Facebook told me that, again, my image was too small, and instead it would use the old image, meaning the one it complained about the first time.

So I simply submitted the same URL once more and it stopped complaining. Basically it's one debug behind. Try refreshing the debug and see if it doesn't fix it for you.

回答9:

Define og:image:width and og:image:height parameters like @Maria has suggested.

回答10:

what did i notice when i run into Scraped URL is that facebook is not able to see the picture at the same size like in the posts. For instance, copy the url of the picture which in Debug is to small, paste in to a browser and indeed the picture is very small. Now, go to your post, copy the url picture from your post, and paste in to the same or any browser. Now the size of the picture is big.

回答11:

If the image url is https:// and Facebook has problems reading your SSL certificate, it will produce this rather unhelpful error message. To test, see if a http:// url for the image works. If it does, your CA certificate may need some tweaking. Try Googling "Curl Error : SSL_CACERT SSL certificate problem: unable to get local issuer certificate"

Note: Even if your page has no problem displaying with a https protocol, Facebook digs deeper to confirm your identity. I think this is relatively recent. Considering their whole fake news debacle I'm not going to be too upset.

回答12:

Your website's robots.txt file may be restricting Facebook crawler access to your website. When Facebook robot crawls it, it can't see the file. Upload the image to the root of your website.

The 200x200 pixel rule is important, use 400x400 to get better image quality through compression. Tested with png and jpeg images.