You publish a great article, paste the link into a chat, and the preview that appears is a gray box with no image and a title pulled from the wrong part of the page. Every marketer has lived this moment. Link previews are controlled by a small set of meta tags called Open Graph, and when they are missing or misconfigured, every share of your content looks broken. The good news: this is one of the easiest problems on the web to fix properly.
What Open Graph Is and Who Uses It
Open Graph is a meta tag protocol introduced by Facebook in 2010 that lets a page declare how it should appear when shared. Fifteen years later it has become the universal standard far beyond Facebook. LinkedIn, WhatsApp, Telegram, Slack, Discord, Reddit, iMessage and virtually every chat or social application read Open Graph tags to build the preview card. The X platform, formerly Twitter, reads its own twitter prefixed tags first and falls back to Open Graph when they are absent.
There is also a newer audience for these tags. AI assistants that summarize or cite a shared link frequently use the Open Graph title and description as the canonical short summary of the page. Clean OG tags now shape how your page is represented in AI conversations, not just in social feeds.
The Essential Tag Set
Six Open Graph tags plus a small Twitter Card block cover every platform that matters. Place them inside the head element of every page:
<meta property="og:title" content="Your Compelling Page Title">
<meta property="og:description" content="One or two sentences that make people want to click.">
<meta property="og:image" content="https://yoursite.com/images/share-card.jpg">
<meta property="og:url" content="https://yoursite.com/current-page">
<meta property="og:type" content="article">
<meta property="og:site_name" content="Your Brand">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Your Compelling Page Title">
<meta name="twitter:description" content="One or two sentences that make people want to click.">
<meta name="twitter:image" content="https://yoursite.com/images/share-card.jpg">Use the type value article for blog posts and website for other pages. Product pages can use product. Every value should be unique per page, a topic we cover more broadly in our complete meta tags guide.
Getting the Image Right
The image makes or breaks the preview, and platforms are picky about it.
Dimensions: The safe universal size is 1200 by 630 pixels, an aspect ratio of 1.91 to 1. Large image cards on every major platform render this size without cropping surprises. Keep critical text and logos away from the outer edges, some apps crop slightly.
File size and format: JPG or PNG under roughly 300 kilobytes loads fast for every scraper. Very large files can time out and silently produce a preview with no image at all.
Absolute URL over HTTPS: The og:image value must be a full absolute address starting with https. Relative paths like /images/card.jpg fail on many platforms because the scraper resolves them outside your page context.
Declare dimensions: Adding og:image:width and og:image:height tags lets platforms render the card correctly on the very first share, before they have downloaded the image.
The Five Classic Failures
1. The image is blocked from scrapers. Preview bots like facebookexternalhit and LinkedInBot must be able to download your image. A robots.txt rule blocking your images folder, hotlink protection, or an aggressive firewall rule produces a textbook symptom: correct title and description, missing picture. Our robots.txt guide shows how to audit access rules safely.
2. Tags are injected by JavaScript. Preview scrapers read the raw HTML and do not execute scripts. Single page applications that add meta tags on the client show blank or default previews everywhere. This is the same failure mode that makes JavaScript only sites invisible to AI, and the fix is the same: render the tags on the server.
3. Every page shares identical tags. A site wide template with one hardcoded og:title means every article you share displays the homepage title. Each URL needs its own tags generated from its own content.
4. Stale cache after changes. Platforms cache preview data aggressively, sometimes for weeks. Fixing your tags does not update previews for links that were already scraped until you force a refresh with the debugging tools below.
5. Redirect confusion. If og:url points to a URL that redirects, or your page has canonical and OG URLs that disagree, some platforms fetch tags from the wrong destination. Keep og:url identical to the canonical URL of the page.
How to Test and Refresh Previews
Facebook Sharing Debugger: Paste your URL, review exactly what the scraper sees, and press the scrape again button to purge the cache after any change.
LinkedIn Post Inspector: The same idea for LinkedIn, including a cache refresh on every inspection.
Chat apps: Telegram and WhatsApp refresh on their own schedule. Appending a temporary query string like ?v=2 to the shared link forces a fresh scrape while testing.
Automated audit: The CheckMy.site scanner validates the full social preview stack on your pages: presence of every essential Open Graph and Twitter Card tag, absolute image URLs, declared image dimensions and per page uniqueness, all inside a wider 158 point report.
A Note on Creating the Card Image
You do not need a designer for a solid share card. A 1200 by 630 canvas with your brand color, the article title in large readable type, and your logo in a corner outperforms most stock photos, because text on the card survives even when a platform renders it small. Sites with many articles often generate these cards automatically from a template, which guarantees every page has a unique, on brand preview.
Broken previews quietly cost clicks on every single share, and fixed previews keep paying back forever. Spend the thirty minutes, add the ten tags, verify with a scan, and every link you or your visitors share starts doing its job.