Next.js Discord

Discord Forum

Next.js 14 SEO

Answered
Asian black bear posted this in #help-forum
Open in Discord
Original message was deleted.
Answered by joulev
<Head> doesn't work in the app router, it continues to work in the pages router

solution:
* use the metadata API, or
* just remove <Head> and use meta tags directly in the page
View full answer

6 Replies

Original message was deleted
joulev
<Head> doesn't work in the app router, it continues to work in the pages router

solution:
* use the metadata API, or
* just remove <Head> and use meta tags directly in the page
Answer
@joulev <Head> doesn't work in the app router, it continues to work in the pages router solution: * use the metadata API, or * just remove `<Head>` and use meta tags directly in the page
Asian black bear
OK thanks, Will removing <Head> impact on performance?
And how can I use metadata API? can You can please give me an example like how can I moved below tags to metadata API.
<meta
        prefix="og: https://ogp.me/ns#"
        property="og:description"
        content={seo?.description || ''}
      />
      <meta
        prefix="og: https://ogp.me/ns#"
        property="og:image"
        content={seo?.image || ''}
      />
      <meta name="msvalidate.01" content="" />
      <meta name="twitter:card" content="summary" />
Original message was deleted
Asian black bear
Hello @joulev , As you can see in above attached file I'm getting seo data as a props and metadata API applied outside the component so how can I get that seo props inside metadata constant.
@Asian black bear Hello <@484037068239142956> , As you can see in above attached file I'm getting seo data as a props and metadata API applied outside the component so how can I get that seo props inside metadata constant.
joulev
If you use the metadata api, nextjs will process the metadata object and add it to the document for you. Although since you already get the html tags done, I would just remove <Head> here, no need to use the metadata export