theCrag / website

theCrag.com: Add your voice and help guide the development of the world's largest collaborative rock climbing & bouldering platform
https://www.thecrag.com/
112 stars 8 forks source link

opengraph og:image missing on a lot of pages #2904

Closed scd closed 6 years ago

scd commented 7 years ago

What happened?

A regression issue with og:image no longer specified for a lot of pages.

https://www.thecrag.com/photo/693491859

Has no og:image

https://developers.facebook.com/tools/debug/sharing/?q=https%3A%2F%2Fwww.thecrag.com%2Fphoto%2F693491859

What you expected:

An og:image in the html

scd commented 7 years ago

Hot fixed. There was some code which selected the smallest dimension which was greater than 200x200. Dimensions are no longer used so I now set it to as either a width or height is 200. I think this might be a bit small though:

https://static.thecrag.com/img/150x200/5d/16/5d16d8ce488c12fec6dff3e20042d5f0321be01c

scd commented 7 years ago

Updated this so it meets Facebook spec to be in minimum of 200x200

brendanheywood commented 6 years ago

Just thought I'd try and polish this one off but I got too tangled up in dependencies. There is no reason to really ever give facebook a small thumbnail, we should really be giving it the largest image we can and it will internally resize it. So we just want to give it as large an image, within reason, so we don't get massive download hits.

https://developers.facebook.com/docs/sharing/best-practices/#images

So instead of this:

https://static.thecrag.com/img/150x200/5d/16/5d16d8ce488c12fec6dff3e20042d5f0321be01c

I would just let thumbor choose the best size / aspect ratio but within a maximum size:

https://static.thecrag.com/img/fit-in/1200x630/5d/16/5d16d8ce488c12fec6dff3e20042d5f0321be01c

eg thumbor spits out a 473x630 image for this one

scd commented 6 years ago

This is fixed on my dev so that the og image for a photo page type returns this

<meta property="og:image" content="https://image.thecrag.com/fit-in/1200x630/5d/16/5d16d8ce488c12fec6dff3e20042d5f0321be01c" />

Note that I have added a fit-in method to dynamicImageUrl in WebHelpers.pm. Currently this function has one pre-defined method being biggest-includes-focus-center and now the fit-in makes a second.

I have also added two dynamicImageUrl tests, one for each of fit-in and biggest-includes-focus-center methods.