How to Make a Website Link Preview Show the Right Image in iMessage

To control the image in an iMessage link preview, add an og:image tag to the initial HTML response of the exact page you share. Point it to a public, direct image URL, and include a page-specific og:title. Apple recommends preview images at least 900 pixels wide. If the image is missing or too small, Messages may use an icon instead.

For example, add these tags inside the page’s <head> and replace the example URLs and copy with your own:

<meta property="og:title" content="A short, page-specific title">
<meta property="og:image" content="https://example.com/path/to/preview.jpg">
<meta property="og:description" content="A concise description of this page">
<meta property="og:url" content="https://example.com/page">
<link rel="apple-touch-icon" href="https://example.com/path/to/icon.png">

These tags belong on the page whose URL you are sharing. Put them in server-rendered HTML or otherwise make them available in the initial response. Apple says link previews do not run JavaScript or follow meta redirects, though server-side redirects are followed. Apple’s rich link preview guidance explains the requirements. The Open Graph Protocol defines the metadata properties used here.

1. Add Open Graph tags to the page

Use page-specific values rather than relying on a site-wide default. The essential image property is og:image; og:title supplies the preview title. A description and canonical page URL make the metadata more complete.

Tag	What it does	What to check
og:image	Identifies the image representing the page.	Use an absolute HTTPS URL that is publicly reachable and returns the intended image directly.
og:title	Provides a page-specific title.	Keep it concise and accurate; do not depend on text embedded in the image.
og:description	Provides a short summary.	Describe this page, rather than repeating a generic site tagline.
og:url	Identifies the page’s canonical URL in the Open Graph data.	Use the public canonical URL where appropriate.
apple-touch-icon	Provides an icon that can serve as a fallback.	Use a public square icon at least 108 pixels per side.

Apple recommends serving useful, equivalent metadata to mobile and desktop user agents. Avoid a setup where a browser displays tags only after JavaScript runs: the preview fetch needs the metadata directly from the page response.

2. Choose an image and fallback icon

Choose a clear image that represents the specific page. Apple recommends an image at least 900 pixels wide and warns that images under 150 pixels wide may be ignored or displayed as icons. Avoid putting important text in the image; it can become difficult to read when the preview is shown at different sizes. Put the title and description in metadata instead.

Provide an apple-touch-icon or another high-resolution icon as a fallback. Apple recommends square icons at least 108 pixels per side. The image and icon should both load without authentication or a browser session.

Account for Apple’s documented resource limits: the main page resource is limited to 1 MB, and associated resources such as images, icons, and videos total 10 MB. These are technical limits from Apple’s guidance, not a guarantee that every preview will render identically in every context.

3. Publish and inspect the actual response

1. Identify the exact public URL you intend to share, including its path and final destination after any server-side redirect.
2. Deploy the metadata in the page’s initial HTML response. Confirm that og:image points to the intended image, not a relative path or development asset.
3. Open the image URL directly in a private browser window or request it with an HTTP client. Confirm it is accessible without cookies, login, or JavaScript.
4. Check that your page and image fit Apple’s documented size guidance and limits.
5. Share the published page URL in Messages and inspect the resulting preview.

For a quick command-line inspection, substitute your page URL. This checks the response body you receive; it does not guarantee that Apple’s preview fetch sees the same response under every condition.

curl -L --fail --silent --show-error https://example.com/page

Search the output for og:image and og:title. Then request the image itself:

curl -L --fail --silent --show-error \
  --output /tmp/preview-image \
  https://example.com/path/to/preview.jpg

Check the image dimensions with your image viewer or image-processing tool. Make sure the URL returns the intended image rather than an error page, login page, or redirect to an unrelated asset.

4. Troubleshoot a wrong or missing preview image

