Sorry, you need to enable JavaScript to visit this website.

Insight Open Graph Protocol image

By Danil Veselov

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="" />
<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=""

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:

image view

Get a free consultation

Related Items

Your First Shopify Project — Exciting Opportunities and Unexpected Challenges

After several Drupal and Shopify integrations, as well as online store development on Shopify, we'd like to share our experience with…

6 min read
By Yaroslav Lushnikov
hunter vs farmer
The Hunter vs. Farmer Sales Model: Finding Harmony in Sales

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,…

1 min read
By Alexandr Pozharenko
Magento vs Drupal Commerce
Drupal Commerce vs Adobe Commerce (Magento): Which platform is the Best for Your Online Business?

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…

6 min read
By Yaroslav Lushnikov
CLS Score
How to Improve CLS Scores in PageSpeed for Drupal Sites Using the EU Cookie Compliance Module for Cookie Warnings

Solving the Layout Shift Issue by Cookie Consent Pop-Ups

3 min read
By Dzmitry Hryn
Drupal security preview
Enhancing Drupal Website Security with Recommended Security Modules

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…

5 min read
By Aliaksandr Kostsikau
less work more output
Drupal Multisite: Less Work, More Output

Maintaining an online presence often forces companies to build multiple websites, with a site for each brand, product, or country. Keeping up…

5 min read
By Aliaksei Lyzo
Let's ask google
Is Drupal SEO friendly? Let's ask Google

Is Drupal SEO friendly? Good question. To get to the bottom of this, let's analyze the Google recommendations for website SEO optimization…

5 min read
By Aliaksei Lyzo
storybook header
Emulsify and Storybook as Freedom for Frontend and Backend Drupal Development

Streamlining UI Development for Large-Scale Projects

7 min read
By Volha Tsiamliak, Yaroslav Lushnikov