You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I’m a beginner in Next.js and I know I might be “benching above my weight class” here 😅, but I’m trying to get dynamic SEO working with the App Router in Next.js 15.
When I add url or type: "website" in the OpenGraph metadata, the title and description start showing inside the instead of .
I’ve checked my layout.js and I have present.
I removed any client-only components from the layout.
I know that in the App Router, generateMetadata runs on the server, so I expected the SEO tags to render correctly in .
I feel like I’m missing some key concept about Server Components vs Client Components or the App Router’s metadata injection, but I’m unsure what exactly.
I’d love to hear:
Has anyone run into the same behavior in Next.js 15 App Router?
Are there specific patterns for dynamic metadata with type "website" or canonical URLs that avoid this issue?
Any beginner-friendly explanation of why the metadata would end up in instead of ?
Thanks in advance! I’m trying to learn, and any guidance is appreciated 🙏.
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
Uh oh!
There was an error while loading. Please reload this page.
-
Summary
Hi all,
I’m a beginner in Next.js and I know I might be “benching above my weight class” here 😅, but I’m trying to get dynamic SEO working with the App Router in Next.js 15.
Here’s my setup:
Project path:
C:\Users\ah\Desktop\syrian-market-next\src\app[locale]\posts[...slug]\page.js
I’m using dynamic routes ([...slug]) with a fetchHouse(id) function to fetch house data from my backend.
I’m attempting to generate dynamic metadata (title, description, canonical URL, OpenGraph) using the generateMetadata function.
Example of metadata I want to generate:
return {
title:
${house.title} in ${house.location} | Syrian Market,description: house.description,
alternates: { canonical:
https://example.com/${params.locale}/posts/${house._id}},openGraph: {
title:
${house.title} in ${house.location} | Syrian Market,description: house.description,
url:
https://example.com/${params.locale}/posts/${house._id},type: "website",
images: house.images?.[0] ? [house.images[0]] : [],
},
};
Problem:
When I add url or type: "website" in the OpenGraph metadata, the title and description start showing inside the instead of .
I’ve checked my layout.js and I have present.
I removed any client-only components from the layout.
I know that in the App Router, generateMetadata runs on the server, so I expected the SEO tags to render correctly in .
I feel like I’m missing some key concept about Server Components vs Client Components or the App Router’s metadata injection, but I’m unsure what exactly.
I’d love to hear:
Has anyone run into the same behavior in Next.js 15 App Router?
Are there specific patterns for dynamic metadata with type "website" or canonical URLs that avoid this issue?
Any beginner-friendly explanation of why the metadata would end up in instead of ?
Thanks in advance! I’m trying to learn, and any guidance is appreciated 🙏.
Additional information
No response
Example
No response
Beta Was this translation helpful? Give feedback.
All reactions