March 28, 2026 · 8 min read

How to Add OG Images to Any Website in 5 Minutes

Links shared without OG images get up to 40% fewer clicks. Yet adding social preview images to your site takes less than five minutes—once you know the right meta tags and have a reliable image source. This guide covers everything from raw HTML to framework-specific integration, with a fast automated option at the end.

What Are OG Images and Why Should You Care?

OG (Open Graph) images are the preview cards that appear when someone shares a link on Twitter, LinkedIn, Facebook, Slack, Discord, iMessage, or any other platform that renders link previews. They were introduced by Facebook in 2010 as part of the Open Graph protocol, and they've since become the universal standard for link metadata.

Here's why they matter in concrete terms:

The bottom line: if your website has any public-facing pages, adding OG images is one of the highest-ROI tasks you can do. It takes minutes and affects every single link share across every platform.

The Manual Way: Figma, Canva, and Pain

The most common approach to OG images looks like this:

  1. Open Figma or Canva
  2. Create a new design at 1200×630 pixels (the standard OG image size)
  3. Add your page title, maybe a logo and background color
  4. Export as PNG or JPEG
  5. Upload the file to your hosting or CMS
  6. Copy the URL and paste it into a <meta> tag

This works for a single landing page. But consider the pain points that emerge at scale:

For anything beyond a handful of static pages, you need automation.

The Automated Way: OGPeek API

Instead of creating and hosting image files, you construct a URL with your desired parameters. The OGPeek API generates the image on the fly when any social platform requests it. No files to manage, no uploads, no design tool required.

Step 1: Build Your Image URL

The OGPeek API accepts parameters via URL query strings. Here's the anatomy of a request:

https://ogpeek.com/api/v1/og
  ?title=How+to+Add+OG+Images
  &subtitle=A+Complete+Guide+for+Developers
  &template=gradient
  &theme=midnight
  &brandColor=%23F59E0B

That URL generates this image:

Example OG image generated by OGPeek API

Step 2: Choose Your Parameters

Key parameters you can customize:

Step 3: Add the Meta Tags to Your HTML

Once you have the URL, drop it into your page's <head> section. That's it.

The Complete Set of Meta Tags You Need

Here are all the meta tags required for OG images to render correctly across every major platform:

<!-- Open Graph (Facebook, LinkedIn, Slack, Discord) -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A short description of the page." />
<meta property="og:image" content="https://ogpeek.com/api/v1/og?title=Your+Page+Title&template=gradient&theme=dark" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://yoursite.com/page" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A short description of the page." />
<meta name="twitter:image" content="https://ogpeek.com/api/v1/og?title=Your+Page+Title&template=gradient&theme=dark" />

Important: The og:image:width and og:image:height tags are not optional. Without them, many platforms (especially LinkedIn and Facebook) will show a small square thumbnail instead of the large landscape card. Always include them with values 1200 and 630.

A few things to note:

Framework-Specific Examples

Here's how to add OG images in the five most common web frameworks and platforms.

Plain HTML

The simplest case. Paste these tags inside <head>:

<head>
  <meta property="og:image"
    content="https://ogpeek.com/api/v1/og?title=My+Page&template=gradient&theme=dark" />
  <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://ogpeek.com/api/v1/og?title=My+Page&template=gradient&theme=dark" />
</head>

Next.js (App Router)

Use the generateMetadata function to set OG images dynamically per page:

// app/blog/[slug]/page.tsx
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  const ogImage = `https://ogpeek.com/api/v1/og?title=${
    encodeURIComponent(post.title)
  }&template=gradient&theme=midnight&brandColor=%23F59E0B`;

  return {
    title: post.title,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: ogImage, width: 1200, height: 630 }],
    },
    twitter: {
      card: 'summary_large_image',
      images: [ogImage],
    },
  };
}

Hugo

Add this to your layouts/partials/head.html or base template:

{{ $ogTitle := .Title | urlquery }}
{{ $ogImage := printf "https://ogpeek.com/api/v1/og?title=%s&template=gradient&theme=dark" $ogTitle }}