Symptom	Likely cause	Fix
No preview image	og:image is absent, malformed, or only added by client-side JavaScript.	Put a valid absolute image URL in the page’s initial HTML response and inspect the deployed response.
Wrong image	The shared page has a generic or stale og:image, or the URL points to a different asset.	Set the correct page-specific image and verify the exact URL in the published HTML.
An icon appears instead	The preview image may be too small or low quality, or may not be fetchable.	Use a clear image at least 900 pixels wide, verify public access, and provide a square icon at least 108 pixels per side as fallback.
Image URL works only in your browser	Access depends on cookies, a login, or another browser-only state.	Make the image publicly reachable by direct URL.
Preview has old content after an update	The preview may reflect previously fetched metadata or image content.	Verify the deployed page and asset first, then share the published URL again. Apple’s reviewed guidance does not document a guaranteed cache reset or refresh interval, so no cache-busting method can be promised.
Different results on mobile and desktop	The server may return different metadata by user agent, or a mobile page may omit tags.	Serve useful, consistent tags to both mobile and desktop clients.
Page loads but preview does not reach the right content	The page relies on a meta refresh or JavaScript to move to the page containing metadata.	Put metadata on the shared URL’s response. Apple says previews do not follow meta redirects or run JavaScript; server-side redirects are followed.
Preview fails for a large page or asset	The main resource or associated resources may exceed Apple’s stated limits.	Keep the main page resource within 1 MB and associated resources within 10 MB total.

5. Verify captures with ScreenshotNeo

If you need to inspect how a page renders in a browser, ScreenshotNeo is a website screenshot API and MCP server from Yorker Media. A screenshot can help you review the rendered page, but it does not replace checking the raw HTML metadata or guarantee what iMessage will display. See the ScreenshotNeo documentation for API options.

For example, this runnable cURL command saves a rendered screenshot of your page:

curl -G "https://api.screenshotneo.com/v1/shot" \
  -d access_key=YOUR_API_KEY \
  --data-urlencode url=https://example.com/page \
  -o shot.webp

Python:

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://example.com/page"},
    timeout=90,
)
r.raise_for_status()
with open("shot.webp", "wb") as f:
    f.write(r.content)

Node.js:

const q = new URLSearchParams({
  access_key: 'YOUR_API_KEY',
  url: 'https://example.com/page'
});
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`);
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', Buffer.from(await res.arrayBuffer())));

Or skip the browser setup

Make one GET request to capture a page. The full options and parameter details are in the ScreenshotNeo docs.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/page -o shot.webp

ScreenshotNeo accepts cookie and consent banners and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers say the page verdict and whether the request was billed. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000.

Sign up for 1,000 free screenshots a month, with no card required.

6. Performance, reliability, and cost

Keep the page and preview asset within Apple’s resource limits, serve the image directly, and avoid making metadata depend on client-side work. This reduces avoidable fetch failures and keeps the preview image usable on small cards. Apple’s guidance does not specify a guaranteed refresh period, a cache purge control, or a way to force Messages to update a preview immediately.

The metadata fix itself requires editing and deploying your site; it does not require a screenshot API. ScreenshotNeo is optional for browser-rendered visual review or automated capture workflows. Its free tier is 1,000 shots per month without a card. Paid plans are Starter $5 for 3,000, Growth $15 for 15,000, Pro $39 for 60,000, Scale $99 for 250,000, and Business $249 for 1,000,000; yearly billing gives two months free. Every feature is on every plan. Use it when the capture workflow is useful, not as a substitute for publishing correct Open Graph tags.

Frequently asked questions

Does og:image have to be hosted on the same domain?

The cited Apple guidance requires useful metadata and reachable associated resources; it does not state a same-domain requirement. Use a stable public image URL and verify it loads directly.

Will changing the image URL force iMessage to refresh?

Apple’s reviewed documentation does not promise a cache reset or refresh interval. Confirm the new metadata and image are live, then share the page again; an immediate update is not guaranteed.

Can I put the page title inside the preview image?

You can create an image with text, but Apple recommends avoiding text because it may be unreadable at preview sizes. Put the title in og:title.

Will a screenshot prove what iMessage will show?

No. A browser screenshot shows a rendered page, while the preview depends on metadata and resource fetching. Inspect the initial HTML response and image URL directly as well.

Sources

• Apple Developer Documentation: Create rich previews for website links (TN3156)
• The Open Graph protocol
• ScreenshotNeo API documentation