Paste a link into Facebook, X, LinkedIn, or WhatsApp and watch what happens: a title appears, a short description, and a big image. That preview is not magic and it is not automatic. It is built from Open Graph meta tags in your page's HTML, and when those tags are missing or wrong, your link shows up as a gray box with no image — or worse, someone else's image. If you want to see what your pages currently broadcast to social platforms, run them through our free Open Graph checker.
Open Graph started at Facebook in 2010 and has since become the shared language of link previews across almost every social platform and messaging app. In this guide we will walk through the essential tags, the Twitter card tags that sit alongside them, the image sizes that actually work, the mistakes that break previews, and how to debug them when something looks wrong.
Open Graph tags are <meta> tags in your page's <head> that describe the page as a shareable object: its title, description, image, URL, and type. When someone shares your link, the platform's crawler reads these tags and builds the preview card from them instead of guessing from your page content.
A minimal, correct set looks like this:
<meta property="og:title" content="Your Page Title Here">
<meta property="og:description" content="A one or two sentence summary of the page.">
<meta property="og:image" content="https://example.com/images/preview.jpg">
<meta property="og:url" content="https://example.com/your-page">
<meta property="og:type" content="website">Note the property attribute rather than name — that is what distinguishes Open Graph tags from ordinary meta tags. Get that wrong and the tags are silently ignored.
Every page you want shared well needs these five:
og:title — The headline of the preview. Keep it under about 60 characters; longer titles get truncated on most platforms. It can match your page title or be written separately for a social audience.og:description — One or two sentences, roughly 150 to 200 characters. This is your social ad copy: make it interesting enough to earn the click.og:image — The preview image. This single tag has more impact on click-through than everything else combined. Use an absolute URL (https://...), never a relative path, because the crawler fetches it from its own servers.og:url — The canonical URL of the page. This tells platforms that ?utm_source=twitter and the clean URL are the same object, so shares and like counts consolidate instead of splitting.og:type — The kind of content. website is the default; use article for blog posts and news, which unlocks extra tags like publish date and author.For articles, add the extras:
<meta property="og:type" content="article">
<meta property="article:published_time" content="2026-10-09T08:00:00+07:00">
<meta property="article:author" content="https://example.com/authors/jane">
<meta property="article:section" content="SEO Guides">X (Twitter) reads Open Graph tags as a fallback, but its own card tags give you finer control. The two you need:
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Page Title Here">
<meta name="twitter:description" content="A one or two sentence summary.">
<meta name="twitter:image" content="https://example.com/images/preview.jpg">The twitter:card value matters most. summary_large_image produces the big banner-style card that dominates the timeline; plain summary gives a small thumbnail on the side. For almost every content page, the large image card performs better. If you omit the Twitter-specific title, description, and image, X falls back to your og: equivalents, so many sites just set twitter:card and let Open Graph do the rest.
The preview image is where most implementations fail. Platform requirements differ slightly, but one size covers nearly everything:
/images/preview.jpg will not resolve for a crawler. Always https://yourdomain.com/images/preview.jpg.Design tip from people who test this constantly: images with a clear focal point and minimal text outperform busy collages. The preview is a billboard glimpsed for half a second, not a poster studied at leisure.
When a preview looks wrong, it is almost always one of these:
<meta name="og:title"> does nothing. It must be property="og:title".og:image. Crawlers typically take the first or last one unpredictably. Audit your head output and keep a single source of truth.Every major platform offers a debugging tool that shows you exactly what its crawler sees:
The debugging workflow is always the same: paste the URL, read what the crawler actually fetched (not what you think your HTML contains), fix the discrepancy, then force a re-scrape. When a preview looks right in the debugger but wrong in someone's chat app, the app has its own cache — WhatsApp and Telegram are notorious for this, and the only fix is time or a URL parameter change.
Before you publish your next article, run the URL through our Open Graph checker to confirm every required tag is present and the image resolves. It takes ten seconds and saves you from discovering a broken preview after the post has already been shared.
Open Graph tags are a small amount of HTML with an outsized effect on how your content travels. Set the five essential tags on every page, add Twitter card tags for X, use a 1200 × 630 image with an absolute URL, render everything server-side, and debug with the platform tools before you share. Your links will look intentional everywhere they appear, which is exactly what earns the click.
1200 × 630 pixels (a 1.91:1 ratio) is the recommended size for Facebook and LinkedIn and works well across most other platforms. Keep the file under 1 MB and always use an absolute URL.
The most common causes are a relative image URL, the image being blocked by robots.txt or hotlink protection, tags rendered by JavaScript that crawlers cannot execute, or a cached old preview that needs a forced re-scrape in the platform's debugger.
X falls back to Open Graph tags, so strictly you only need twitter:card set to summary_large_image. Adding the Twitter-specific title, description, and image tags gives you explicit control and avoids surprises.
Use the platform's debugger tool (Facebook Sharing Debugger, LinkedIn Post Inspector) and trigger a re-scrape. Messaging apps like WhatsApp and Telegram keep their own caches, which usually expire on their own within days.
