MockupSnap
Back to Blog

February 14, 2026

How to Create a Website Preview Image for Social Media

When someone shares a link to your website on Twitter, LinkedIn, Slack, or iMessage, a preview card appears. That card shows your site’s title, description, and a large image. The image is called an Open Graph image (or OG image), and it has a major effect on whether people click.

If you haven’t set one, platforms either pull a random image from your page or show no image at all. A well-made preview image can double or triple click-through rates on shared links.

Here’s how to create one.

What Platforms Display

Most platforms use the Open Graph protocol. When your link is shared, the platform’s crawler reads the <meta> tags in your page’s <head>:

<meta property="og:image" content="https://yoursite.com/preview.png" />
<meta property="og:title" content="Your Site Title" />
<meta property="og:description" content="A short description." />

Twitter/X also supports its own card format:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/preview.png" />

Most platforms fall back to og:image if Twitter-specific tags aren’t present.

The safe dimensions for an OG image are 1200×630 pixels at 72dpi. This works on:

  • Twitter/X (renders at 1200×628, trimming 2px)
  • LinkedIn (1200×627)
  • Facebook (1200×630)
  • Slack (shows a thumbnail, uses og:image)
  • iMessage (link previews on iOS/macOS)
  • Discord

Some tools suggest 1200×600 or 1280×720. Both work, but 1200×630 is the most widely accepted standard.

What Should Go in the Image?

The best OG images are simple and readable at small size. When rendered as a preview card, the image may appear as small as 120×63px in some contexts.

Good OG images typically include:

  • Your site name or logo - brand recognition
  • A clear tagline or value proposition - one line that explains what the site does
  • A screenshot or device mockup - optional, but effective for tool/product sites
  • A simple background - solid color or subtle gradient; avoid busy backgrounds

For a web app or tool, a device mockup screenshot in the OG image works well - it immediately shows what the product looks like.

How to Take the Screenshot for Your OG Image

If you want to include a screenshot of your own site in the OG image, you need a clean, high-resolution capture.

Options:

  1. Browser DevTools full-page screenshot - In Chrome, open DevTools → Ctrl+Shift+P → “Capture full size screenshot”. Good resolution, no device frame.

  2. Device mockup screenshot - Use MockupSnap to get a screenshot of your site inside a device frame. Paste your URL, and within 30 seconds you’ll get four device-framed images at real browser resolution. The MacBook or desktop view works well as a background element in an OG image.

  3. Design tool - Figma, Canva, or similar. Create a 1200×630 artboard and drop in your screenshot.

Creating the Final OG Image

Once you have your screenshot, the final OG image usually needs some compositing - overlaying text, adding a logo, adjusting the background.

Simple approach (Canva):

  1. Create a new design at 1200×630px
  2. Set background color to match your brand
  3. Add your logo top-left, tagline center
  4. Place a device mockup screenshot (from MockupSnap or similar) on the right
  5. Export as PNG at 72dpi

Developer approach (satori or @vercel/og): If you’re building with Next.js or similar, the @vercel/og package lets you generate OG images dynamically from React components, served as image routes. This is useful if you want different OG images per page.

For static sites, a single well-designed 1200×630 PNG is sufficient.

Adding the Tags to Your Site

Once you have the image hosted (in your /public directory or on a CDN), add the meta tags to your <head>:

<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 name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />

Use absolute URLs (starting with https://), not relative paths. Crawlers won’t resolve relative paths for OG images.

Testing Your Preview

After deploying:

  • Facebook Debugger: Use Meta’s Sharing Debugger tool to see exactly how Facebook renders your preview
  • Twitter Card Validator: Twitter’s card validator previews your Twitter card
  • LinkedIn Post Inspector: LinkedIn’s tool shows your LinkedIn preview
  • OpenGraph.xyz: A third-party tool that shows OG preview across multiple platforms at once

If you update the image and the old one is cached, use the “Scrape Again” button in the Facebook Debugger to force a refresh.

Summary

A website preview image for social media is a 1200×630px image referenced in your page’s Open Graph meta tags. It appears in link previews on Twitter, LinkedIn, Slack, iMessage, and most other platforms. The image should be simple, legible at small sizes, and communicate your site’s purpose immediately. For web apps and tools, including a device mockup screenshot from a tool like MockupSnap in the OG image is an effective way to show the product at a glance.