👁 OG Preview - Social Media Card Previewer

What is an OG Preview Tool?

Open Graph (OG) tags are special HTML meta tags that control how a URL appears when it is shared on social media platforms, messaging apps, and search engines. When someone pastes your link into Facebook, Twitter/X, LinkedIn, Discord, Slack, or iMessage, these platforms read the OG tags from your page and use them to build a visual link card. The card typically includes an image, title, description, and site name. Without proper OG tags, platforms either show a blank card or pull random content from your page, which can look unprofessional and hurt click-through rates.

This free OG Preview tool lets you enter your Open Graph tag values and instantly see realistic mockups of how your link card will appear across seven major platforms. You can fine-tune your title, description, and image before publishing, ensuring every share looks polished and intentional. Everything runs entirely in your browser with zero server calls, so your content stays private. No API keys, no CORS workarounds, no waiting for external servers to scrape your page.

How to Use This Tool

1. Fill in your OG tag values in the input form. At a minimum, enter a title, description, and image URL. Optionally set the site name, page URL, OG type, and Twitter card type.
2. Watch the live preview panels update in real time as you type. Each panel shows a realistic mockup of how your link card will look on Facebook, Twitter/X, LinkedIn, Discord, Slack, iMessage, and Google Search.
3. Use the dark/light preview toggle to check how your card looks in both theme modes, since many users browse in dark mode.
4. Use the quick presets (Blog Post, Product Page, Homepage, Article) to populate sample values and get started quickly.
5. Click "Generate Meta Tags" to produce ready-to-copy HTML meta tag code that you can paste directly into your page's head section.

Key Features

• Seven Platform Previews - See your link card on Facebook, Twitter/X, LinkedIn, Discord, Slack, iMessage, and Google Search all at once.
• Real-Time Updates - Previews update instantly as you type, with no need to click a button or wait for a page reload.
• Character Count Warnings - Get notified when your title exceeds 60 characters or your description exceeds 155 characters, which are the recommended limits for optimal display.
• Dark/Light Preview Toggle - Test how your card looks in both light mode and dark mode, covering how users on every theme preference will see your shared links.
• Meta Tag Generator - One-click generation of properly formatted HTML meta tags ready to paste into your website's head section.
• Quick Presets - Pre-built templates for common page types like Blog Post, Product, Homepage, and Article to speed up your workflow.
• 100% Client-Side - No server requests, no CORS issues, no data collection. Everything runs locally in your browser.

Frequently Asked Questions

What are Open Graph tags?

Open Graph tags are HTML meta elements that sit in the head section of a web page. They were originally created by Facebook to allow web pages to control how they appear when shared on the platform. Today, virtually every social network, messaging app, and search engine reads OG tags to build rich link previews. The most important tags are og:title, og:description, og:image, and og:url.

What is the ideal image size for OG tags?

Facebook recommends 1200 x 630 pixels for shared images. Twitter recommends the same size for summary_large_image cards and 120 x 120 pixels minimum for summary cards. LinkedIn works best with 1200 x 627 pixels. Using a 1200 x 630 image will produce good results across all platforms. Keep the file size under 5 MB and use JPG or PNG format for widest compatibility.

How long should my OG title and description be?

Keep your og:title under 60 characters and your og:description under 155 characters for best results. Different platforms truncate at different lengths, but these limits ensure your content displays fully across most services. This tool includes character count warnings so you can see at a glance if your text is too long.

Why does my shared link not show the updated preview?

Social platforms cache link previews aggressively. After updating your OG tags, you may need to clear the platform's cache. Facebook provides a Sharing Debugger tool, Twitter has a Card Validator, and LinkedIn offers a Post Inspector. Paste your URL into these tools to force the platform to re-scrape your page and pick up the new tags.

Do I need both OG tags and Twitter meta tags?

Twitter will fall back to OG tags if Twitter-specific tags are not present. However, including dedicated twitter:card, twitter:title, twitter:description, and twitter:image tags gives you more control over how your content appears on Twitter/X specifically. For example, you might want a summary_large_image card on Twitter but a different image crop for Facebook.

Is this tool safe to use with sensitive content?

Absolutely. This tool runs entirely in your browser. No data is sent to any server. Your titles, descriptions, and image URLs are never logged, stored, or transmitted. You can safely preview tags for pages that have not been published yet without worrying about leaking information.