Adding Metadata OpenGraph Image

Adding og:image OpenGraph image metadata to the static NextJS site by creating opengraph-image

OpenGraph and Twitter Card Markup

The Open Graph protocol allows for embedding links into posts on social media with rich information about the target, including an image. The OpenGraph standard is used by Linked In, Facebook and others.

Twitter has its own format defined in Cards Markup Tag Reference.

NextJS allows for the management fo the Open Graph image by convention in naming the metadata files. In particular, there are two file names that would make NextJS generate the OpenGraph images:

opengraph-image
twitter-image

The supported extensions for both files are: .jpg, .jpeg, .png, .gif. The images are placed in the directory corresponding to the relative path of the page. In this particular case we place one image in the src\app directory:

...
├── postcss.config.mjs
├── public
│   ├── next.svg
│   ├── robots.txt
│   ├── sitemap
│   │   ├── sitemap-0.xml
│   │   └── sitemap.xml
│   ├── static
│   └── vercel.svg
├── src
│   ├── app
│   │   ├── about
│   │   │   └── page.tsx
│   │   ├── blog
│   │   │   ├── [...slug]
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── layout.tsx
│   │   ├── opengraph-image.png
│   │   └── page.tsx
│   ├── components
│   │   ├── cookie-consent.tsx
│   │   ├── main-nav.tsx
│   │   ├── mdx-components.tsx
...

As a check, before placing the image, the metadata for the home page looks like:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link
    rel="preload"
    href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2"
    as="font"
    crossorigin=""
    type="font/woff2"
  />
  <link
    rel="stylesheet"
    href="/_next/static/css/f0bf37cb593c651e.css"
    data-precedence="next"
  />
  <link
    rel="preload"
    as="script"
    fetchPriority="low"
    href="/_next/static/chunks/webpack-8f7c4246348aad30.js"
  />
  <script
    src="/_next/static/chunks/fd9d1056-046e85abdd898386.js"
    async=""
  ></script>
  <script src="/_next/static/chunks/23-7661f3ec7ba686c4.js" async=""></script>
  <script
    src="/_next/static/chunks/main-app-a74db369375cd893.js"
    async=""
  ></script>
  <script src="/_next/static/chunks/231-28aacb49b1388ef2.js" async=""></script>
  <script src="/_next/static/chunks/62-58008bd8e6265209.js" async=""></script>
  <script
    src="/_next/static/chunks/app/layout-af239650b9c63785.js"
    async=""
  ></script>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
  <meta name="next-size-adjust" />
  <script
    src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"
    nomodule=""
  ></script>
</head>

After adding the image, we get a warning from the build tool:

   Generating static pages (0/10)  [    ] ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
 ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
 ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
 ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase
 ⚠ metadataBase property in metadata export is not set for resolving social open graph or twitter images, using "http://localhost:3000". See https://nextjs.org/docs/app/api-reference/functions/generate-metadata#metadatabase

The generated metadata in the header now contains the link to the OpenGraph Image:

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link
    rel="preload"
    href="/_next/static/media/c9a5bc6a7c948fb0-s.p.woff2"
    as="font"
    crossorigin=""
    type="font/woff2"
  />
  <link
    rel="stylesheet"
    href="/_next/static/css/f0bf37cb593c651e.css"
    data-precedence="next"
  />
  <link
    rel="preload"
    as="script"
    fetchPriority="low"
    href="/_next/static/chunks/webpack-8f7c4246348aad30.js"
  />
  <script
    src="/_next/static/chunks/fd9d1056-046e85abdd898386.js"
    async=""
  ></script>
  <script src="/_next/static/chunks/23-7661f3ec7ba686c4.js" async=""></script>
  <script
    src="/_next/static/chunks/main-app-a74db369375cd893.js"
    async=""
  ></script>
  <script src="/_next/static/chunks/231-28aacb49b1388ef2.js" async=""></script>
  <script src="/_next/static/chunks/62-58008bd8e6265209.js" async=""></script>
  <script
    src="/_next/static/chunks/app/layout-af239650b9c63785.js"
    async=""
  ></script>
  <title>Create Next App</title>
  <meta name="description" content="Generated by create next app" />
  <meta property="og:title" content="Create Next App" />
  <meta property="og:description" content="Generated by create next app" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="600" />
  <meta
    property="og:image"
    content="http://localhost:3000/opengraph-image.png?79599833c63f7586"
  />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Create Next App" />
  <meta name="twitter:description" content="Generated by create next app" />
  <meta name="twitter:image:type" content="image/png" />
  <meta name="twitter:image:width" content="1200" />
  <meta name="twitter:image:height" content="600" />
  <meta
    name="twitter:image"
    content="http://localhost:3000/opengraph-image.png?79599833c63f7586"
  />
  <link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="16x16" />
  <meta name="next-size-adjust" />
  <script
    src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"
    nomodule=""
  ></script>
</head>

It is worth noticing that NextJS uses the same image for both the OpenGraph as well as the Twitter Card tags.

Dimensions of OpenGraph and Twitter Card images

There is plentiful, albeit sometimes contradictory, information about the required dimensions for the metadata images. Here are a few links to detailed articles and analysis:

Based on these and other articles, as for 2024, the following dimensions can be recommended:

Platform	Dimensions
Facebook	1200x630
Linked In	1200x630
Twitter	1200x600

There are ways to use different size images for different cards, specify the image dimensions in metadata, use multiple images, use videos, etc.

Previous: List of All Blog Posts

Last Updated: July 25, 2024