You share a link to your new project in a group chat.
- Slack: Shows a beautiful card with your hero image. ✅
- WhatsApp: Shows the title and thumbnail. ✅
- iMessage: Shows... a plain blue underlined link. ❌
The "Blue Bubble of Death" is frustrating because iMessage is often the primary channel for sharing apps and websites with friends or investors. If it looks broken, your product looks broken.
Here is the deep technical dive into why iMessage ignores your meta tags, even when everyone else respects them.
1. The apple-touch-icon Priority
Most platforms (Twitter, Facebook, LinkedIn) look for og:image first. iMessage is different. It historically prioritizes the apple-touch-icon—the icon used when saving a website to the iOS home screen.
If you have a high-res og:image but a missing or low-res apple-touch-icon, iMessage might get confused or show a tiny, ugly square icon instead of your rich preview.
The Fix:
Ensure you have a high-resolution touch icon defined in your <head>.
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Apple recommends 180x180 pixels or larger.
2. Who is Crawling? It's Applebot
When you paste a link in iMessage, your phone doesn't just download the HTML. Apple's servers often fetch the metadata using a crawler called Applebot.
If your server or firewall (like Cloudflare) is configured to block unknown bots or strictly allow only Googlebot, you might be accidentally blocking Apple.
The Fix:
Check your robots.txt and firewall settings. Ensure you are allowing the User-Agent:
User-agent: Applebot
Allow: /
3. The 3-Second Timeout Rule
iMessage is built for speed. If your website is a heavy Single Page Application (SPA) that renders client-side, the comprehensive HTML meta tags might not be populated until after JavaScript executes.
Applebot often has a very short timeout (reportedly around 2-3 seconds) for fetching metadata. If your server is slow to respond, or if your client-side rendering takes too long, iMessage gives up and shows the plain URL.
The Fix:
- Use Server-Side Rendering (SSR): Next.js, Remix, or Nuxt are great for this.
- Static Generation (SSG): Pre-build your HTML so it's served instantly.
- Header Ordering: Put your Open Graph tags at the very top of your
<head>, before any blocking CSS or JS scripts.
4. Localhost Testing is Impossible
You cannot test iMessage previews on localhost:3000. The crawler needs a public URL.
The Workflow:
- Use a tunneling tool like
ngrokto expose your local server. - Send the
https://....ngrok-free.applink to yourself. - Important: iMessage caches aggressively. If you send a broken link once, sending it again might show the cached broken version. You often need to change the URL slightly (e.g.,
/?v=2) to force a re-fetch.
Summary: The iMessage Checklist
-
og:imageexists and is < 300KB (safer for mobile). -
apple-touch-iconexists (180x180px). - Server Response is under 1 second.
- Applebot is whitelisted.
Don't want to manually debug this every time? Use the Katsau Debugger to see exactly what crawlers see, or check our specific WhatsApp Link Preview tool which shares similar mobile constraints.
Try Katsau API
Extract metadata, generate link previews, and monitor URLs with our powerful API. Start free with 1,000 requests per month.