iMessage link preview not working or showing a gray bubble

Why the iMessage preview is plain or missing

• There’s no og:image. By default Messages shows a gray bubble with the title, domain and a small icon.

• The tags are added by JavaScript. Link previews don’t run JavaScript, so metadata must be in the HTML.

• The page uses a meta refresh redirect. Messages doesn’t follow meta redirects. Server-side redirects work.

• The page is too big. The main page is limited to 1 MB, and icons, images and video together to 10 MB.

• Mobile and desktop get different HTML. Apple asks for the same metadata for both.

How to fix it

1. Read the tags with the meta tag checker.

2. Add og:image with an image at least 900 px wide. Keep text out of it, because it can show at small sizes.

3. Add a square icon of at least 108 px. Messages uses an apple-touch-icon, a favicon or a <link rel> icon. Test it with the favicon checker.

4. Set og:title to the page title without the site name, and put the brand in og:site_name.

5. Replace any meta refresh with a server redirect.

Tags Messages reads

• og:title for the caption

• og:image for the picture

• og:site_name for the brand

• og:video or twitter:player:stream pointing at a video file for inline playback

• An icon from apple-touch-icon or the favicon

Image size rules

• Images at least 900 px wide

• Images under 150 px wide may be ignored or shown as an icon

• Icons square, at least 108 px per side

• Page HTML up to 1 MB; all images, icons and video up to 10 MB

Apple calls these guidelines and says limits may change.

How to force a refresh

Messages has no refresh tool. Send the URL with a query string, such as ?v=2. Not verified: Apple doesn’t publish how long a preview stays cached. The refresh tool covers the other apps too.

Sources

• TN3156: Create rich previews for Messages