When a URL is shared on Facebook, LinkedIn, WhatsApp, Slack or Twitter/X, the platform shows a preview — a card with an image, title and description. Without Open Graph tags, the platform guesses what to show, often picking the wrong image or showing a bare link with no image at all. Open Graph tags put you in control.
The Core Tags
``html <meta property="og:title" content="Page Title Here"> <meta property="og:description" content="A short description of this specific page."> <meta property="og:image" content="https://yourdomain.com/images/page-image.jpg"> <meta property="og:url" content="https://yourdomain.com/this-page"> <meta property="og:type" content="website"> ``
These four og: tags are what every shared link preview is built from. Twitter/X has its own equivalent (Twitter Card tags) but will fall back to Open Graph if Twitter tags are absent.
Generating Open Graph Tags
- Open Open Graph Generator.
- Fill in the title, description, image URL and page URL.
- Copy the generated meta tags.
- Paste them into the page's
<head>.
The Image: What Works
The Open Graph image is the most visible element in a shared link. Recommendations:
- Dimensions: 1200×630 pixels is the widely used standard.
- Format: JPG or PNG.
- File size: keep under 300 KB — large images load slowly in previews.
- Content: should relate to the page's topic; generic site images work poorly.
- Text on image: if included, keep it large and legible — the image appears small on mobile.
Testing the Preview
Facebook has a debugger at developers.facebook.com/tools/debug/ that shows how any URL will appear when shared and forces Facebook to refresh its cached version. LinkedIn has linkedin.com/post-inspector/. For Twitter/X, the Card Validator in its developer tools does the same.
After changing Open Graph tags, the social network's cache may still show the old version for a while — use these debuggers to force an update.
Why Every Page Needs Its Own Image
A shared link showing the homepage image when the page is about a specific tool or article looks lazy. More importantly, a relevant image gets more engagement. Set per-page Open Graph images in your CMS or templating system where possible. For why previews sometimes show the wrong image, see why your link preview shows the wrong image.
Updating Previews After Changing Tags
Social platforms cache Open Graph data when they first encounter a URL. After changing your tags, the cached version persists until the platform re-crawls or you force a refresh through a debugging tool. Facebook's Sharing Debugger at developers.facebook.com/tools/debug/ forces an immediate re-crawl. LinkedIn's Post Inspector does the same. For Twitter/X, the Card Validator refreshes the preview. Without using these tools, a changed image may take hours or days to appear in shares. For the specific case of a preview showing the wrong image, the causes and platform-specific fixes are in why your link preview shows the wrong image.
