OG & Twitter Card PreviewBefore You Ever Hit Publish
See exactly how a link will look on Facebook, LinkedIn, and X before you share it. Import existing tags, check image dimensions, then copy clean meta tags straight into your site.
Facebook / LinkedIn preview
EXAMPLE.COM
Your page title
Your page description will show here.
X / Twitter preview
Your page title
Your page description will show here.
example.com
Checks you can inspect
- Add a title ; og:title and twitter:title both depend on it.
- Add a description ; cards often look empty or pull random page text without one.
- Add an image ; cards without one get far less engagement when shared.
- og:site_name is optional but helps your brand show up next to the preview on some platforms.
Resolve the errors above first.
Meta tags
<meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" />
Step-by-step
How to use the OG & Twitter Card Preview Generator
Six steps from a blank form to a published, verified card ; using the tool above.
1.Paste your page URL and import existing tags
Start with the live URL. Click "Import existing tags" and the tool pulls in whatever Open Graph and Twitter tags the page already has ; you're editing a real starting point instead of guessing from a blank form.
2.Write a clear title and description
Keep the title under about 70 characters and the description under about 200. Write for the person deciding whether to click, not for a crawler ; the character counters update as you type.
3.Add your image and check its real dimensions
Paste the image URL, then click "Check dimensions." The tool reads the image's own file header and reports its actual pixel size, so you confirm it's at least 1200×630px before you publish ; not after a platform silently drops the preview.
4.Compare both live previews
Look at the Facebook/LinkedIn card and the X/Twitter card side by side. They crop, truncate, and lay out differently ; a title that looks fine on one can get cut off on the other.
5.Copy the generated tags into your site's <head>
Copy the output block and paste it into your page template, CMS field, or hand it to whoever manages your theme. Every tag is generated from the values you just reviewed, so nothing is guessed.
6.Re-scrape with the platform's own debugger
After publishing, force a fresh scrape with Facebook's Sharing Debugger, X's Card Validator, or LinkedIn's Post Inspector. Platforms cache cards, so a link shared before your update can keep showing the old preview until you trigger a re-scrape.
Open Graph & Twitter Card best practices
- Use a 1.91:1 image ratio. 1200×630px is the standard size for summary_large_image cards. A near-square image gets cropped on most platforms.
- Keep titles under ~70 characters. Longer titles get truncated, usually mid-word, on Facebook, LinkedIn, and X alike.
- Lead your description with the point. Descriptions get cut off around 200 characters ; put the most important sentence first, not last.
- Set both og:* and twitter:* tags. X/Twitter reads twitter:* tags first and only falls back to Open Graph when they're missing. Setting both removes the guesswork.
- Use one canonical og:url per page. If the same content is reachable through multiple URLs (tracking parameters, trailing slashes), point og:url at the one you want engagement credited to.
Common mistakes to avoid
- Leaving og:image empty ; most platforms show no preview at all, not a text-only fallback.
- Using a relative image path (/images/cover.jpg) instead of a full https:// URL that crawlers outside your site can actually resolve.
- Assuming an updated page immediately shows an updated card ; re-scrape the URL with the platform's own debugger first.
Before you publish
Why cards look different per platform
Open Graph vs Twitter tags
X/Twitter reads its own twitter:* tags first and falls back to og:* tags when they're missing. This tool sets both, so a card looks intentional everywhere it's shared.
Platforms cache cards
Updating your tags doesn't update a card someone already shared. Use each platform's own debugger (Facebook Sharing Debugger, X Card Validator, LinkedIn Post Inspector) to force a re-scrape.
The preview here is illustrative
It mirrors each platform's general layout, not pixel-identical rendering ; line clamping, cropping, and card width all vary by app version. Treat it as a strong guide, then verify with the real debugger before anything high-stakes.
Questions and answers
OG & Twitter card generator FAQ
Can I review the results before using them?
Yes. Review the output and highlighted issues before making changes to your website.
How do I check the image for a social card?
Enter its public image URL and choose Check dimensions. Review the reported size and the card preview before publishing.
Why do I need both og:image and twitter:image?
X/Twitter checks its own twitter:* tags before falling back to Open Graph tags. Setting both means the card looks intentional on X as well as on Facebook, LinkedIn, Slack, Discord, and anywhere else that reads Open Graph.
I updated my tags but the old card still shows when I share the link
That's the platform's cache, not your tags. Use Facebook's Sharing Debugger, X's Card Validator, or LinkedIn's Post Inspector to force a re-scrape of the URL.