Open Graph Preview Tool

You set your og:image to a 2400x1260 JPEG but Discord crops it into a square, Twitter shows a tiny thumbnail, and LinkedIn stretches it weirdly. Each platform has different aspect ratio requirements and card styles. You need to see how your Open Graph tags will actually render on Facebook, Twitter/X, LinkedIn, and Discord — before you deploy.

Why This Preview (Not the OG Meta Tag Generator)

PureDevTools has an OG Meta Tag Generator for generating the HTML tags and a Meta Tag Generator for the full meta stack. This tool previews how your tags render on each social platform — enter your og:title, og:description, og:image, and twitter:card values, and see live mock-ups of the share cards. Use the generators to create the tags; use this preview to verify they look right.

What Is Open Graph?

Open Graph (OG) is a protocol developed by Facebook in 2010 that enables any web page to become a rich object in a social media share. When you paste a URL into Facebook, Twitter, LinkedIn, Discord, Slack, or iMessage, the platform fetches the page’s HTML and reads <meta property="og:..."> tags to build a visual preview card — also called a “link unfurl” or “social share card.”

Without Open Graph tags, platforms generate a generic, text-only link that is far less likely to be clicked. A well-crafted OG image with a clear title and description can increase click-through rates by 40–80% compared to a bare URL.

Core Open Graph Properties

og:title

The title displayed prominently at the top of the share card. Facebook truncates at approximately 95 characters. This should match or closely relate to the <title> tag but can be customized for social context — often omitting the site name that is already shown separately.

<meta property="og:title" content="How to Build a REST API in Node.js">

og:description

A one-to-three sentence summary shown below the title. Aim for 100–200 characters. Most platforms truncate descriptions longer than 200 characters. Frontload the most compelling information since descriptions are often cut off.

<meta property="og:description" content="Step-by-step guide to building a production-ready REST API with Express, JWT authentication, and rate limiting.">

og:image

The image that appears in the share card. This is the single most important OG property — it drives visual recognition in a crowded feed. Critical requirements:

• Protocol: Must be https:// — many platforms reject insecure images
• Dimensions: 1200×630 px (1.91:1 ratio) is the universal standard
• File size: Under 8 MB; under 1 MB is preferable for fast load
• Format: JPG or PNG; WebP is widely supported but PNG is safest for text-heavy images
• Content: Clear brand element, readable text at small sizes, high contrast

<meta property="og:image" content="https://example.com/og/my-article.png">

og:url

The canonical URL for the content. Platforms use this to deduplicate shares — multiple URLs that share the same og:url are treated as the same piece of content, and social engagement (likes, shares) is aggregated rather than split.

<meta property="og:url" content="https://example.com/articles/rest-api-guide">

og:type

Describes the type of content. The default is website. Use article for blog posts and news, product for e-commerce items, video.movie for films, and music.song for tracks. The type affects which additional OG properties are valid (e.g., article:published_time only applies when og:type is article).

<meta property="og:type" content="article">

og:site_name

The name of your website or application. Displayed on Facebook below the domain and on LinkedIn below the title. Keeps branding consistent even if the page title does not mention the site name.

<meta property="og:site_name" content="My Developer Blog">

Twitter / X Card Tags

Twitter uses its own twitter: namespace for share cards. If Twitter-specific tags are absent, it falls back to the corresponding og: tags — so specifying og:title, og:description, and og:image is often sufficient.

twitter:card

Controls the card layout:

summary_large_image is strongly preferred for blog posts, articles, and landing pages because it dominates the feed visually.

<meta name="twitter:card" content="summary_large_image">

twitter:title / twitter:description / twitter:image

Override the corresponding og: values specifically for Twitter. Useful when you want a shorter title or a different crop of the image optimized for Twitter’s 2:1 display ratio.

<meta name="twitter:title" content="Build a REST API — 10 min guide">
<meta name="twitter:description" content="Express, JWT auth, rate limiting. Copy-paste ready.">
<meta name="twitter:image" content="https://example.com/og/rest-api-twitter.png">

Platform-Specific Behavior

Facebook

• Reads og: tags
• Caches OG data aggressively — use the Facebook Sharing Debugger to force a refresh after updating tags
• Image is displayed above the text block
• Domain is shown in uppercase below the image

Twitter / X

• Reads twitter: tags first, falls back to og: tags
• summary_large_image produces a card with 2:1 image ratio
• The image must be publicly accessible (no auth, no paywalls)
• Cards must be validated in the Twitter Card Validator before they activate on new domains

LinkedIn

• Reads og: tags
• Caches OG data with a 7-day TTL — use the LinkedIn Post Inspector to force a refresh
• Recommended image: 1200×627 px

Discord

• Reads og: tags
• Shows an embed with the site name, title, description, and thumbnail image
• No cache invalidation tool available — Discord re-fetches on each new paste in some cases

iMessage / SMS

• Reads og:image, og:title, and og:description
• Requires valid HTTPS image URL with proper content-type headers

OG Image Design Best Practices

Dimensions: 1200×630 px is the safe universal size. It works across all major platforms. The Twitter summary_large_image variant uses a 2:1 ratio (crop to center).

Text: Use large, bold text at 48–72 px minimum. Margins of at least 50 px on all sides prevent clipping. Maximum 2–3 lines of text.

Brand consistency: Include your logo or brand colors. Consistent OG images make your links recognizable in a feed.

Generation tools: Generate OG images programmatically using HTML/CSS-to-image services, Puppeteer, or design tools with batch export. For static sites, Astro supports generating OG images at build time using the @astrojs/og-image package.

A/B testing: Different OG images can significantly affect click-through rates. Use UTM parameters and link analytics to measure which images perform best.

Troubleshooting Share Cards

Card not showing? Platform crawlers may not have fetched the page yet, or a previous (empty) version is cached. Use the platform’s debug tool to force a re-scrape.

Old card still showing? OG data is cached. Facebook caches for up to 30 days. Use the Facebook Sharing Debugger’s “Scrape Again” button.

Image not loading in card? Check that the image URL uses https://, is publicly accessible, has correct Content-Type headers, and is under 8 MB.

Title or description cut off? Keep og:title under 95 characters and og:description under 200 characters.

Frequently Asked Questions

Do I need both og: and twitter: tags? Not always. Twitter falls back to og: tags if twitter: tags are absent. Add twitter: tags only when you need Twitter-specific values (different crop, shorter copy, or to ensure twitter:card type is correct).

What happens if og:image is missing? Platforms fall back to the first image found on the page, or generate a generic text-only link preview. This is significantly less engaging. Always set og:image.

How do I test my Open Graph tags? Enter your URL and field values in this tool to see live preview mockups. For live URLs, use the official debuggers: Facebook Sharing Debugger, Twitter Card Validator, and LinkedIn Post Inspector.

Can I use different images for different platforms? Yes. Set og:image for Facebook/LinkedIn/Discord and set twitter:image to a different URL for Twitter. This allows you to serve an image optimized for each platform’s aspect ratio.

Does the og:description affect SEO? No. The og:description property does not influence search engine rankings. It is solely for social sharing. For SEO, use the standard <meta name="description"> tag.

Does this tool send my data anywhere? No. All preview generation and validation happens entirely in your browser using JavaScript. Nothing is sent to any server.