OG Meta Tag Previewer — See Your Social Share Cards Before You Publish
Live Twitter, LinkedIn, and Facebook link previews — no guessing, no re-publishing
Broken or truncated social share previews are one of the most common and avoidable publishing mistakes. A title that looks perfect in HTML might be cut off at 55 characters on Twitter or show a placeholder image on LinkedIn because the og:image URL has a typo. This Open Graph previewer shows you the exact rendered card for Twitter/X (large image summary), LinkedIn, and Facebook — updating live as you type. Fill in your title, description, image URL, site name, and page URL, then check all three cards for truncation, missing images, and layout issues. When everything looks right, copy the generated og: and twitter: meta tag block and paste it directly into your HTML head.
How to Preview and Fix Your Open Graph Tags
Fill in your page metadata and catch card issues before publishing.
Enter your page metadata
Fill in the five fields: Title (the headline shown in the card, ideally 50-60 characters), Description (the supporting text shown under the title, ideally under 160 characters), Image URL (a publicly accessible HTTPS link to your share image, recommended size 1200x630 pixels), Site Name (your brand or domain name), and Page URL. Each field maps directly to an og: meta tag.
Review all three social cards
The right column shows three live preview cards. The Twitter/X card uses the summary_large_image format with the image displayed above the title. The LinkedIn card shows the image to the left of the text. The Facebook card mirrors the LinkedIn layout. Check each card for text truncation, missing images, and visual layout. If the title is being cut off, shorten it until it fits.
Copy and paste the generated tags
Scroll to the Generated meta tags panel below the previews. It shows a complete, ready-to-use HTML block including og:title, og:description, og:image, og:url, og:site_name, twitter:card, twitter:title, twitter:description, and twitter:image. Copy the block and paste it inside the head element of your HTML or into your CMS head tag field.
Features
Live preview cards for Twitter/X, LinkedIn, and Facebook
Updates on every keystroke — no save or submit required
Detects title and description length issues visually
og: and twitter: meta tag code generated automatically
Image preview with graceful fallback placeholder
Copy-ready HTML block with all required tags
Works with any publicly accessible HTTPS image URL
Runs entirely in your browser — your content stays private
Related Tools
Frequently Asked Questions
What is an Open Graph meta tag?
Open Graph (OG) tags are HTML meta tags in your page head that control how your content appears when shared on social media platforms. Originally created by Facebook, they are now the universal standard used by Twitter, LinkedIn, WhatsApp, Slack, and most other platforms to generate link preview cards.
What is the correct size for an OG image?
The recommended size is 1200x630 pixels with a 1.91:1 aspect ratio. This renders sharply on all platforms. Twitter requires at least 300x157 pixels for large image cards. Images smaller than 200x200 pixels may be ignored by some platforms and fall back to a default placeholder.
Why is my OG image not showing in previews?
The most common causes are: the image URL is not publicly accessible (e.g. it requires authentication or is on localhost), the URL uses HTTP instead of HTTPS, the image file is too small, or the og:image tag is missing entirely. Use this tool with your actual public image URL to confirm it loads correctly in the preview.
Do I need twitter: tags if I already have og: tags?
Twitter will fall back to og: tags if twitter: tags are absent, so technically no — but adding explicit twitter:card, twitter:title, twitter:description, and twitter:image tags gives you more control. In particular, you must include twitter:card with the value summary_large_image to get the large image format instead of a small thumbnail.
How do I debug OG tags on a live site?
After deploying your og: tags, you can use the official debuggers: the Facebook Sharing Debugger (developers.facebook.com/tools/debug), the Twitter Card Validator (cards-dev.twitter.com/validator), and LinkedIn Post Inspector (linkedin.com/post-inspector). These tools also clear the cached preview for your URL.