WhatsApp Link Preview

What This Means

When you share a link on WhatsApp, iMessage, Telegram, or other messaging apps, the platform fetches Open Graph metadata to display a preview. Issues with these previews can result in:

• No preview appearing at all
• Missing or broken images
• Wrong title or description
• Generic "link" appearance without rich content

How to Diagnose

1. Test in WhatsApp

1. Send the link to yourself or a test group
2. Observe the preview that appears
3. Compare with your intended OG tags

2. Check OG Tags

WhatsApp uses standard Open Graph tags:

<meta property="og:title" content="Page Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page">

3. Use Facebook Debugger

WhatsApp (owned by Meta) uses similar crawling:

• Facebook Sharing Debugger
• Enter URL and check for issues

4. Common Issues

General Fixes

Basic WhatsApp-Compatible Setup

<!-- Minimum required for WhatsApp previews -->
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Brief description under 150 characters">
<meta property="og:image" content="https://example.com/preview.jpg">
<meta property="og:url" content="https://example.com/page">
<meta property="og:type" content="website">

<!-- Recommended additions -->
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">

Image Requirements

WhatsApp has specific image considerations:

<!-- Optimal for WhatsApp -->
<meta property="og:image" content="https://example.com/whatsapp-preview.jpg">
<meta property="og:image:width" content="400">
<meta property="og:image:height" content="400">

Common Fixes

1. Ensure HTTPS:

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

<!-- Wrong - will fail on WhatsApp -->
<meta property="og:image" content="http://example.com/image.jpg">

2. Use absolute URLs:

<!-- Correct -->
<meta property="og:image" content="https://example.com/images/preview.jpg">

<!-- Wrong -->
<meta property="og:image" content="/images/preview.jpg">

3. Ensure image accessibility:

# Make sure crawler can access images
location /images/ {
    # Don't require authentication
    allow all;
}

4. Check robots.txt:

# Allow all crawlers to access OG images
User-agent: *
Allow: /images/
Allow: /og-images/

Clear WhatsApp Cache

WhatsApp caches previews for approximately 7 days. To force refresh:

1. Add query parameter:

   https://example.com/page?v=2
   

2. Use different URL:

   • Add/remove trailing slash
   • Use www vs non-www variant

3. Wait for cache expiry:

   • WhatsApp cache typically expires within 7 days

4. Facebook refresh (may help):

   • Use Facebook Debugger
   • Click "Scrape Again"
   • Since WhatsApp is Meta-owned, this sometimes helps

Telegram-Specific Considerations

Telegram has its own bot for fetching previews:

<!-- Standard OG tags work for Telegram -->
<meta property="og:title" content="Title">
<meta property="og:description" content="Description">
<meta property="og:image" content="https://example.com/image.jpg">

<!-- Telegram also supports -->
<meta property="og:site_name" content="Site Name">

Telegram instant view:

• Telegram can display instant view for articles
• Requires Instant View template

iMessage Considerations

iMessage uses similar OG tag parsing:

• Prefers larger images (1200 x 630)
• Shows animated GIFs if provided
• Uses standard Open Graph tags

Platform-Specific Guides

Verification

1. Send link to yourself on WhatsApp
2. Check preview on both mobile and desktop WhatsApp
3. Test after clearing conversation cache
4. Try from different device to avoid local caching

Common Mistakes

Further Reading

• Open Graph Tags
• Social Image Dimensions
• Social Preview Caching