Open Graph & Twitter Card Tags: The Complete Guide to Social Previews
Understand with AI
Discuss with your preferred AI assistant
The 1.91:1 dimensions LinkedIn, Facebook, and X all render as a large card without cropping.
Characters before networks clip og:title on the card — keep headlines tight.
A complete card needs only a handful of og: and twitter: tags, not dozens.
When someone shares your page on LinkedIn, Facebook, X, Slack, or WhatsApp, the network doesn't show your link — it shows a card. That card's image, headline, and summary decide whether the link gets clicked or scrolled past. Open Graph and Twitter Card meta tags are what control exactly how that card looks.
This guide explains what these tags are, which ones actually matter, how to size your image, and how to ship them correctly so every share looks intentional instead of broken.
What Are Open Graph and Twitter Card Tags?
Open Graph (OG) is a protocol Facebook introduced so any page can declare how it should appear when shared. The tags live in the <head> of your HTML as <meta property="og:..."> elements. Almost every major platform — LinkedIn, Slack, WhatsApp, Discord, iMessage, Pinterest — reads them, which is why OG is the single most important social-preview standard.
Twitter Cards are X's own equivalent, declared with <meta name="twitter:..."> tags. X will fall back to Open Graph when a Twitter tag is missing, but adding both gives you precise control — most importantly the twitter:card type, which decides whether your image renders as a small thumbnail or a large banner.
The Tags That Actually Matter
You don't need dozens of tags. A complete, well-formed card needs only a handful:
- og:title — the headline on the card. Keep it under about 60 characters so it isn't clipped.
- og:description — the supporting line. Aim for under ~110 characters before truncation kicks in.
- og:image — an absolute URL to a 1200×630px image. This is the biggest driver of clicks.
- og:url — the canonical URL of the page being shared.
- og:type — usually website or article; also supports product, profile, and video.
- twitter:card — set to summary_large_image for a banner, or summary for a compact thumbnail.
- twitter:title, twitter:description, twitter:image — X-specific overrides mirroring the OG values.
Getting the Image Right
The image is what makes someone stop scrolling, so it deserves the most attention.
Use the recommended dimensions
1200×630px is the sweet spot — it satisfies the 1.91:1 ratio LinkedIn, Facebook, and X all use for large cards, and stays under platform file-size limits. Smaller images get upscaled and look soft; oddly-shaped ones get cropped unpredictably.
Always use an absolute URL
Crawlers fetch the image from outside your site, so a relative path like /og.png will fail to resolve. Use the full https:// address. The same applies to og:url.
Add descriptive alt text
Setting og:image:alt and twitter:image:alt improves accessibility for screen-reader users on the platforms that surface it, and it's a small, free win.
How to Add and Test Your Tags
1. Generate the tags
Enter your title, description, page URL, image URL, and content type into a generator like the one above. It produces a copy-ready block of og: and twitter: meta tags plus a live preview of the resulting card.
2. Paste them into the head
Drop the block inside the <head> of the page. In React or Next.js, set them through your metadata API or a head component rather than hardcoding raw HTML where possible.
3. Validate with the official debuggers
Use Facebook's Sharing Debugger, LinkedIn's Post Inspector, and X's Card Validator to confirm the card renders correctly. These tools also let you force a re-scrape, which is essential after you change tags.
4. Clear the cache after edits
Platforms aggressively cache the first version of your card. If you update an image or title and still see the old preview, re-scrape the URL in the relevant debugger to refresh it.
Open Graph Best Practices
- Write the title and description for the click, not for SEO keyword stuffing — this is ad copy, not a meta description.
- Keep one canonical image per page and make sure it loads fast and publicly (no auth wall).
- Match twitter:title to og:title unless you have a reason to phrase it differently for X.
- Re-validate any time you change the URL, title, or image — never assume the cache updated itself.
Common Mistakes to Avoid
- Using a relative image path that crawlers can't fetch.
- Shipping no og:image at all — text-only cards get far fewer clicks.
- Letting the title run long so it truncates mid-sentence on the card.
- Forgetting to re-scrape, then assuming the tags are broken when they're just cached.
Expert Tips
Always use an absolute image URL
Crawlers fetch og:image from outside your site, so a relative path like /og.png fails silently. Use the full https:// address and confirm the image loads publicly.
Re-scrape after every change
Platforms cache your first card aggressively. After editing tags, force a re-scrape in Facebook’s Sharing Debugger, LinkedIn’s Post Inspector, or X’s Card Validator to see the update.
Frequently Asked Questions
What is the difference between Open Graph and Twitter Card tags?
Open Graph tags (og:) are read by most platforms including Facebook, LinkedIn, Slack, and WhatsApp. Twitter Card tags (twitter:) are X-specific. X falls back to OG when a Twitter tag is missing, but adding both gives you precise control — especially over the card size via twitter:card.
What image size should I use for Open Graph?
Use 1200×630px (a 1.91:1 ratio). It renders cleanly as a large card on Facebook, LinkedIn, and X without cropping or upscaling, and stays within platform file-size limits. Always reference it with an absolute https:// URL.
Why is my social preview not updating?
Social platforms cache the first version of your card aggressively. After changing your tags, paste the URL into Facebook's Sharing Debugger, LinkedIn's Post Inspector, or X's Card Validator and force a re-scrape to refresh the cached preview.
Do Open Graph tags affect SEO rankings?
Not directly — Google doesn't rank pages higher for having OG tags. But better-looking cards earn more clicks and shares, which drives traffic and engagement signals that can support your overall SEO indirectly.