Open Graph and Twitter cards: how to get perfect link previews

When you paste a link into WhatsApp, Slack, LinkedIn, Facebook, iMessage or X, the app fetches the page and looks for Open Graph tags to build a preview card: title, description and image. Without them, platforms guess, and they often guess wrong: a random logo, a cookie banner text, or nothing at all. Open Graph was created by Facebook, but it’s now the de facto standard almost every platform reads.

The essential tags

Place these in the <head> of every shareable page:

<meta property="og:title" content="Handmade Oak Dining Tables">
<meta property="og:description" content="Solid oak, made to measure in Yorkshire. Free UK delivery and a 10-year guarantee.">
<meta property="og:image" content="https://elmandoak.co.uk/img/og/dining-tables.jpg">
<meta property="og:url" content="https://elmandoak.co.uk/dining-tables/">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Elm & Oak">

<meta name="twitter:card" content="summary_large_image">

Optional but helpful: og:image:width, og:image:height and og:image:alt. Declaring dimensions lets some platforms render the card on the first share instead of waiting to download the image. For articles, article:published_time and article:author add context.

Our meta tag generator outputs the full set, including Open Graph and X tags, ready to paste.

Image size and design

• Size: 1200 × 630 px (1.91:1). This works for Facebook, LinkedIn, WhatsApp and X’s large card.
• Minimum: below roughly 600 px wide, several platforms fall back to a small thumbnail.
• File: JPEG or PNG are the safest. Keep it reasonably light (a few hundred KB at most); very large images may be skipped by some messaging apps.
• Safe zone: some apps crop to a square or 2:1 crop, so keep text and logos away from the edges.
• Text: large, high-contrast and short. Previews are often seen at thumbnail size on phones.

Design one template per content type (blog post, product, landing page) and generate images automatically if you publish often.

Platform notes

Facebook and Instagram links

Facebook reads Open Graph directly. Its Sharing Debugger shows exactly what its crawler sees, any warnings, and lets you Scrape Again to refresh the cache after changes.

LinkedIn

LinkedIn also uses Open Graph. The Post Inspector tool fetches the URL and refreshes LinkedIn’s cache. LinkedIn caches aggressively, so inspect the URL before sharing an updated page.

X (Twitter)

X needs twitter:card to choose the layout; everything else can fall back to Open Graph. summary shows a small square thumbnail; summary_large_image shows a wide image.

WhatsApp, Telegram, iMessage, Slack

These read Open Graph when the link is pasted. There’s no official WhatsApp debugger, and previews are cached on the device and by the platform. If you’ve changed an image, adding a query string to the shared URL (e.g. ?v=2) or renaming the image file often forces a fresh fetch.

Setting tags in popular platforms

You rarely need to write these tags by hand:

• WordPress: SEO plugins such as Yoast SEO, Rank Math and SEOPress add Open Graph and X tags automatically and offer a “social” tab per post where you can upload a custom image and title.
• Shopify: most themes output Open Graph tags from the product title, description and featured image; the store-wide social sharing image is set under Online Store → Preferences.
• Wix and Squarespace: each page has social sharing settings in its SEO panel.
• Frameworks (Next.js, Nuxt, Astro and similar) have built-in metadata APIs or head components; some can even generate OG images automatically from the page title.

Whatever the platform, check the result in the rendered HTML: theme and plugin conflicts can output two sets of tags, and platforms usually take the first one they find.

Debugging a broken preview

Run the URL through our Open Graph preview to see the tags a crawler finds and a mock-up of the card. Then check:

1. Tags present in the raw HTML? If they’re injected by JavaScript after load, many crawlers won’t see them. Server-render the head.
2. Absolute image URL? /img/og.jpg fails; https://example.com/img/og.jpg works.
3. Image reachable? No login, no hotlink protection, no bot-blocking firewall rule against platform crawlers (e.g. facebookexternalhit, LinkedInBot, Twitterbot).
4. Valid HTTPS? An expired or incomplete certificate breaks image fetching.
5. Correct canonical / og:url? A wrong og:url makes Facebook read the tags from that other page.
6. Cache refreshed? Use the debuggers or change the image file name.

Common mistakes

• One generic og:image (your logo) on every page.
• Copying the same og:title site-wide from a theme setting.
• Images with critical text near the edges, cut off by cropping.
• Relative image URLs or images served from a staging domain.
• Forgetting to update og:url after a migration, so shares point to old URLs.

Checklist

• og:title, og:description, og:image (absolute, HTTPS, 1200×630), og:url, og:type on every shareable page.
• twitter:card set to summary_large_image where a big image makes sense.
• Tags present in server-rendered HTML.
• Previews checked in a preview tool and the Facebook and LinkedIn debuggers after changes.
• Search titles and descriptions handled separately: see how to write title tags and meta descriptions.