The Essential Open Graph Meta Tags Every Page Needs
1. og:title: The bold headline displayed on the social preview card (optimal length: 40 to 60 characters).
2. og:description: A concise 1-2 sentence hook summarizing the article (under 160 characters).
3. og:image: The high-resolution preview image. The industry standard resolution is 1200x630 pixels (1.91:1 aspect ratio) for crisp display on high-DPI displays.
4. twitter:card: Set to 'summary_large_image' to ensure Twitter/X displays a full-bleed banner rather than a tiny square thumbnail.
Common Open Graph Pitfalls: Caching and Relative URLs
A widespread bug among frontend developers is supplying relative paths like '/og-image.png' instead of fully-qualified absolute URLs ('https://example.com/og-image.png'). External social crawlers cannot resolve relative paths.
Furthermore, platforms like LinkedIn and Facebook aggressively cache OG images for weeks. If you update your thumbnail, you must verify the new image URL is reflected.
Step-by-Step Tutorial
Input Page Metadata
Enter your page title, description, website URL, and image link into the previewer.
Simulate Across Social Networks
Review real-time live preview cards for Twitter/X, Facebook, LinkedIn, and iMessage.
Copy Production HTML Tags
Copy clean, verified <meta property='og:...'> tags directly into your site layout head.
Ready to Try It Yourself?
DocSwift processes everything directly on your device. Fast, safe, and completely free forever.
How helpful was this guide?
Rated 4.9 / 5 by 3,420+ users worldwide
Share with Colleagues & Friends
Help others protect their document privacy
Frequently Asked Questions
What is the best image format for Open Graph tags?
PNG or WebP images saved under 1MB are ideal. JPEG is also widely supported for photographic graphics.
Why does my preview card show up blank on WhatsApp?
WhatsApp requires images to be under 300KB and strictly over HTTPS with valid SSL certificates.