<meta property="og:image" content="{{ $ogImage }}" />
<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="{{ $ogImage }}" />

Astro

In your layout component or individual page frontmatter:

---
// src/layouts/BlogPost.astro
const { title, description } = Astro.props;
const ogImage = `https://ogpeek.com/api/v1/og?title=${
  encodeURIComponent(title)
}&template=gradient&theme=midnight`;
---
<head>
  <meta property="og:image" content={ogImage} />
  <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={ogImage} />
</head>

WordPress

If you're not using an SEO plugin like Yoast (which has its own OG image settings), add this to your theme's functions.php:

function ogpeek_meta_tags() {
  if (is_singular()) {
    $title = urlencode(get_the_title());
    $og_url = "https://ogpeek.com/api/v1/og?title={$title}"
            . "&template=gradient&theme=dark";
    echo '<meta property="og:image" content="' . esc_url($og_url) . '" />' . "\n";
    echo '<meta property="og:image:width" content="1200" />' . "\n";
    echo '<meta property="og:image:height" content="630" />' . "\n";
    echo '<meta name="twitter:card" content="summary_large_image" />' . "\n";
    echo '<meta name="twitter:image" content="' . esc_url($og_url) . '" />' . "\n";
  }
}
add_action('wp_head', 'ogpeek_meta_tags');

Pro tip: URL-encode your title parameter. Titles with special characters like &, ?, or # will break the image URL if not encoded. Use encodeURIComponent() in JavaScript, urlquery in Hugo, or urlencode() in PHP.

Testing Your OG Images

After adding the meta tags, you need to verify they render correctly. Social platforms cache aggressively, so testing before you share is critical.

Twitter Card Validator

Twitter removed their public Card Validator preview in 2022, but you can still test by posting a tweet with the URL (use a private account or delete it after). Alternatively, use the twitterbot user agent with curl to see what Twitter sees:

curl -A "Twitterbot/1.0" -s https://yoursite.com/page | grep "og:image"

Facebook Sharing Debugger

The most reliable testing tool. Go to developers.facebook.com/tools/debug and paste your URL. It shows exactly which OG tags Facebook reads, the image it renders, and any warnings. Use the "Scrape Again" button to clear Facebook's cache when you make changes.

LinkedIn Post Inspector

Available at linkedin.com/post-inspector. Similar to Facebook's debugger. Enter your URL, and LinkedIn shows the preview card it will render. Particularly useful because LinkedIn is strict about og:image:width and og:image:height—missing dimensions often result in a tiny thumbnail instead of a large card.

Open Graph Preview Tools

For a quick, platform-agnostic check, tools like opengraph.xyz will fetch your URL and show a multi-platform preview of how your card will look on Twitter, Facebook, LinkedIn, and Slack simultaneously.

Common Issues to Watch For

Static Images vs. API-Generated: When to Use Which

Not every situation calls for API-generated images. Here's a decision framework:

For most websites—blogs, docs sites, SaaS products, portfolios with multiple projects—an API is the right choice. The time savings compound with every page you add.

Performance Considerations

A common concern: won't an API-generated image be slow? No. Here's why:

Start generating OG images for free

The OGPeek free tier includes 100 images per month with no API key required. Drop a URL into your meta tags and you're done.

Try the playground →

Conclusion

Adding OG images to your website is one of the simplest, highest-impact optimizations you can make. The four meta tags (og:image, og:image:width, og:image:height, twitter:card) take 30 seconds to add. Generating the images themselves—whether for 1 page or 1,000—takes no time at all with an API.

Here's the five-minute version:

  1. Build your image URL with OGPeek's parameters (title, template, theme, brand color)
  2. Add the og:image and twitter:image meta tags to your <head>
  3. Include og:image:width (1200) and og:image:height (630)
  4. Test with Facebook's Sharing Debugger
  5. Ship it

Every link shared from your site will now show a branded, professional preview card instead of a blank space. That's more clicks, more trust, and more traffic—for five minutes of work.

More developer APIs from the Peek Suite