Open Graph Tags: How to Control Your Link Previews on Every Platform

When someone pastes your link into LinkedIn, Slack, Facebook or X, the platform fetches the page and builds a preview card: a title, a short description, an image and the domain. If the page tells it nothing, it guesses, and the guess is often the wrong text, a logo cropped to a sliver or no image at all. Open Graph tags are how you tell it what to show.

The basics fit in a dozen lines of HTML, but the details trip people up. Each platform reads a slightly different set of tags, documents different image sizes and caches previews for a different length of time, and X's card documentation has disappeared from its live developer site. This guide sets out what each platform actually documents, with copy-ready tags, a per-platform image table and a workflow for fixing stale or broken previews.

What Open Graph tags are and which ones you need

The Open Graph protocol was created at Facebook to turn any web page into a "rich object" that platforms can display. It works through <meta property="og:…"> tags in the page's <head>. The protocol names four required properties for every page and a set of optional ones:

Three rules from the protocol prevent most problems. URL values must use http:// or https://, so write full addresses, not relative paths. When a tag appears more than once, the first one is preferred in case of conflict. And a page without markup is treated as og:type website, which Facebook also uses as its default.

<meta property="og:type" content="article">
<meta property="og:title" content="How to Plan a Three-Day Hike">
<meta property="og:description" content="Route, gear and food for a three-day trail, with a printable checklist.">
<meta property="og:url" content="https://www.example.com/guides/three-day-hike">
<meta property="og:image" content="https://www.example.com/images/share/three-day-hike-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Two hikers with backpacks on a ridge trail above a lake">
<meta property="og:site_name" content="Example Outdoors">
<meta property="og:locale" content="en_US">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@exampleoutdoors">

X cards and their fallbacks to Open Graph

X uses <meta name="twitter:…"> tags, but its markup reference lists an Open Graph fallback for the most important ones, so you rarely need to duplicate content:

twitter:card

The card type: summary, summary_large_image, app or player. If it is missing but og:type, og:title and og:description exist, "a summary card may be rendered".

twitter:title

Falls back to og:title. Maximum 70 characters.

twitter:description

Falls back to og:description. Maximum 200 characters.

twitter:image

Falls back to og:image. Under 5 MB; JPG, PNG, WEBP and GIF are supported (only the first frame of a GIF); SVG is not.

twitter:image:alt

Falls back to og:image:alt. Maximum 420 characters.

twitter:site

Your site's @username. The markup reference lists it as required, while the individual card pages mark it optional; adding it costs nothing.

The archived card pages also ask for a unique image per page and warn against generic images such as a site logo or an author photo used across many pages.

Share image requirements per platform

Image specifications are where platforms differ most. This table collects what each platform's own documentation says.

Our reading of these documents: one 1200 × 630 pixel JPG or PNG under 5 MB meets LinkedIn's minimum, exceeds Facebook's recommended width and is well above X's large-card minimum. X's 2:1 card may crop it slightly, so keep faces and words away from the edges. WebP works on X, but Facebook's documented type list does not include it, so JPG or PNG is the safe common choice. For compression and file formats in general, see our image SEO guide.

How Facebook, LinkedIn, Slack and X read your tags

Facebook

Meta's guide to sharing for webmasters says that without Open Graph tags its crawler "uses internal heuristics to make a best guess" at the title, description and image. It defines og:url as the canonical URL where likes and shares aggregate, so it should match your canonical link (our guide to duplicate content explains canonical URLs). Your server must support gzip and deflate encoding for pages to be shared correctly.

LinkedIn

LinkedIn Help lists four tags that must exist: og:title, og:image, og:description and og:url. If an image meets the requirements but still doesn't appear, LinkedIn suggests the site may be blocking it or the image may sit in a protected directory.

Slack

Slack's robots page says its link-expanding bot fetches as little of the page as it can, using HTTP Range headers, and looks for oEmbed and Twitter Card / Open Graph tags; it then fetches any referenced image to check it. Responses are cached across Slack for around 30 minutes. Slack also states that it does not honor robots.txt, because it acts on behalf of a person rather than crawling. Since Slack reads as little of the page as it can, our recommendation is to place these tags early in the <head>.

X

X's archived troubleshooting guide says its crawler, Twitterbot, follows robots.txt, so a Disallow rule can stop cards. It also lists a 2 MB limit for page responses, requires the image to be publicly accessible and says the crawler re-reads card tags roughly every seven days.

Fix stale or broken previews

Most "my preview is wrong" problems are either a tag problem or a cache problem. Work through them in this order:

1. Check what your server returns. View the page source rather than the browser's element inspector, and confirm each tag appears once, with absolute URLs. None of the platform documentation we reviewed says its fetcher runs JavaScript, so don't rely on tags inserted by scripts.

2. Open the image URL on its own. It should load publicly over https as a JPG or PNG of the right size, without a login, redirect loop or hotlink block.

3. Use a new URL for a new image. Facebook states that images are cached by URL and won't update unless the URL changes; X's archived guide says the same.

4. Refresh Facebook. The Sharing Debugger shows which tags Meta's crawler reads, lists errors and triggers a fresh scrape; otherwise Meta updates scraped content on a standard 24-hour cycle.

5. Refresh LinkedIn. Run the URL through Post Inspector. LinkedIn notes that only new posts pick up the refreshed preview; existing posts keep the old one.

6. Allow for the other caches. Slack caches link expansions for around 30 minutes. For X, the archived documentation describes a re-read roughly every seven days.

Common Open Graph mistakes

Check your tags with Backlnk's Meta Tags & Social Preview

The Meta Tags & Social Preview tool reads every meta tag on a page with its source line and shows how the link will look in Google results, LinkedIn, X, Facebook and Slack. It checks:

• The four required Open Graph properties, og:description, og:image:alt, absolute URLs and whether og:url matches the canonical URL.
• The twitter:card type, which value each X field falls back to, and X's 70, 200 and 420-character limits.
• The share image with one request: HTTP status, an image content type and a file size within 5 MB, with a warning for SVG.
• Declared og:image:width and og:image:height against LinkedIn's and X's documented sizes.
• Duplicated tags with conflicting values, empty tags and any oEmbed discovery link, which Slack also reads.

Two limits are worth knowing. It compares the width and height you declare but does not download the image to measure its pixels. And its previews show what your tags supply according to each platform's documentation; platforms can still crop, cache or rewrite what they display. Choose Rendered mode if your tags are added by JavaScript. For titles, canonicals and the rest of your technical setup in one pass, run the free full audit, which e-mails you a combined report.

Next step

Take the page you share most often, add the tag block above with your own values and a 1200 × 630 image, and check it in the Meta Tags & Social Preview tool. Then refresh its preview in the Sharing Debugger and Post Inspector so the next share shows the new card.