Free SEO Tool · Instant Social Card Preview
Open Graph Preview
Enter your Open Graph tag values to instantly preview how your page will appear when shared on Facebook, Twitter/X, LinkedIn, Discord and Slack. See character limit warnings, OG health score and copy-ready meta tag HTML.
How to Use the Open Graph Preview Tool
The preview updates in real time as you type. Furthermore, no URL is fetched — the entire tool runs in your browser, so your data stays private and results are instant.
- Enter your og:titleType the page title in the og:title field. Furthermore, the colour-coded character bar shows green under 50 characters, amber from 50 to 60, and red over 60 — the point at which most platforms truncate the title with an ellipsis.
- Enter og:descriptionWrite a summary between 120 and 160 characters. Furthermore, shorter descriptions look sparse in social cards. Longer ones get cut off, which can interrupt your call to action at a critical moment.
- Paste the og:image URLEnter the full HTTPS URL of your social share image. Furthermore, the tool loads the image live in every platform card. The recommended size is 1200×630 pixels at a 1.91:1 aspect ratio, which displays without cropping on Facebook, LinkedIn, Discord and Slack.
- Switch between platform tabsClick Facebook, Twitter Large, Twitter Summary, LinkedIn, Discord or Slack to see a realistic card mockup for each. Furthermore, each tab shows platform-specific character limit warnings for the title and description.
- Copy the meta tag HTMLClick "Copy HTML meta tags" to get a complete, correctly formatted block of Open Graph and Twitter Card meta tags. Furthermore, paste it directly into the head element of your HTML page or CMS template — no editing required.
What Are Open Graph Tags?
Open Graph (OG) tags are HTML meta elements placed in the head section of a web page. They define the title, description, image and URL that appear in social media card previews. Furthermore, they were originally introduced by Facebook in 2010 and have since been adopted by virtually every major social platform.
Without OG tags, social platforms guess what to display. Facebook might pull a random image from the page. LinkedIn might show an ugly thumbnail from an advertisement. Furthermore, Twitter might display just a plain URL with no preview at all. Well-crafted OG tags give you full control over that first impression.
The four most important OG tags are og:title, og:description, og:image and og:url. Furthermore, two additional tags — og:type and og:site_name — add important context that some platforms use to adjust how the card is displayed. Additionally, twitter:card is a Twitter-specific tag that controls whether Twitter shows a large or small image card.
Required vs Optional OG Tags — What to Always Set
Not every Open Graph tag is equally important. Furthermore, setting the four core tags correctly is all most pages need. The optional tags provide additional context for specific content types and platforms.
Required — set on every page
og:title — The page title. Keep under 60 characters. Furthermore, this is the most prominent element of the social card. og:description — A summary of 120 to 160 characters. og:image — Full HTTPS URL to your 1200×630 image. og:url — The canonical URL of the page.
Recommended — set for completeness
og:type — Content type: website, article, product or video.other. Furthermore, this enables type-specific features on some platforms. og:site_name — Your brand name. Displayed in Facebook and Discord cards. twitter:card — Use summary_large_image for content pages with compelling images.
Platform-Specific OG Tag Behaviour
Each social platform reads the same OG tags but applies different character limits, image ratios and rendering rules. Furthermore, what looks perfect on Facebook may be cropped or truncated on Twitter. This is why previewing across all platforms before publishing is essential.
| Platform | Title limit | Description limit | Image ratio | Minimum image |
|---|---|---|---|---|
| ~60 chars | ~150 chars | 1.91:1 | 600×315px | |
| Twitter/X (large card) | ~70 chars | ~200 chars | 2:1 | 600×335px |
| Twitter/X (summary) | ~70 chars | ~200 chars | 1:1 crop | 144×144px |
| ~70 chars | ~150 chars | 1.91:1 | 1200×627px (hard min) | |
| Discord | Full title | ~200 chars | 1.91:1 | 400×300px |
| Slack | ~70 chars | ~150 chars | 1.91:1 | 400×400px |
LinkedIn's minimum image requirement is the strictest of all major platforms. Furthermore, if your og:image is smaller than 1200×627 pixels, LinkedIn will not show any image — the link renders as text only. This is a common and frustrating mistake that affects many pages, particularly those using older or smaller featured images.
Open Graph Image — Size, Format and Safe Zone
The Open Graph image is the single most impactful element of a social card. Furthermore, choosing the right dimensions, format and composition makes the difference between a scroll-stopping card and a broken preview.
The universal recommended size is 1200×630 pixels at a 1.91:1 aspect ratio. Furthermore, this works on Facebook, LinkedIn, Discord, Slack and most other platforms without any cropping. Twitter/X uses a 2:1 ratio for large cards, so 1200×600 is ideal if Twitter is your primary platform.
File format
Use JPG or WebP for photographs. PNG works well for text-heavy designs with transparency. Furthermore, avoid GIF — it will show as a static frame. Always serve the image over HTTPS. Relative paths (/images/og.jpg) cause crawlers to fail.
File size
Keep the image under 1MB. Furthermore, LinkedIn and Slack impose file size limits. WhatsApp compresses images aggressively, so a source under 300KB is ideal for that platform. Large files slow down crawling and delay preview generation.
Safe zone
Platforms crop images slightly differently. Keep all critical content — text, logos, faces — within a central safe zone of roughly 1080×565 pixels. Furthermore, this provides approximately 60 pixels of breathing room on each side against unexpected edge cropping.
Twitter Card Tags vs Open Graph Tags
Twitter reads OG tags as a fallback, but its own twitter:card tags take precedence when present. Furthermore, the most important Twitter-specific tag is twitter:card, which controls whether a large or small image card is shown.
Setting twitter:card to "summary_large_image" displays a full-width image above the link text. Furthermore, this card type receives significantly more engagement than the small summary card. The summary card, by contrast, shows a small square thumbnail alongside the text — it is used when images are not the primary content signal.
summary_large_image
Full-width card with a 2:1 image above the title and description. Furthermore, this is the recommended type for most content pages — blog posts, landing pages, product pages. Requires the image to be at least 600×335 pixels. Twitter falls back to OG tags if twitter:title and twitter:image are absent.
summary (small card)
A small square thumbnail cropped from the center of the og:image, aligned left alongside the title and description. Furthermore, use this for content where the image is less important than the text — reference pages, tool pages or documentation. It is also the default when twitter:card is not set.
Why OG Tags Affect Click-Through Rate and Indirect SEO
Open Graph tags do not directly affect search engine rankings. Furthermore, they have a significant indirect impact through their effect on social sharing, click-through rate and traffic volume — all of which are signals that search engines consider.
A well-crafted OG card acts as a paid-ad-quality impression in your social feed — except it is free. Furthermore, when someone shares your content, their followers see your optimised card in their feed. A compelling title and striking image encourage clicks that a bare URL would never generate.
Broken or missing OG tags have the opposite effect. Furthermore, a missing image produces a text-only link that most users scroll past. A truncated title loses the second half of a carefully crafted headline. Additionally, a mismatched image — where the platform pulls a random header image or advertisement — undermines trust and discourages clicks.
Common Open Graph Mistakes and How to Fix Them
Most OG tag problems fall into a small set of recurring patterns. Furthermore, checking your pages through a preview tool before launch catches all of them before they affect real traffic.
Relative image URL
Using /images/social.jpg instead of https://example.com/images/social.jpg. Furthermore, social crawlers do not resolve relative paths. Always use the full absolute HTTPS URL in og:image.
Image too small for LinkedIn
LinkedIn requires a minimum of 1200×627 pixels for a visible image. Furthermore, anything smaller results in a text-only preview, which dramatically reduces click-through rate. This affects pages using small thumbnails or legacy featured images.
Stale cache on social platforms
After fixing OG tags, platforms may still show the old card from their cache. Furthermore, use Facebook's Sharing Debugger, LinkedIn's Post Inspector, or Twitter's Card Validator to force a cache refresh and verify the new card.
Duplicate og:image tags
Some CMS platforms, plugins or themes generate multiple og:image tags. Furthermore, the first tag usually wins, but behaviour varies. Always audit the page head for duplicates using browser DevTools or a meta tag inspection tool.
Frequently Asked Questions
References and Sources
The platform specifications, character limits, image dimensions and technical recommendations on this page draw from the following authoritative sources. Furthermore, platform specifications change periodically — always verify against official documentation before a major launch.
Related SEO and Web Tools
Meta Tag Generator
Generate complete HTML meta tags for SEO. Furthermore, covers title, description, robots, canonical and viewport tags in one step.
→Keyword Density Checker
Analyse keyword frequency in any text. Additionally, paste your og:description to check keyword balance before publishing.
→Character Counter
Count characters, words and sentences. Furthermore, useful for crafting titles and descriptions that fit exactly within OG and Twitter limits.
→URL Encoder / Decoder
Encode and decode URLs for safe use in og:url and og:image values. Moreover, special characters in URLs must be encoded to parse correctly.
→HTML Formatter
Format and validate HTML. Furthermore, useful for checking the head section structure after pasting your generated Open Graph meta tags.
→Image Resizer
Resize images to exact pixel dimensions in the browser. Additionally, use it to create a 1200×630 OG image from an existing photo or design export.
→