On this page
A link preview that works needs four Open Graph tags in your page's head (og:title, og:description, og:image and og:url), plus twitter:card set to summary_large_image. The image should be 1200 by 630 pixels, served from an absolute HTTPS address, with the important text and logo kept away from the edges so nothing is cropped. Test the result with our free OG preview tool before you share the link anywhere.
Why link previews matter on launch day
On launch day your link is pasted into chats, posts, emails and comments. Each time, the app reads your page and builds a card: an image, a title and a short description. A sharp card makes people curious. A missing or broken one, such as a blank grey box or a random cropped screenshot, makes your product look unfinished, even if it is not.
The fix takes a few minutes, and it pays off every single time someone shares your site, long after the launch.
The tags you need
Put these in the head of every page you expect people to share, starting with your home page:
<meta property="og:title" content="Your product: what it does" />
<meta property="og:description" content="One or two sentences on who it is for and the result." />
<meta property="og:image" content="https://example.com/og/home.png" />
<meta property="og:url" content="https://example.com/" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />Notes on each tag
- og:title can match your page title. Keep it short enough to read in a card.
- og:description is usually your meta description. One clear sentence beats a list of features.
- og:image must be a full address starting with https, not a relative path like /og.png.
- og:url should be the canonical address of the page, the one you want shared.
- twitter:card set to summary_large_image asks X to show the big image card instead of a small thumbnail. X falls back to the Open Graph tags for the title, description and image.
You can also add og:image:width, og:image:height and og:image:alt. The size tags help some apps show the image on the first share, and the alt text describes the image to people using screen readers. Check that all of these are present with the meta tag checker.
Image size and format
| Setting | Recommendation |
|---|---|
| Size | 1200 by 630 pixels (an aspect ratio of about 1.91 to 1) |
| Format | PNG for text and flat graphics, JPEG for photos |
| File size | Keep it small, ideally a few hundred KB, so it loads quickly |
| Address | Absolute HTTPS URL that loads without a login or redirect chain |
| Safe area | Keep text and logo inside the centre, away from all four edges |
1200 by 630 is the size that the major apps handle well for large cards. Some apps crop the image to a different ratio or show it as a square thumbnail in certain places, which is why the safe area matters: if the key content is in the middle, it survives any crop.
Designing an image that reads at a glance
A link preview is often seen small, on a phone, while scrolling. Design for that.
- Few words, big type. Your product name and tagline, nothing more. Our guide on writing a product tagline helps with the line.
- Strong contrast. Dark text on a light background or the reverse. Avoid thin fonts.
- One visual. Your logo, or a cropped part of the product interface that shows its main job. A full screenshot with tiny text does not read.
- Consistent brand. Use the same colours and logo as your site so the card looks like it belongs.
- No important detail at the edges. Leave generous margins.
For blog posts or several product pages, a simple template with the page title on your brand background works well. Many sites generate these automatically for each page.
Common problems and fixes
The old image keeps showing
Apps cache previews, sometimes for a long time. If you change your image, give the new file a new name or add a version to the address, such as og-home-v2.png. Some platforms also offer an inspector tool that refetches the page; LinkedIn's Post Inspector is one example.
No image appears at all
Usually the image address is relative, blocked by robots.txt, behind a login, or returns an error. Open the image address in a private browser window to check, and test your robots file with the robots and sitemap checker.
The wrong title or description shows
Some sites set tags with JavaScript after the page loads. Many link preview bots do not run JavaScript, so they see the raw HTML. Make sure the tags are in the HTML your server sends.
The image is cropped badly
Check the size is 1200 by 630 and move key content to the centre.
Testing before you launch
- Paste your address into the OG preview tool and look at the card.
- Run the meta tag checker to confirm every tag is present and the lengths are sensible.
- Send the link to yourself in one or two chat apps you use and look at it on your phone.
- Do this a few days before launch, so caches have the right version when people start sharing.
The link preview is one item on the launch checklist, and it is worth doing early. When your preview looks right, your listing can go on the submit page.
Questions people ask
What is the best Open Graph image size?
1200 by 630 pixels is the standard choice. It works well for large cards on the major social and chat apps. Keep the important content in the centre, because some places crop the image or show a smaller version.
Do I need separate Twitter card tags?
You need twitter:card set to summary_large_image to get the large image card on X. For the title, description and image, X can read your Open Graph tags, so you do not have to repeat them unless you want different text there.
Why does my new image not show when I share the link?
The app has probably cached the old preview. Rename the image file or add a version to its address, update the og:image tag, and use the platform's inspector tool where one exists to refetch the page.
Should every page have its own image?
Your home page and the pages people share most should. For the rest, a single site wide image is fine, though a simple template with each page's title makes shared links clearer.
