How to add an Open Graph image to your website (HTML & Next.js)

Step-by-step: the meta tags you need, Next.js Metadata API and opengraph-image files, dynamic image URLs, and how to test and refresh link previews.

An Open Graph image is just an image URL referenced from your page's <head>. Platforms fetch your HTML, read the tags and download the image. Here is how to set it up on any stack.

1. Plain HTML (any site)

Put the image somewhere public (for example /og.png), then add these tags inside <head>. Use an absolute URL; relative paths are a common reason previews fail.

<meta property="og:title" content="Your page title" />
<meta property="og:description" content="One-sentence summary of the page." />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />

2. Next.js (App Router)

Set a metadataBase once so relative image paths become absolute, then add images in metadata:

// app/layout.tsx
import type { Metadata } from "next";

export const metadata: Metadata = {
  metadataBase: new URL("https://example.com"),
  openGraph: {
    images: [{ url: "/og.png", width: 1200, height: 630, alt: "Example" }],
  },
  twitter: { card: "summary_large_image" },
};

Alternatively, drop a file named opengraph-image.png into any route folder and Next.js adds the tags for you. For per-page images, return them from generateMetadata.

3. Dynamic images without a build step

Every design you make in our generator can get a hosted URL (https://ogimagegenerator.dev/i/….png). Paste it straight into og:image; it's a permanent link to that exact image, cached at the edge. For pages that change often, generate a design per page and store each URL alongside the page.

4. Test and refresh

Facebook: Sharing Debugger shows what Facebook sees, and "Scrape again" clears its cache.
LinkedIn: Post Inspector re-fetches the page and shows the preview.
X: paste the link into a draft post to see the card. X caches cards for a while, so adding a query string (?v=2) to the image URL forces a fresh fetch.
Slack/Discord: unfurls are cached too. Changing the image URL is the most reliable way to refresh.