Opengraph file-based metadata are not inherited like layouts

[Francismori7]

Hey there!

It was my understanding that icon.png and layout.tsx/jsx would be inherited from the root by all pages under it, right? That works.

But, an opengraph-image.jpg does not get inherited to all children pages, which poses a problem, I need to manually copy the file to all subfolders.

[n1ckoates]

To expand on this issue, it seems like overwriting any part of openGraph in the metadata object replaces all of openGraph. This happens with images from file conventions (like you're seeing), but also in other situations. For instance, I defined siteName in my root layout, but if I define title in any page I also need to re-define siteName, which kind of defeats the point of having it in my layout.

[Francismori7]

I did notice that as well, I had to write a merge function to apply the same global fields all the time

[sleepdotexe]

Encountering similar behaviour as well. It seems when using export const metadata: Metadata = { /*...*/ } nested property defaults are currently not being spread in by Next when any part of this property is overwritten.

Current Behaviour

For example:

// app/layout.tsx
export const metadata: Metadata = {
        robots: {
		index: true,
		follow: true,
		'max-snippet': -1,
		'max-image-preview': 'large',
		'max-video-preview': -1,
	},
	//...
};

Will produce the following:

<meta name="robots" content="index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1">

If additionally, in some sub-route:

// app/somePath/page.tsx
export const metadata: Metadata = {
        robots: {
		index: false,
		follow: false,
	},
	//...
};

The other properties get lost:

<meta name="robots" content="noindex, nofollow">
<!-- Missing: max-video-preview:-1, max-image-preview:large, max-snippet:-1 -->

Note: you likely wouldn't need max-snippet etc. if using noindex, but this is just an example to demonstrate the issue. Similar behaviour occurs with metadata.alternates, metadata.openGraph, etc.

There doesn't seem to be a good workaround as far as I can tell currently. I tried using generateMetadata() in a manner similar to this:

export async function generateMetadata(
	parent: ResolvingMetadata
): Promise<Metadata> {
	//optionally access and extend (rather than replace) parent metadata
	const existingMetadata: Metadata = (await parent);

	return {
		robots: {
			...existingMetadata.robots,
			index: false,
			follow: false,
		},
		//...
	};
}

...but this didn't work as apparently await parent was returning { params: {} } – guessing this function isn't intended for static pages without dynamic data. So in the end, I'm just copying across the required properties between pages as needed.

I'd be interested to know whether this is intended behaviour or an issue that needs to be created/addressed. New to NextJS 13 having upgraded recently from 12 so would love to hear if there's something I'm missing somewhere.

[thathurtabit]

This still seems to be a thing in Next 15.1.5.
I have an opengraph-image.png in the root of my app router directory, but have subpaths that have their own openGraph metadata. Once I add openGraph metadata to the subpaths, the opengraph-image.png no longer gets shared between routes.