Web DevelopmentSEOTips & Tricks

How to Create Open Graph Images for Social Media Sharing

December 8, 2025 6 min read 1 views

When someone shares your link on social media, the preview image determines whether people click. This guide covers how to create, size, optimize, and host Open Graph images that maximize engagement across every platform.

Quick Takeaways

•What Are Open Graph Images?
•Dimensions by Platform
•Creating OG Images: Design Tools
•Canva (Easiest)

You spend hours crafting the perfect blog post, ship a new product feature, or publish an important page. Someone shares it on Twitter. What does the world see? Either a compelling, branded preview card that demands attention — or a sad, empty box with no image, or worse, a random cropped image that makes no sense out of context.

Open Graph (OG) images control what appears in those social media preview cards. They're arguably the most important single element determining whether a shared link gets clicked or ignored.

What Are Open Graph Images?

Open Graph is a protocol (originally created by Facebook) that lets you control how your pages appear when shared on social platforms. The OG image meta tag specifies the preview image:

<head>
  <meta property="og:image" content="https://imglink.cc/image/your-og-image.jpg">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Blog post title - Your Site">
  <meta property="og:title" content="Your Page Title">
  <meta property="og:description" content="A compelling description...">
  
  <!-- Twitter-specific (optional, falls back to og:image) -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://imglink.cc/image/your-og-image.jpg">
</head>

Dimensions by Platform

Platform	Recommended Size	Aspect Ratio	Notes
Facebook	1200 × 630	1.91:1	Standard recommendation
Twitter/X	1200 × 628 (or 1200 × 675)	~1.91:1	summary_large_image card
LinkedIn	1200 × 627	1.91:1	Consistent with Facebook
Discord	1200 × 630	1.91:1	Matches standard
Slack	1200 × 630	1.91:1	Matches standard
iMessage	1200 × 630	1.91:1	Rich link preview
WhatsApp	1200 × 630	1.91:1	May crop vertically

The universal standard: Create your OG images at 1200 × 630 pixels. This works well across all major platforms. It's the defacto standard the industry has settled on.

Creating OG Images: Design Tools

Canva (Easiest)

Open Canva and create a custom design: 1200 × 630 pixels
Choose a template or start from scratch
Add your page title as large, readable text
Add your brand logo and colors
Optionally add a relevant background image or illustration
Download as JPEG (smaller file) or PNG (sharper text)

Figma (Design Teams)

Create a frame: 1200 × 630
Design your OG template with auto-layout for easy text swapping
Export as PNG or JPEG at 1x resolution
Create a component template that team members can duplicate and customize per page

Photopea (Free Photoshop Alternative)

File → New → 1200 × 630 pixels
Design your image (text, logo, background)
File → Export As → JPEG (quality 85-90)

OG Image Design Best Practices

Text Guidelines

Large, bold title: The page title should be the focal point. 40-60px equivalent for 1200px wide images.
Maximum 5-7 words visible: Social previews are small, especially on mobile. Lengthy text becomes unreadable.
High contrast: White text on dark backgrounds (or vice versa). Avoid subtle color differences that wash out on screens.
Keep text centered: Some platforms crop edges. Keep important content in the center 80% of the image.

Branding

Include your logo (small, corner placement)
Use consistent brand colors across all OG images
Add your domain name for recognition
Create a recognizable template so your content is identifiable at a glance in social feeds

Background

Solid color or gradient: Clean, professional, fast to load
Photo with overlay: A relevant photo with a semi-transparent dark overlay for text readability
Illustration: Unique, branded illustrations stand out in feeds
Avoid busy backgrounds: They compete with text and look cluttered at small sizes

Automated OG Image Generation

Creating OG images manually for every blog post or product page doesn't scale. Automate it:

Vercel OG (@vercel/og)

For Next.js/Vercel projects, dynamic OG image generation at the edge:

