Skip to content

Open Graph Preview: How to Fix Link Previews on X, LinkedIn and Slack

By Needle TeamPublished Updated 3 min read

Share
Summarize with AI
On this page

Short answer: an Open Graph preview is the card (title, description and image) that X, LinkedIn, Slack, Facebook, Discord and iMessage build when someone shares your link. It comes from og: meta tags in your page's HTML, plus twitter: tags for X. To check yours before sharing, paste the URL into the free OG Share Image Checker.

When users share links to your SaaS product or blog posts on platforms like Twitter/X, LinkedIn, Slack, or Facebook, the platform displays a visual preview card. A shared link with no image, or with a badly cropped one, is easy to scroll past.

To ensure your shared links look professional and engaging, you must declare correct Open Graph (OG) and Twitter Card tags in your page HTML.

This guide explains how social previews work and how to optimize your card tags.

1. The Anatomy of a Preview Card

Social media cards are generated using metadata tags placed inside the <head> of your webpage:

  • og:title & og:description: The title and summary displayed below or on the preview card.
  • og:image: The absolute URL of the image displayed on the preview card.
  • og:url and og:type: The canonical URL of the page and its type (website or article).
  • twitter:card: Specifies the card format (e.g. summary_large_image for large header images or summary for small square thumbnails).

A minimal, working set looks like this:

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One or two sentences on what the page offers." />
<meta property="og:image" content="https://yourdomain.com/og/page.png" />
<meta property="og:url" content="https://yourdomain.com/page" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />

If these tags are missing, platforms will attempt to scrape random images or text from your page, leading to broken or irrelevant previews.

2. Best Practices for OG Images

To prevent cropping or pixelated cards:

  1. Resolution: Use an image with a resolution of 1200 x 630 pixels (a 1.91:1 aspect ratio). This matches the standard container dimensions for Facebook, LinkedIn, and Twitter/X large cards.

  2. Absolute URLs: The og:image URL must be absolute (e.g., https://yourdomain.com/og-image.jpg), not relative (/og-image.jpg), as external social scrapers cannot resolve relative links.

  3. Crawlable Image Paths: Verify that the image path is not blocked by your robots.txt file, allowing social media bots to download it.

  4. Server-rendered tags: Preview bots generally don't run JavaScript. If your framework injects meta tags on the client only, platforms see nothing. Render them in the initial HTML.

3. Open Graph on X (Twitter)

X reads its own twitter: tags first. If twitter:title, twitter:description or twitter:image are missing, it falls back to the matching Open Graph tags. So you don't need to duplicate everything, but you do need:

  • twitter:card set to summary_large_image for a wide image, or summary for a small square thumbnail.
  • An og:image (or twitter:image) that is publicly reachable.

Without twitter:card, X may show a plain link or a small card even when your Open Graph tags are perfect.

4. Why a Platform Shows an Old Preview

Platforms cache link previews, sometimes for days. After you change your tags:

  • LinkedIn: paste the URL into LinkedIn's Post Inspector, which refetches the page.
  • Facebook: use Meta's Sharing Debugger and choose to scrape again.
  • X, Slack and others: there's no public refresh button. Changing the image URL (for example og.png?v=2) makes the platform fetch the new image the next time the link is shared.

5. Previewing Your Open Graph Tags

Instead of posting links manually to check previews, you can analyze your tags programmatically.

Use the OG Share Image Checker to preview any URL. It fetches the page HTML, reads the Open Graph and twitter: tags, checks that the share image actually loads, reports its dimensions, and warns if the image is smaller than 600 x 315 pixels, the minimum for a large preview card.

For the rest of your on-page tags (title, description, canonical), see our guide to on-page SEO meta tags.

Frequently asked questions

How do I preview my Open Graph tags?

Paste the URL into an Open Graph preview tool such as Needle's free OG Share Image Checker. It reads the og: and twitter: tags from the page, checks that the image loads, and reports its size. LinkedIn's Post Inspector also shows how LinkedIn will render the link.

Does X (Twitter) use Open Graph tags?

Yes, partly. X reads twitter: tags first and falls back to og:title, og:description and og:image when the twitter: versions are missing. It still needs a twitter:card tag, such as summary_large_image, to pick the card layout.

Why does LinkedIn or X still show my old preview?

Platforms cache previews. LinkedIn's Post Inspector refetches the page when you inspect the URL. For other platforms, changing the og:image URL (for example by adding a version parameter) forces a fresh image the next time the link is shared.

Related content

More articles, guides, tools, and comparisons for this topic.

Free tool

Free OG & Twitter Share Image Checker

Verify Open Graph and Twitter Card images for reachability, dimensions, and preview readiness so shared links render correctly across social platforms.