og image problems!

[Robert9]

In the net you find funny information about the sizes for your Metadata logo URL / og:image

851x315 should be the best or
at least 1,200 x 630 pixels, while keeping the file size under 8 MB or
...
They all tell me use a picture with x >> y (width is much, much higher than height)
But If i open my browser and see some urls used in the last days, my logo is compressed while a suare is shown.


If you dont understand what I mean, click in the field of your browser where the url https://xenforo.com is shown.
Normally a window should come up with the urls you have used in the last days. It shows the logos as a square and the title of the pages.

If you choose a square for xf:Metadata logo URL we have a nice logo here.

But we dont have an og:image in 851*315 (...) for facebook and all these pages.

In other words: Can we have two pictures? One for browsers, one for facebook?
But then we need this for all of our urls? A logo for the browser as square and an og:image for embedding urls in fb, x and co?

 

[Robert9]

Check og:image!

OpenGraph - Preview Social Media Share and Generate Metatags

OpenGraph is the easiest way to preview and generate open graph meta tags for any website.

www.opengraph.xyz

and see in my browser:




The og: image is a rectangle not a square (url above), the logo is a square)

Maybe I miss another image on my web?

My og:image with 851x315 looks nice on fb, but really stupid in the browser.

 

[Robert9]

Haha, I am wrong, the og:image is a square but not shown as a square:

https://cdn.prod.www.spiegel.de/public/spon/images/logos/fb_logo_default.jpg

but in the browser I see only

 

[Robert9]

Ok, you have done this ten years before with URL Icon (192x192)?

 

[Paul B]

It's difficult to understand what you're asking but a metadata logo has been an option for years.

 

[Robert9]

You can make a test very easy!

Take a new forum and add a xf:Metadata logo URL with 851x315;



then you check you og:image here: https://www.opengraph.xyz

Then you can watch around in your browser, there you will see that the browser takes this 851x315 and compress it to a square like here:





Depending on your image, this will look weird.

 

[Robert9]

In other words, there is a problem (depending on your image), when you use a typical og:image like [_______] only.
But maybe the both logo_fields 192 and 512 will do the trick to show a square in the browser



and an ogg:image at fb/x/...



B

 

[Robert9]

I have to correct myself.
All this happens in firefox.
Chrome seems to take the favicon ico as logo for urls.
Firefox use favicon.ico for the tabs, but not for the list of suggested urls!

Other browser I have not checked now.


Conclusion: People who use firefox will see (depening on the image) a compressed og:image if using a typical format like 1200x630 or 851x315;
if you dont use other images like 192/512.

Funny, funny!

If i empty the cache of firefox the weird icons are still there!
Maybe I need some html to tell: Hey stupid browsers, refresh your cache!