Something worth considering
Insight for: Developers
Nowadays, it is important how the links you send through social networks or messengers look like. Could this be difficult? Let's figure it out.
Most services additionally display a preview of the link with an image and additional information, such as a title, a short description, etc.
Usually, it is information taken from meta tags of the page to which the link leads. These tags are created in accordance with the requirements of the Open Graph Protocol (OGP) standard.
It would seem, what could be easier? Just add a few tags to the page...
For example like this:
<meta property="og:site_name" content="Attico International" /><meta property="og:type" content="article" /><meta property="og:url" content="https://attico.io/insights/how-improve-cls-scores-pagespeed-drupal-sites-using-eu-cookie-compliance-module-cookie" /><meta property="og:title" content="How to Improve CLS Scores in PageSpeed for Drupal Sites Using the EU" /><meta property="og:description" content="Solving the Layout Shift Issue by Cookie Consent Pop-Ups" /><meta property="og:image" content="https://attico.io/sites/default/files/styles/cover/public/images/articles/How-to-test-internet-wifi-speed-free.jpg.png?itok=fyDiTohb"
We did just that, but ran into a problem: when trying to send a link via Skype, only the title and a short description of the page were displayed in the preview, but the picture was not displayed.
At the same time, this problem was not observed on most other services.
After reading Facebook's documentation, we found that OGP limits the number of available image formats that can be placed in a meta tag with the next 3: JPEG, PNG or GIF.
Earlier, in order to optimize, we added the conversion of all images on the site to WebP format.
This format allows you to optimize image sizes without losing quality, and as a result, speed up page delivery to users.
Facebook itself and its apps like Whatsapp and Messenger take the documentation more liberally and have added support for the WebP format.
But services like Skype and some others still haven't done it.
We hope that in the future this situation will be corrected and all services will start supporting the WebP format, but at the moment, we have been forced to change the image caching settings used in meta tags and return images in PNG format.
And now we can see absolutely beautiful previews for links to shared content from our site:
