Blank preview image when sharing site on Facebook.

[pcs800]

If I share a link to a site I built, the preview image is a black box. Is there a place to set an image as default or something like that to remedy the issue?

[crispy68]

Do you have link to the site so we can see?

Is the path to the image on your server correct?

[pcs800]

Yes the link is http://www.tuscolapalooza.com
The images all show fine on the page.
But the preview image when shared on social media, is this http://www.tuscolapalooza.com/images/img0006.gif
I want it to be this http://www.tuscolapalooza.com/images/logo 2020-2.jpg

I have defined that image in the Open Graphics Meta Tags, but FB debugger still shows the blank gif.

[pcs800]

Oh I think I got it.
I had to have FB rescrape the url.

[pcs800]

Ugg maybe not...
The FB debugger shows the right image now, but if I actually post a link on FB, there's no preview at all. Just a hyperlink.

[crispy68]

your og:url is incorrect. It should be a link to the page not the same image. The image should only go under the og:image tag which looks correct. I would also suggest adding the og:description tag.

[pcs800]

Ok, I corrected that. But FB debug still shows an error, see here https://developers.facebook.com/tools/d ... alooza.com
Image shows up in debugger, but not in an actual real world FB share.
Error at top of debugger.
Web builder keeps putting the following in the html tag "<meta property="og:image" content="http:/images/logo 2020-2.png">"
I manually change it with a text editor, to "<meta property="og:image" content="images/logo 2020-2.png">" to get it to work.

[crispy68]

not sure if this would affect it but your image name should not have a space in it. Either use and underscore or hyphen for spacing.

The url for your image should be: http://tuscolapalooza.com/images/imagename.jpg
I believe this is what's meant by "The 'og:image' property should be explicitly provided"

basic info:

og:image
The URL of an image for the social snippet.
Note that this is perhaps the most essential Open Graph tag because it occupies the most social feed real estate.

Syntax

Code: Select all

<meta property="og:image" content="https://yourwebsite.com/images/image.jpg" />

Best practices
Use custom images for “shareable” pages (e.g., homepage, articles, etc.)
Use your logo or any other branded image for the rest of your pages.
Use images with a 1.91:1 ratio and minimum recommended dimensions of 1200x630 for optimal clarity across all devices.

[crispy68]

You also need to add og:type. If you have a fb:app:id as well will fix all the warnings.