Open Graph Previewer & Meta Generator
Preview social card appearance for Twitter, LinkedIn, and Facebook. Lint character limits and generate clean HTML <meta> tags.
Private by architecture:
All processing is 100% client-side memory. Your data never leaves this browser tab.
Open Graph Metadata
0 / 60
0 / 155
Social Card Preview
HTML <meta> Tags
About This Tool
Open Graph Previewer simulates how your web pages appear when shared across social networks and messaging platforms including Twitter/X, LinkedIn, Facebook, Discord, and Slack.
Paste your raw <head> HTML or edit metadata fields interactively. The linter flags missing required image tags, relative image URLs, and text lengths that exceed platform truncation limits.
Key Features
- Dual Card Previews: Simulates both high-impact Large Summary Cards (Twitter/X, Facebook) and compact horizontal link cards (Slack, iMessage).
- Live Truncation Linter: Real-time character counters warn you before your titles exceed 60 characters or descriptions surpass 155 characters.
- Bidirectional HTML Sync: Paste full <head> HTML to extract existing tags, or adjust form fields to export production-ready <meta> code.
- Privacy-Preserving: Runs locally in your browser without tracking URL visits, fetching external domains, or logging previewed content.
Frequently Asked Questions
Why does my social share image fail on social networks?
Social crawlers require absolute URLs starting with https://. Relative paths like /images/og.png will fail to load on external crawlers.
What is the optimal aspect ratio and resolution for og:image?
The recommended standard is 1200 x 630 pixels (1.91:1 aspect ratio). This resolution renders crisply on high-DPI retina mobile screens.
What is the difference between summary and summary_large_image?
summary renders a small square thumbnail alongside the title, whereas summary_large_image displays a prominent wide banner above the text content.
