Next.js Discord

Discord Forum

Metadata does not load on a single route, any suggestions?

Answered
Tomistoma posted this in #help-forum
Open in Discord
TomistomaOP
I have a Next 13 app dir project in production, I am seeing the metadata for all routes except one specific route.

Attached is a screenshot of the project directory, the /cabins route has a page.tsx which is a client component and it also uses useSearchParams, and a layout.tsx where I define the metadata.

I use useSearchParams to set a query on the URI either 
/cabins?category=general
or 
/cabins?category=accommodation


Here is the layout.tsx code:
export async function generateMetadata() {
    return {
        title: 'Our Cabins | Site Name',
        description:
            'Browse our selection of portable cabins, each designed with comfort and functionality in mind. Find the perfect cabin for your needs.',
        locale: 'en_NZ',
        type: 'website',
        url: 'https://www.sitename.co.nz/cabins',
        siteName: 'Site Name',
        keywords: [
            'cabins nz',
            'portable cabins',
            'portable cabins nz',
            'portable buildings',
            'portable buildings nz',
            'trademe portable cabins',
            'trademe portable buildings',
            'just cabins',
            'cabins',
            'cabins for sale',
            'kitset cabins nz',
            'tiny homes',
            'tiny homes nz',
            'tiny homes for sale',
            'tiny homes for sale nz',
            'nz tiny homes',
            'small homes nz',
            'small cabins nz',
        ],
    }
}

export default function CabinsLayout({ children }: { children: React.ReactNode }) {
    return <section>{children}</section>
}


This layout.tsx code works for all other routes without any issues.

This route also has dynamic child routes [model] slug which just has a page.tsx and the metadata is generated there and is working for all the model routes.
If anyone can see what i'm doing wrong, please let me know, any help is appreciated, thanks in advanced!

Below attached is also the start of the /cabins page.tsx
Answered by joulev
in the layout wrapping this page, change
{children}

to
{/* !!! Crawlers won't see any page content !!! */}
<Suspense>
  {children}
</Suspense>
View full answer

20 Replies

TomistomaOP
Still wasn't able to fix this, any help from the community is much appreciated!
joulev
dunno if it is related to your issue, but the metadata API (metadata and generateMetadata) doesn't work in client component layouts/pages
if you want the metadata API to work, ensure the file it is in does not have use client
TomistomaOP
My page.tsx does have 'use client' but my layout.tsx doesn't which is why I am using the layout.tsx for only the metadata. I have similar scenarios for other routes as I just described and it works there, I really think it has something to due with my use of useSearchParams or the fact that I have a child route thats a dynamic slug in the same directory.
In that case the metadata api doesn’t work
Add a Suspense that wraps the component using useSearchParams
TomistomaOP
Good catch! Didn't notice this in the docs. Thanks, will try it now!
Will report back in a bit
Can you wrap an entire page with a supsense like you'd usually do with a Fragment?
joulev
The part that is client side rendered, so you have to make the part inside Suspense as small as possible for SEO
But yes you can just use Suspense wrapping your entire page
TomistomaOP
Wrapping the whole page didn't work, but I will continue to play with it.
TomistomaOP
Perhaps you can give me a suggestion?
@Tomistoma Perhaps you can give me a suggestion?
joulev
in the layout wrapping this page, change
{children}

to
{/* !!! Crawlers won't see any page content !!! */}
<Suspense>
  {children}
</Suspense>
Answer
TomistomaOP
Ok, will give it that a try, not really worried about the crawlers at the moment.. more focused on the social sharing link aspect so don't mind wrapping the layout.
That worked, big thanks, was stuck on this for a few days!
joulev
the reason is that you have to wrap the component using useSearchParams in Suspense
and in your case, that component is the Page component itself
that's why you have to use Suspense in a place 'higher' than the Page component in the react hierarchy