Every link preview on Twitter, Slack, LinkedIn, or WhatsApp is driven by Open Graph (OG) meta tags. If you've ever seen a link card with a broken image or a generic "Untitled" title, missing OG tags are usually the reason.
Here's everything you need to know to get them right.
The Four Essential Tags
``html
`
og:title — The headline. Keep it under 60 characters.og:description — The teaser text. Aim for 100–155 characters.og:image — The preview image. Must be 1200×630 px, HTTPS, publicly accessible.og:url — The canonical URL for deduplication across shares.
Also Add These
`
html
`
Use og:type
value article
for blog posts and news content; website
for everything else.
Twitter Card Tags
Twitter/X reads its own namespace. It falls back to OG tags, but explicit tags give you control over the card type:
`
html
`
summary_large_image
shows a full-width image above the title — best for most content pages. summary
shows a small square thumbnail — better for brand or tool pages.
Common Mistakes
Relative image URL — og:image
needs a full absolute URL: https://yoursite.com/image.png
, not /image.png
.Image behind authentication — Social crawlers can't log in. The image must be publicly accessible.Wrong image size — Use 1200×630. Other sizes work but may be cropped or padded differently per platform.Forgetting to clear platform cache — After updating tags, use Facebook's Sharing Debugger or LinkedIn's Post Inspector to force a refresh.
Testing Your Tags
Use these official tools to verify your setup before publishing:
Facebook Sharing Debugger: developers.facebook.com/tools/debug/
Twitter Card Validator: cards-dev.twitter.com/validator
LinkedIn Post Inspector: linkedin.com/post-inspector/`
Or generate and preview your tags locally before your page goes live using the free OG Meta Tag Generator — paste in your details and see live previews for all three platforms side by side.
OG tags take five minutes to add and have a direct impact on click-through rate from social shares. It's one of the highest-return small tasks in web development.
Originally published at https://snappytools.app/og-meta-tag-generator/