// app/api/og/route.tsx
import { ImageResponse } from '@vercel/og';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      <div style={{
        display: 'flex',
        fontSize: 60,
        color: 'white',
        background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
        width: '100%',
        height: '100%',
        padding: '50px',
        alignItems: 'center',
        justifyContent: 'center',
        textAlign: 'center',
      }}>
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Then reference it in your page's metadata:

<meta property="og:image" content="https://yoursite.com/api/og?title=Your+Page+Title">

Puppeteer / Playwright (Self-Hosted)

Use a headless browser to render an HTML template as an image:

const puppeteer = require('puppeteer');

async function generateOGImage(title, outputPath) {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({ width: 1200, height: 630 });

  await page.setContent(`
    <div style="
      width: 1200px; height: 630px;
      background: linear-gradient(135deg, #1a1a2e, #16213e);
      display: flex; align-items: center; justify-content: center;
      padding: 60px; font-family: 'Inter', sans-serif;
    ">
      <h1 style="color: white; font-size: 56px; text-align: center; line-height: 1.2;">
        ${title}
      </h1>
    </div>
  `);

  await page.screenshot({ path: outputPath, type: 'jpeg', quality: 90 });
  await browser.close();
}

Hosting OG Images

Requirements

Publicly accessible: Social media crawlers must be able to fetch the image without authentication
HTTPS: Most platforms require or prefer HTTPS URLs
Fast loading: Social crawlers have timeout limits (Facebook: ~4 seconds). Slow-loading images may not be cached.
Direct URL: The URL must point directly to the image file, not to an HTML page
Permanent: Once shared, the OG image URL is cached by platforms. If the URL breaks later, the preview breaks.

Using ImgLink for OG Images

Create your OG image (1200 × 630, JPEG, under 300 KB)
Upload to ImgLink
Copy the direct link
Use the link in your og:image meta tag

Benefits: permanent URL that won't break, CDN delivery for fast loading by social crawlers, and no hosting infrastructure to manage.

Testing Your OG Images

Platform Preview Tools

Facebook: Sharing Debugger (developers.facebook.com/tools/debug/) — Shows exact preview. Also forces Facebook to re-scrape the page.
Twitter/X: Card Validator (cards-dev.twitter.com/validator) — Preview your card.
LinkedIn: Post Inspector (linkedin.com/post-inspector/) — Preview and refresh cache.
General: opengraph.xyz — Shows previews across multiple platforms simultaneously.

Forcing Re-Scrape After Updates

Social platforms cache OG data aggressively. If you update your OG image, the old one may show for hours or days. Force a re-scrape:

Facebook: Use the Sharing Debugger and click "Scrape Again"
Twitter: Use Card Validator
LinkedIn: Use Post Inspector and click "Refresh"

File Size and Format

Keep OG images optimized for fast crawler fetching:

Format: JPEG for photos, PNG for graphics with text (sharper edges). Avoid WebP — some older crawlers don't support it.
File size: Under 300 KB ideal, under 1 MB maximum. Facebook recommends under 8 MB but smaller is faster.
Compress: Use the ImgLink Image Compressor to optimize before uploading.

A well-designed, properly hosted OG image is one of the highest-ROI elements of any web page. It costs nothing but a few minutes of design time, yet it determines whether hundreds or thousands of social shares result in clicks or scroll-pasts.

Apply This Workflow on ImgLink

ImgLink is built for the exact workflow covered in this guide: fast uploads, permanent direct links, Cloudflare CDN delivery, and no-signup sharing when you need to move quickly. If you want to turn the advice above into a repeatable publishing system, start with one canonical hosted image URL and reuse it across docs, posts, forums, and social channels.

Recommended Next Steps

Use these related resources to keep building the same workflow across adjacent image-hosting topics:

Need permanent image hosting?

Upload images with permanent direct links, fast CDN delivery, and no signup required. Use ImgLink for the workflows this guide discusses.

Upload on ImgLink Free image hosting guide Direct image links