Nowadays, it is important how the links you send through social networks or messengers look like.
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:
After several Drupal and Shopify integrations, as well as online store development on Shopify, we'd like to share our experience with…
In the world of sales, the hunter vs. farmer sales model has emerged as a powerful approach to drive growth and retain customers. This model,…
When it comes to creating an online store, selecting the right platform for your business is vital. In this article, we at Attico will take a…
Solving the Layout Shift Issue by Cookie Consent Pop-Ups
Website security is not a set-it-and-forget-it task, but an ongoing process that needs constant attention. After all, it’s better to prevent a…
Maintaining an online presence often forces companies to build multiple websites, with a site for each brand, product, or country. Keeping up…
Is Drupal SEO friendly? Good question. To get to the bottom of this, let's analyze the Google recommendations for website SEO optimization…
Streamlining UI Development for Large-Scale Projects