iMessage Open Graph Tags: How Apple Messages Renders Link Previews

iMessage is the default messaging app on over 1.5 billion active Apple devices. When someone shares a URL in iMessage or Messages on macOS, the app fetches a rich preview card directly below the message bubble — showing your title, description, and image. If your Open Graph tags are missing or misconfigured, that card is blank or nonexistent. Here is exactly how it works and how to get it right.

How iMessage Fetches Link Previews

When a URL is sent in iMessage, the receiving device (or the sending device on iOS 13+) initiates a background HTTP GET request to fetch the linked page. Apple's LinkPresentation framework — part of iOS 13+ and macOS 10.15+ — reads the HTML response and extracts OG meta tags, Twitter Card tags, and standard HTML title/description tags to build a LPLinkMetadata object.

This fetch is performed by the device itself, not by a central Apple server. The user-agent string varies slightly by OS version but typically resembles "Applebot" or an iOS Safari WebKit string. Importantly, iMessage does NOT execute JavaScript — the preview is built entirely from the server-rendered HTML.

Which Tags iMessage Reads

iMessage uses the following tags in priority order:

• —og:title — shown as the card heading; truncated at approximately 80 characters
• —og:description — shown as the card body text; truncated at approximately 200 characters
• —og:image — the preview image displayed in the card
• —og:url — the canonical URL; used for click-through and deduplication
• —og:site_name — shown as the source label under the title
• —twitter:title / twitter:description / twitter:image — used as fallback if OG equivalents are absent
• —HTML <title> — last resort if no OG or Twitter tags are present

Recommended Tag Set for iMessage

<!-- Required for iMessage link preview -->
<meta property="og:title" content="Your Page Title — Under 80 Characters" />
<meta property="og:description" content="A clear, concise description of this page." />
<meta property="og:image" content="https://yourdomain.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yourdomain.com/your-page" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Your Brand" />

<!-- Twitter card as fallback -->
<meta name="twitter:card" content="summary_large_image" />

Image Requirements for iMessage

iMessage applies its own image constraints through the LinkPresentation framework:

• —Recommended size: 1200×630px at 1.91:1 aspect ratio
• —Minimum size: approximately 300×200px — very small images may be omitted
• —Maximum file size: no officially documented limit, but images over 2MB may be skipped on slower connections
• —Supported formats: JPG, PNG, GIF (first frame only), WEBP
• —Image must be served over HTTPS — HTTP image URLs are blocked on modern iOS
• —Image URL must be publicly accessible — no authentication, no cookies required
• —Redirects are followed, but the final URL must return the image directly
• —Square images (1:1) are rendered as a square thumbnail on the left of the card
• —Landscape images (1.91:1) fill the full-width card header slot

How the Preview Card Looks on iOS vs macOS

The iMessage preview card layout differs slightly between platforms:

• —iOS (iPhone/iPad): A full-width card is rendered below the message bubble. Landscape og:image fills the top; title and description appear below it.
• —macOS Messages: A smaller inline preview appears with a thumbnail on the left and title/description on the right — similar to a Slack unfurl.
• —Both: Tapping or clicking the card opens the URL in Safari.
• —Both: If og:image is absent, a globe icon placeholder is shown instead of an image.

Common Reasons iMessage Shows No Preview

• —OG tags injected by JavaScript — LinkPresentation sees only the server-rendered HTML
• —og:image served over HTTP instead of HTTPS
• —Page returns a non-200 status code (404, 500, 301 chain)
• —og:title missing or empty — iMessage requires a title to show any preview
• —og:image URL requires authentication or returns 403
• —Content-Security-Policy blocking Apple's user-agent from fetching the image
• —DNS resolution failing or server too slow — LinkPresentation has a short timeout (~5 seconds)
• —The link is typed as plain text with no protocol (e.g., "example.com" instead of "https://example.com")

Next.js App Router: Server-Side Rendering is Required

With Next.js App Router, metadata is server-rendered by default — exactly what iMessage needs. Export a metadata object from your page or layout and Next.js will inject the OG tags into the static HTML response:

// app/your-page/page.tsx
import type { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'Your Page Title',
  description: 'Description under 200 characters.',
  openGraph: {
    title: 'Your Page Title',
    description: 'Description for social and messaging platforms.',
    url: 'https://yourdomain.com/your-page',
    siteName: 'Your Brand',
    images: [
      {
        url: 'https://yourdomain.com/og-image.jpg',
        width: 1200,
        height: 630,
        alt: 'Preview image for Your Page Title',
      },
    ],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'Description for Twitter/X.',
  },
};

How to Test iMessage Link Previews

Testing iMessage previews is less straightforward than testing Twitter or LinkedIn because there is no dedicated developer tool. Here is the most reliable workflow:

1. 1.Use OGProof to confirm your OG tags are present in the raw server-rendered HTML and your og:image is accessible over HTTPS
2. 2.Send the URL to yourself in iMessage (use a second device or Apple's Messages app on macOS)
3. 3.iOS caches previews briefly — if you update your tags and the old preview still shows, send the message again after a few minutes
4. 4.If you need to test a localhost URL, use a tunneling service (ngrok, localtunnel) to give it a public HTTPS address that iMessage can reach

Simulating the iMessage Fetcher with curl

You can verify that your OG tags are in the server-rendered HTML by simulating the LinkPresentation fetch with curl:

# Simulate iMessage/LinkPresentation fetch
curl -s -A "Applebot/0.1" https://yourdomain.com/your-page \
  | grep -iE 'og:title|og:description|og:image|og:url'

# Also check with a generic iOS WebKit user-agent
curl -s -A "Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15" \
  https://yourdomain.com/your-page | grep -iE 'og:title|og:description|og:image'

If the tags appear in the curl output, LinkPresentation can read them. If they are absent, your tags are being injected client-side and iMessage will not render a preview.

iMessage vs. Other Apple Platforms

Open Graph tags are used across multiple Apple surfaces beyond iMessage:

• —Safari Reading List — uses og:title and og:image as the saved item thumbnail
• —Safari Shared Tab Groups — shows og:image and og:title in the shared tab grid
• —Spotlight Suggestions — Spotlight on macOS can surface OG title/description in search results
• —Handoff / Universal Clipboard — og:title is used when sharing a URL between Apple devices via AirDrop or Handoff
• —All of these use the same LinkPresentation framework and the same OG tag priority order

Checklist: iMessage-Ready Open Graph Tags

• —og:title present and under 80 characters
• —og:description present and under 200 characters
• —og:image present and served over HTTPS
• —og:image at least 300×200px (1200×630px recommended)
• —og:url set to canonical URL
• —og:site_name set to brand name
• —All OG tags present in server-rendered HTML (not JavaScript-injected)
• —og:image URL publicly accessible without authentication
• —Page returns HTTP 200 (not a redirect chain or error)
• —Validated with OGProof to confirm tags are in static HTML and image is reachable