How to Create OG Images for Your Website
Open Graph images are the preview images that appear when your webpage is shared on Twitter, Facebook, LinkedIn, and other platforms. A good OG image can dramatically increase click-through rates. Here's how to create one in under 5 minutes.
In This Guide
1. What Are OG Images?
Open Graph (OG) images are preview images that social media platforms display when someone shares a link to your website. They're defined using the og:image meta tag in your HTML.
Without an OG image, platforms either show a generic screenshot of your page (often ugly) or nothing at all. With a well-designed OG image, your shared links stand out in feeds and get more clicks.
Where OG images appear:
- • Twitter/X — shown as large image cards
- • Facebook — preview cards in feeds and messages
- • LinkedIn — article preview cards
- • Slack, Discord, iMessage — link previews
- • Google search results — sometimes used in rich results
2. OG Image Size & Specs
| Spec | Recommended |
|---|---|
| Dimensions | 1200 x 630 pixels |
| Aspect Ratio | 1.91:1 |
| File Format | PNG or JPEG |
| Max File Size | 5 MB (under 1 MB preferred) |
| Safe Zone | Keep key text in center 80% area |
SnapOG generates images at the standard 1200x630 resolution, so you don't need to worry about sizing.
3. Create Your OG Image (Step-by-Step)
Choose a Template
Open SnapOG and browse the template gallery. There are 20+ professional templates covering gradients, patterns, minimalist, bold, and developer-focused styles. Click any template to select it.
Add Your Text
Enter your page title (keep it under 60 characters for readability), an optional subtitle, and author or brand name. Choose from three font families: Inter (clean sans-serif), JetBrains Mono (developer/tech), or Playfair Display (elegant serif).
Customize Colors & Background
Pick your brand colors using the color pickers. Choose a gradient direction or solid color. Add optional pattern overlays (dots, grid, diagonal lines, waves) for visual texture. Adjust pattern opacity to your taste.
Upload Your Logo (Optional)
Add your brand logo or icon. It will be placed in the corner of the image. Use a transparent PNG for best results.
Export & Download
Click the download button to save your OG image as PNG or JPEG. The image is generated at 1200x630 pixels — the standard OG image size. Upload it to your web server or CDN.
4. Add the OG Image to Your Website
After creating your image, add these meta tags to the <head> section of your HTML:
<!-- Open Graph -->
<meta property="og:image" content="https://yoursite.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:type" content="image/png">
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="Your page description">
<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://yoursite.com/og-image.png">Framework-specific examples:
Next.js (App Router):
export const metadata = {
openGraph: { images: ['/og-image.png'] },
twitter: { card: 'summary_large_image', images: ['/og-image.png'] }
}Astro:
<meta property="og:image" content={new URL('/og-image.png', Astro.url)} />Hugo:
{{ with .Params.ogimage }}
<meta property="og:image" content="{{ . | absURL }}">
{{ end }}5. OG Image Best Practices
DO
- ✓ Use large, readable text (40px+ at 1200x630)
- ✓ Keep key content in center 80% (edges may crop)
- ✓ Include your brand logo or name
- ✓ Use high contrast between text and background
- ✓ Create unique images for important pages
- ✓ Use absolute URLs for og:image
DON'T
- ✗ Use tiny text that's unreadable at small sizes
- ✗ Put important content at the edges
- ✗ Use a random screenshot of your page
- ✗ Use stock photos with no text overlay
- ✗ Forget to test on multiple platforms
- ✗ Use relative URLs (must be full https://)
6. Test Your OG Image
After adding the meta tags, verify your OG image displays correctly:
- 1. Facebook Sharing Debugger — Paste your URL to see how it looks on Facebook and clear cached images
- 2. Twitter Card Validator — Check how your link appears in tweets
- 3. LinkedIn Post Inspector — Preview your link's appearance on LinkedIn
- 4. Share on Slack/Discord — Paste your URL in a private channel to see the preview
Tip: Social platforms cache OG images. If you update your image, use the debugger tools above to force a refresh.
Frequently Asked Questions
<meta property="og:image" content="https://yoursite.com/og-image.png">. Upload the image to your web server and use the full absolute URL. See the code examples above for framework-specific implementations.Create Your OG Image Now
20+ templates, custom fonts, gradients, patterns. Free, no signup — designs stay in your browser.
Open SnapOG →