The Open Graph tags that build a link preview
| Tag | What it controls |
|---|---|
og:title | The bold headline on the card. Keep it under about 60 characters. |
og:description | One or two lines under the title. Many platforms cut it short. |
og:image | The picture. A full https URL to a 1200 x 630 PNG or JPEG. |
og:url | The canonical address shares are counted against. |
twitter:card | Set to summary_large_image for the big image card on X. |
<meta property="og:title" content="Your product: one clear promise" /> <meta property="og:description" content="Who it is for and what it does." /> <meta property="og:image" content="https://yoursite.com/og.png" /> <meta property="og:url" content="https://yoursite.com/" /> <meta name="twitter:card" content="summary_large_image" />
What makes an OG image people click
- One idea, readable at thumbnail size. A card is often shown at a third of its real size in a feed. Large type, few words.
- The product, not just the logo. A screenshot of the result or the interface tells people what they will get.
- Safe margins. Keep text away from the edges. Some platforms crop to a square or round the corners.
- A different image per page. A pricing page, a blog post, and a launch announcement each deserve their own card.
Why previews break, and how to fix them
- Tags added by JavaScript. Most preview bots do not run JavaScript, so tags must be in the HTML the server sends.
- A relative image path. Write the full URL, including https://.
- An image the bot cannot load. Hotlink protection, login walls, and robots.txt rules can all block it.
- An old cache. After fixing tags, refresh the preview in each platform's debugger before you share again.
Check it before you launch
Your link will be shared on launch platforms, in communities, and in DMs within hours of going live, and a broken card is hard to fix once the first shares are cached. Run the checker on your homepage and your launch page, then give each place you share its own tracked link with the UTM builder.
Frequently asked questions
- What size should an OG image be?
- 1200 x 630 pixels, a 1.91 to 1 ratio, works across X, LinkedIn, Facebook, Slack, and iMessage. Keep it under 5 MB, use PNG or JPEG, and keep important text away from the edges, which some platforms crop.
- Why is my link preview not showing an image?
- The most common causes are a missing og:image tag, a relative image URL, an image that returns an error or is blocked for crawlers, an SVG file, or a platform still showing an old cached preview.
- How do I refresh a cached link preview?
- Platforms cache previews after the first share. Use the Facebook Sharing Debugger or the LinkedIn Post Inspector to fetch the page again. On X, changing the URL slightly, for example adding a query string, forces a new card.
- Do I need Twitter card tags if I have Open Graph tags?
- X reads Open Graph tags for the title, description, and image, but you still need twitter:card set to summary_large_image to get the large image card.
- Does the OG image affect SEO?
- Not directly. It affects how many people click when your link is shared on social networks, in chats, and on launch platforms, which is often the first impression of a product.