Quick answer: Every link shared on X, Facebook, LinkedIn, Slack, or Discord renders a card, and the image in that card comes from the page's Open Graph (OG) tags. The standard image size is 1200 × 630 pixels, and making it is a small, concrete job.

This is the full workflow.

Step 1: Create the canvas

Set up a 1200 × 630 canvas (1.91:1) in PNG or JPG. The layout has a margin of about 60 px and a safe text area in the center.

Step 2: Place the four elements

  1. The product name or logo, top-left or bottom.
  2. The one-line value proposition, in the center-left, large and short.
  3. A product visual or screenshot, on the right or as a calm background.
  4. The domain or a small signature, bottom-left if the logo isn't already there.

Two-line headlines are the limit. The card is often shown at 400 px wide, so the text has to survive the shrink.

Step 3: Keep the layout calm

The OG image is a link card, not a landing page. It competes with a feed of other cards, so the one-line claim must be readable in a glance.

  • Use a solid or gradient background; the readability rules are in text on images.
  • Keep one visual, not a collage.
  • Leave the center frame clean; platforms crop small amounts differently.

Step 4: Export correctly

  • PNG for text-heavy cards, JPG for photographic backgrounds.
  • Keep the file under roughly 1–2 MB so the scraper loads it fast.
  • Export sRGB; otherwise colors can shift.

Step 5: Add the meta tags

In the page's <head>:

<meta property="og:image" content="https://example.com/og-image.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="The card headline">
<meta property="og:description" content="The card summary.">
<meta property="og:type" content="website">
<meta name="twitter:card" content="summary_large_image">

The full tag set and the background of the OG image are on the Open Graph size page.

Step 6: Test the card

Each platform caches pages, so run the debuggers after publishing:

  • Facebook: Sharing Debugger.
  • LinkedIn: Post Inspector.
  • X: Card Validator.

The tool both reports the detected tag and clears the cached version, so you can update the image after a bad first render.

Step 7: Per-page images

The landing page, blog posts, and pricing page each get their own OG image. The homepage card is the brand; the blog card is the article title; the pricing card is the plan or product.

What to avoid

  • A screenshot of the full page. Unreadable in the card.
  • Tiny text. The headline is the card.
  • A missing og:image tag. The platform then guesses, usually picking a random image or nothing.
  • Changing the image without clearing the cache. The debugger is required.
  • Different titles in the tag and on the page. The card title and the page title should agree.

Frequently asked questions

Can I use 1200 × 675 for OG? The difference is small; a full-bleed image works, but keep text away from the bottom edge, since 1200 × 630 cards crop it.

Do I need a separate Twitter card? The summary_large_image tag reuses the OG image; you don't need a separate file.

How big should the file be? Under 1–2 MB is the safe range for scraping.

Does the OG image affect GEO? It's not a ranking signal, but it drives click-through on every link share.

Can I generate the card quickly? A 1200 × 630 OG image is a standard output in Neatico's launch kit, along with the other social formats.

Make the card, add the tags, run the three debuggers. It's ten minutes of design work for a card that appears in every share of your site.