Skip to content

We use analytics cookies to see how the site is used. They are only set if you accept. Accepting also turns on session recording (pages viewed, clicks and scrolls) so we can fix problems; what you type stays hidden. Read the privacy policy

SitePatent
login$ submit
Wireframe of a link preview card with lines from its image, domain, title and description to the og:image, og:url, og:title and og:description tags

Site Quality - 7 min read

Why Your Shared Link Looks Broken: Open Graph Tags That Fix Link Previews

When someone shares your page in Facebook, LinkedIn, Slack or iMessage, a few lines in your HTML decide whether they see a picture and a title or a bare grey link. Which tags each app reads, the image size that works in all of them, and how to refresh a stale preview.

By SitePatent Editorial Team Published Reviewed

Without tags

Have a look at our wedding page

example.com/weddings

With Open Graph

Have a look at our wedding page

Blue Fern Studio

Wedding photography in Leeds

The same link shared twice: once from a page without Open Graph tags, once from a page with them. An invented example.

Paste your home page into a chat and the app decides in a second what to show: a picture with a title and a line of text, or a bare grey link.

Short answer

Put six Open Graph tags in the HTML of every page people share: og:type, og:title, og:description, og:image, og:image:alt and og:url. Use one image of 1200 x 630 pixels, under 5 MB. That size meets what Facebook, LinkedIn and Apple's Messages each ask for, and Slack reads the same tags.

A link preview (also called a link card or unfurl) is the box an app builds when someone shares a URL. The app sends a robot to the page, reads tags from the HTML, and fills each part of the box from one tag.

Those tags come from the Open Graph protocol, a set of <meta> tags placed in the page's <head>. The protocol names four required properties for every page: og:title, og:type, og:image and og:url, and says a page with an image should also describe it in og:image:alt (The Open Graph protocol, ogp.me).

1

2Blue Fern Studio

3Wedding photography in Leeds

4Natural, unposed wedding photos. See full galleries and 2027 dates.

  1. og:image the picture, with og:image:alt describing it
  2. og:site_name the name of the whole site
  3. og:title the name of this page
  4. og:description one or two sentences
Which tag fills which part of a typical preview card. The business is an invented example.

Which tags should every page have?

Copy these lines into the <head> of each page and change the values. If you use a site builder, look for its social sharing settings, and check the result with the tests further down.

  • Title: the page, not the brand. Apple asks you to keep the site name out of og:title and put it in og:site_name instead (Apple TN3156).
  • Width and height: Facebook asks for them, so the image loads properly the first time the page is shared (Meta, A Guide to Sharing for Webmasters).
  • The URL: the canonical address of the page, the one you want people to land on (ogp.me).
<meta property="og:type" content="website" />
<meta property="og:site_name" content="Blue Fern Studio" />
<meta property="og:title" content="Wedding photography in Leeds" />
<meta property="og:description" content="Natural, unposed wedding photos. See full galleries and 2027 dates." />
<meta property="og:url" content="https://example.com/weddings" />
<meta property="og:image" content="https://example.com/share/weddings.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="A couple laughing under an oak tree" />
Nine lines for one page. example.com stands in for your own domain.

What does each app read, and where does it trip?

The four apps below all read Open Graph tags, but each documents its own limits. These are the ones that break previews most often.

Facebook

Reads: og:url, og:title, og:description, og:image

  • Without these tags, its crawler "uses internal heuristics to make a best guess" at the title, description and image (Meta).
  • The tags must sit in the first 1 MB of the page, or they are cut off (Meta Web Crawlers).
  • Images are cached by URL and not updated unless the URL changes.

LinkedIn

Requires: og:title, og:image, og:description, og:url

  • Image at least 1200 x 627 pixels, ratio 1.91:1, at most 5 MB (LinkedIn Help).
  • An image less than 401 pixels wide shows only as a small thumbnail.
  • If a correct image still does not appear, your site may be blocking LinkedIn or the image may sit in a protected folder.

Slack

Reads: oEmbed, Twitter Card and Open Graph tags

  • Its robot fetches as little of the page as it can, then fetches the image to check it (Slack Robots).
  • Results are cached across Slack for around 30 minutes.
  • It does not follow robots.txt, so blocking it there does not work; Slack asks site owners to contact it instead.

Apple Messages

Reads: Open Graph tags, plus your icon

  • Does not run JavaScript or follow meta redirects: the tags must be in the HTML the server sends. Server-side redirects are followed (Apple TN3156).
  • Image at least 900 pixels wide; under 150 pixels it may be ignored or shown as an icon. The page itself is limited to 1 MB.
  • Avoid text in the image: it may be shown small enough to be unreadable.

