Thomas Desmond

Sitecore Developer Advocate

August 15, 2023

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

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.

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/.