Mohamed Idris

Posted on Mar 15

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

#learning #webdev #html

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, 1200x630 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 1200x630 pixels.

Steps (Chrome):

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

Now here's the part most people miss:

In the device toolbar, click the three dots menu (⋮)
Select "Add device pixel ratio"
Set it to 1.0

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

Click the three dots menu (⋮) again → "Capture screenshot"

Done. You now have a pixel-perfect 1200x630 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:

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

DEV Community