Designing Open Graph Social Cards: Image Dimensions, Debugging, and Tags

When links to your site are shared on Slack, X (Twitter), LinkedIn, or Discord, rich preview cards dictate click-through rates. Properly formatted Open Graph tags and high-resolution images are essential.

Generate and validate your social metadata:

• Create 1200x630 social banners with the OG Image Generator
• Inspect live URLs and meta tags with the Open Graph Debugger
• Verify Twitter Card compliance with the Twitter Card Validator

Essential Open Graph & Twitter Meta Tags

<!-- Standard Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:url" content="https://example.com/blog/my-post" />
<meta property="og:title" content="My Post Title" />
<meta property="og:description" content="A short, compelling summary of the article." />
<meta property="og:image" content="https://example.com/og/my-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />

<!-- Twitter / X Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="My Post Title" />
<meta name="twitter:description" content="A short summary of the article." />
<meta name="twitter:image" content="https://example.com/og/my-post.png" />

Recommended Image Guidelines

• Dimensions: Exactly 1200 x 630 pixels (1.91:1 aspect ratio).
• Safe Zone: Keep text and logos centered within the inner 80% to avoid cropping on mobile feeds.
• File Size: Under 2MB (PNG or WebP format).