Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work

web-development

meta-tags

best-practices

responsive-design

byNikita Barsukov·Dec 4, 2024

To display a thumbnail for a link in WhatsApp, make sure your page's og:image meta tag is set correctly:

It should be placed inside the page's <head> tags.
The image URL within the og:image must be an absolute URL.
The image should be at least 300x200px and its file size should not exceed 300KB.

Here's an example:

<meta property="og:image" content="https://example.com/image.jpg" />

After the changes, don't forget to check with Facebook's URL Debugger tool to validate. Be sure your server doesn't block the image.

WhatsApp generates link previews using Open Graph (OG) tags. While og:image holds the key to thumbnails, WhatsApp has unique requirements that you should keep in mind:

Image Size: WhatsApp prefers images that are a minimum of 300x200 pixels. However, keep the image file under 300KB for smooth loading.

Specify Image Dimension: Use og:image:width and og:image:height tags to provide explicit image dimensions to WhatsApp. It helps in eliminating image cropping issues.

<meta property="og:image:width" content="300" /> <!-- Like your favorite cat's size in px -->
<meta property="og:image:height" content="200" /> <!-- Not the size of Godzilla, sadly -->

Use Secure URLs: If your site is served over HTTPS, include the og:image:secure_url tag. This ensures the link is secure and improves mobile browser compatibility.
```
<meta property="og:image:secure_url" content="https://example.com/image.jpg" /> 
```

Additional OG Tags: Adding og:site_name, og:type and og:updated_time tags offer more information about your site, leading to better display and functionality.

<meta property="og:site_name" content="Example Website" /> <!-- Mom, look at my site name on WhatsApp -->
<meta property="og:type" content="website" /> <!-- Not as exciting as it sounds -->
<meta property="og:updated_time" content="2023-04-01T20:00:00+0000" /> <!-- My first time travel -->

Revalidate After Changes: If you make any adjustments, always revalidate using tools like the Facebook Debugger. For WhatsApp, it may be necessary to reopen the app to refresh metadata changes.

Integration with schema.org for boosting SEO

itemprop attributes can significantly increase the value of your og:image. Integrating Schema.org markup could help:

Within the <head>, place your OG meta tags.

<meta property="og:image" content="https://example.com/image.jpg" /> <!-- Picture perfect -->

Inside the <body>, include a Thumbnail schema link with itemprop="thumbnailUrl":

<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
  <link itemprop="url" href="https://example.com/image.jpg"> <!-- A picture URL is worth a thousand visits -->
</span>

This structured data markup assists messaging platforms and search engines in better understanding and displaying your content.

Queuing up your og:image for... cross-platform stardom! A thumbnail that shines on WhatsApp can also look good on other social media:

Create Cross-platform Thumbnails: Different devices and platforms may prefer specific dimensions. Ensure your og:image is appropriate for them all.

<meta property="og:image" content="https://example.com/happy-cat-300x200.jpg" /> 
<meta property="og:image:alt" content="A happy cat" /> <!-- Because who doesn't love a happy cat? -->

Small Details Matter: If you want to cover all bases, include meta tags for MS Tile alongside your OG tags for comprehensive coverage.

<meta name="msapplication-TileImage" content="https://example.com/happy-cat-tile.jpg" /> <!-- Tiles are more than bathroom accessories -->

Compatibility Issues: Beware of differences between the WhatsApp Android app and other platforms when displaying images. Preempt this by testing on multiple devices.