How to Create the Perfect OG Image (With AI + A Simple Screenshot)

Posted by DevegygiebyOL

What is an OG Image?

OG (Open Graph) image is the preview image that shows up when you share a link on social media, Slack, Discord, or any platform that unfurls URLs.

You’ve seen it hundreds of times — that card with an image, title, and description that appears when someone drops a link in a chat.

It’s set with a simple meta tag in your HTML: 

<meta property="og:image" content="/og-image.png" />

Why Should You Care?

  • Links with OG images get significantly more clicks
  • It makes your site look professional and intentional
  • Without one, platforms show a blank card or a random page element

The Easiest Way to Create One

You don’t need Figma or Photoshop. Ask any AI (ChatGPT, Claude, etc.) to:

“Create an HTML file for an OG image with my name, title, and website URL. Use a dark background, 1200×630 dimensions.”

You’ll get a simple HTML file with a styled card. Open it in your browser, and screenshot it.

Here’s a minimal example: 

<!doctype html>
<html>
  <head>
    <style>
      body {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        background: #111;
      }
      .card {
        width: 1200px;
        height: 630px;
        background: #1a1a2e;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 20px;
        font-family: system-ui, sans-serif;
      }
      .name { font-size: 56px; color: #fff; }
      .title { font-size: 28px; color: #888; }
    </style>
  </head>
  <body>
    <div class="card">
      <div class="name">Your Name</div>
      <div class="title">Your Title</div>
    </div>
  </body>
</html>

Taking a Pixel-Perfect Screenshot

Here’s the trick — you can’t just screenshot the browser window. You need exactly 1200×630 pixels.

Steps (Chrome):

  1. Open the HTML file in Chrome
  2. Open DevTools (F12)
  3. Click the device toolbar icon (or Ctrl+Shift+M)
  4. Set the dimensions to 1200 x 630

Now here’s the part most people miss:

  1. In the device toolbar, click the three dots menu (⋮)
  2. Select “Add device pixel ratio”
  3. Set it to 1.0

Without this step, if your display runs at 2x scaling (most modern laptops), your screenshot will be 2400×1260 instead of 1200×630.

  1. Click the three dots menu (⋮) again → “Capture screenshot”

Done. You now have a pixel-perfect 1200×630 OG image.

Adding It to Your Site

Drop the image in your public folder (for Vite/Next.js) or root directory, then add these meta tags to your <head>: 

<meta property="og:image" content="/og-image.png" />
<meta property="og:title" content="Your Name - Your Title" />
<meta property="og:description" content="A short description." />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="/og-image.png" />

Test It

After deploying, paste your URL into these tools to verify:

  • OpenGraph.xyz
  • Twitter Card Validator

That’s it. A 5-minute task that makes every shared link to your site look polished.