All tools

Tool · Open Graph

Open Graph image generator from a URL

When someone shares your link on Slack, LinkedIn, iMessage, or Facebook, the preview card pulls the image set in your og:image tag. A plain screenshot gets cropped and looks flat; a device mockup on a clean background reads as a product at thumbnail size.URL2Mockup captures your live page, places it in a device frame, and lays it out on the Open Graph canvas at 1200 × 630, the size most platforms use for large link previews. You export the image and reference it from your page’s meta tags.
Preview on

Your first 2 mockups are free when you sign up.

How it works

  1. Step 1

    Paste the page URL

    Use the exact page you want to preview. If it animates on load, add a 2s or 5s capture delay; turn on cookie banner hiding so the consent popup is not in your preview.

  2. Step 2

    Pick the frame

    Laptop works best for desktop-first sites. Choose laptop + phone if you want to show the responsive layout in the same card.

  3. Step 3

    Set the Open Graph canvas

    Select Open Graph (1200 × 630), then choose a background preset such as Ocean or Midnight, or set your own brand color or gradient. Add padding so the device does not touch the edges.

  4. Step 4

    Export and wire it up

    Download as PNG or JPG, upload it to your site, and point og:image (and twitter:image) at the file URL.

Recommended settings

Canvas
Open Graph · 1200 × 630
Device
Laptop, or laptop + phone
Background
Gradient preset or brand color (avoid transparent)
Padding
M or L, so platforms that crop edges keep the device
Format
JPG for smaller files, PNG for crisp UI text

Tips

  • Keep the hero headline of the captured page above the fold: at preview size, the visible text is often the only copy people read.
  • Use a solid or gradient background. Some platforms render transparent PNGs on black or white, which can hide a dark device frame.
  • Need an X/Twitter-specific card? Re-export the same mockup on the X / Twitter canvas (1600 × 900) at no extra credit cost.

Frequently asked questions

1200 × 630 pixels (about 1.91:1) is the common recommendation for large link previews, and it is the size of the Open Graph canvas in URL2Mockup.

No. URL2Mockup produces the image file. You upload it to your site or CMS and reference it from your og:image and twitter:image meta tags.

A URL capture is 10 credits per device screen, so a laptop mockup is 10 credits and laptop + phone is 20. Re-capturing a page captured in the last 24 hours is 3 credits. Every mockup includes the clean HD export with no watermark, all styling options, and private links at no extra credit cost.

Yes. Switch the canvas to X / Twitter, Square, or Story and export again. Changing canvas, background, or padding does not use extra credits.

Related tools

Product Hunt gallery imagesLaptop and phone mockupWebsite mockup generator

Every export is included

Pay per capture with prepaid credits from $12. Clean HD downloads, styling, and private links cost nothing extra.

See pricing