What size should the share image be?

1200 x 630 pixels, under 5 MB. Each app documents a different floor, and that one image clears all of them: Facebook recommends at least 1200 x 630 and a ratio close to 1.91:1, so the full image shows without cropping (Meta, Images in Link Shares); LinkedIn asks for at least 1200 x 627 at 1.91:1 (LinkedIn Help); Apple asks for at least 900 pixels wide (Apple TN3156).

The file limit is lowest on LinkedIn, at 5 MB. Facebook allows 8 MB, and Apple allows 10 MB for all the icons, images and videos of one preview together.

Keep words off the picture, or make them large: apps show the same image at different sizes depending on the context and the device (Apple TN3156).

Smallest width for a large preview image

  1. Facebook 600 px 600 x 315 for a large image; 1200 x 630 recommended
  2. Apple Messages 900 px at least 900 wide
  3. LinkedIn 1200 px at least 1200 x 627

Largest image file allowed

  1. LinkedIn 5 MB
  2. Facebook 8 MB
  3. Apple Messages 10 MB
Facebook 600 px (1200 recommended), Apple Messages 900 px, LinkedIn 1200 px. File limits: LinkedIn 5 MB, Facebook 8 MB, Apple Messages 10 MB for all media together. Sources: Meta, LinkedIn, Apple.

How do I test a preview and fix a stale one?

  1. Check the tags are really in the page

    Open the page, choose "View page source" in your browser and search for og:. If the tags only appear after the page runs JavaScript, Apple's previews will not see them.

  2. Run Facebook's Sharing Debugger

    Paste the URL into the Sharing Debugger. It shows which tags the crawler read, with errors and warnings, and it also triggers a new scrape of the page (Meta).

  3. Run LinkedIn's Post Inspector

    Paste the URL into the Post Inspector to see the preview LinkedIn builds from your page.

  4. Send it to yourself

    Paste the link in a Slack message to yourself and in an iMessage. Slack keeps its result for around 30 minutes, so wait before you test a change there again.

  5. Changed the picture? Change its file name

    Facebook caches images by URL, so a new picture under the old address may never show. Save it as a new file, such as weddings-2.jpg, update og:image, and run the debugger again.

Before you share a page: tick each line

  • og:title names the page, and the brand is in og:site_name.
  • og:description is one or two sentences a stranger would understand.
  • og:image is 1200 x 630, under 5 MB, with width and height tags.
  • og:image:alt says what is in the picture.
  • og:url is the address you want people to land on.
  • The tags are in the page source, inside <head>, well before the first 1 MB of the page.
  • The Sharing Debugger and Post Inspector both show the right picture and title.

Questions site owners ask

Why does my link still show the old picture?

Facebook caches images by URL and does not update them unless the URL changes (Meta). Give the new image a new file name and run the Sharing Debugger. In Slack, wait about 30 minutes.

What do apps show if my page has no Open Graph tags?

It depends on the app. Facebook guesses the title, description and image (Meta). Apple's Messages shows a grey bubble with the page title, the domain and a small icon (Apple).

Can I use the same image on every page?

You can, and it beats having none. A picture of the product, service or article on each page tells people more about the exact page they are about to open.

Should I put my logo and headline on the image?

Keep text off it, or very large. Apple advises against text in preview images, because they can be shown small enough to be unreadable, and the title and description already carry the words (Apple TN3156).

My page needs a login. What should the preview show?

A plain description of what the page is, with nothing private in it, never "Sign in". Apple asks for meaningful tags that reveal no sensitive content, so every shared link does not read "Sign in" (Apple TN3156).

Sources

Continue Reading

More articles you might enjoy

Site Quality

Your 404 Page: The Status Code It Must Send, and What to Put On It

A good "page not found" page does two jobs: it sends HTTP status 404 (or 410) so search engines drop the dead URL, and it shows visitors a way back into your site. What to put on the page, which code to send in each case, the settings to check in Apache, Nginx, Next.js, WordPress, Netlify and Cloudflare Pages, and a 6-point test.

8 min read

Site Quality

The 6 Website Accessibility Errors Behind 96% of Detected Errors, and How to Fix Each

WebAIM tested one million home pages in 2026 and found 95.9% with detected WCAG failures. Six errors make up 96% of what was detected, and each has a small, concrete fix.

8 min read

Web Design

Font Size, Line Height and Line Length: How to Make Website Text Easy to Read

Body text at 16px or larger, a line height of about 1.5, lines of 45 to 75 characters and a contrast of at least 4.5:1, set in rem so the reader can still enlarge it. Where each number comes from, what design systems use, the CSS, and a ten-minute test for your own pages.

8 min read