Static Open Graph Image for Next.js App Directory on Netlify

XM Cloud Components Logo Early Access

I wanted a simple static open graph image that would display for any link to my site. For some reason Next.js App Router made this harder than it needed to be because I discovered what worked previously in Vercel did not work in Netlify.

Here’s how I got a static open graph image for my Next.js app built with the App Router architecture and hosted on Netlify.

Export Metadata Object in the root `layout.tsx`

1// layout.tsx
2...
3export const metadata = {
4  title: "� Sphere Showcase",
5  description:
6    "Showcase of Photosphere, 360, and Panorama images from around the world. Upload and share your own!",
7  keywords: ["Photosphere", "360 Photo", "Panorama", "World Map"],
8  openGraph: {
9    images: 'https://photos.sphereshowcase.com/tBJczsgyzUAP3woETDr31.jpg',
10  },
11};
12...

I have the above snippet in the highest level layout.tsx file of my Next.js application. It has the title, description, keywords , and most importantly the images property under openGraph.

💡 Notice the images property is set to a URL hosted outside of my application. Do not point to images stored directly under your /public folder, images need to be externally hosted.

Additional properties can be set in the exported metadata object, however I have not found a comprehensive list all in one location. The documentation, Metadata Object, shows examples of using more properties but no comprehensive list.

The Results

When Netlify builds my application the generated metadata looks like this.

1<title>🌎 Sphere Showcase</title>
2<meta name="description" content="Showcase of Photosphere, 360, and Panorama images from around the world. Upload and share your own!"/>
3<meta name="keywords" content="Photosphere,360 Photo,Panorama,World Map"/>
4<meta name="viewport" content="width=device-width, initial-scale=1"/>
5<meta property="og:image" content="https://photos.sphereshowcase.com/tBJczsgyzUAP3woETDr31.jpg"/>
6<meta name="twitter:card" content="summary"/>
7<meta name="twitter:image" content="https://photos.sphereshowcase.com/tBJczsgyzUAP3woETDr31.jpg"/>

To preview your og:image and verify it’s is working, I like to use https://www.opengraphpreview.xyz/.

❓ Looking to do add a static og:image to your Next.js hosted in Vercel? Check out my other article: Simple Static Open Graph Image in Next.js App Directory On Vercel