og:image Meta Tag: How to Add It in HTML, Next.js, and WordPress

The og:image meta tag tells social networks and chat apps which image to show in the preview of your link. Put it in the <head> of each page:

<meta property="og:image" content="https://example.com/og/home.png" />

The complete set of image tags

One tag is the minimum. This set gives each platform all that it needs:

<meta property="og:image" content="https://example.com/og/home.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:alt" content="Acme: invoices that send themselves" />
<meta name="twitter:card" content="summary_large_image" />

Rules for the og:image URL

• Use an absolute URL. /og/home.png fails on most platforms. Write https://example.com/og/home.png.
• Use https. Some apps block images on http.
• The image must be public. No login, no cookie wall, and no block for bots in robots.txt or in your firewall.
• The tag must be in the HTML that the server sends. Crawlers do not run JavaScript. A tag that React adds in the browser does not exist for them.
• Write property, not name. Open Graph tags use the property attribute. Twitter tags use name.
• Use the correct size. 1200×630 pixels. See the OG image size guide.

All og:image properties

Tag	Use
og:image	The URL of the image. Required.
og:image:secure_url	An https URL for the same image. Only necessary when og:image is http.
og:image:type	The MIME type, such as image/png or image/jpeg.
og:image:width	The width in pixels.
og:image:height	The height in pixels.
og:image:alt	A description of the image for people who cannot see it.

You can repeat og:image to offer more than one image. Platforms use the first one, so put the best image first.

Add og:image in plain HTML

<head>
  <title>Acme: invoices that send themselves</title>
  <meta property="og:title" content="Invoices that send themselves" />
  <meta property="og:image" content="https://example.com/og/home.png" />
</head>

Add og:image in Next.js

In the App Router, export metadata from a page or a layout. Set metadataBase once, and Next.js makes each image URL absolute.

import type { Metadata } from 'next'

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

To render a different image for each page, read the Next.js OG image guide.

Add og:image in WordPress

WordPress does not add Open Graph tags by itself. An SEO plugin such as Yoast SEO or Rank Math adds them. The plugin uses the featured image of the post as og:image. You can also set a different social image for each post in the plugin panel below the editor, and a default image in the plugin settings.

og:image and twitter:image

X reads twitter:image first. When that tag is missing, X uses og:image. Add twitter:image only when you want a different image on X.

The image does not show. What now?

1. Run the page through the OG image checker. It finds relative URLs, images that are too small, and missing tags.
2. Open the image URL in a private browser window. If it does not load there, it does not load for a crawler.
3. Look at the page source (not the inspector). If the tag is not in the source, JavaScript adds it too late.
4. If you changed the image and the old one still shows, the platform has a copy. Use the Facebook Sharing Debugger or the LinkedIn Post Inspector to make it read the page again.

Related: what is an OG image, all Open Graph tags, og:title, og:url.