0

tl;dr

Next.js 13's /app router's layout and page routing changes how we add content to the <head>. How can I add a schema script to each page? Next.js will automatically compile <head> tags placed in any layout or page into a single <head>.

The goal

Just like in any website with great SEO, I want to include a schema script in the head of each page.

The history

Normally, this would be as easy as writing it in the <head> like so:

<!-- index.html -->
<head>
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      // ... the rest
    }
  </script>
</head>

Then, with the Next.js /pages directory it was a little different. It always felt weird to me to have to use the dangerouslySetInnerHTML attribute, but at least it worked.

// index.tsx
import Head from 'next/head'
export default function Page() {
  return (
    <Head>
      <script id="schema" type="application/ld+json" dangerouslySetInnerHTML={{__html: `
        {
          "@context": "https://schema.org",
          // ... the rest
        }
      `}} />
    </Head>
  )
}

The issue

Now with the introduction of the /app router, we've got great, new, simplified ways to set metadata, without having to directly import the <head> through next/head. In fact, the next/head component shouldn't be used in the /app router.

So the question becomes...

How do we access the <head> on a page-per-page basis?

I was hoping the Next.js team would have already thought about this, and added schema to the new metadata variable, or even it's own variable, but they don't seem to have plans to do this as far as I can tell.

I tried adding a <head> to the page and unfortunately, it doesn't properly merge into the <head>. So far the only thing I can thing to do would be to add the schema to each layout, but what a hassle that would be to have an individual layout for each page.

Any ideas are welcome.

andrilla
  • 339
  • 1
  • 13
  • Most likely this feature is not of high priority for Next.js team because JSON-LD data can be rendered anywhere in the page body - https://stackoverflow.com/questions/28687653/schema-org-json-ld-where-to-place ; and in fact that’s what Next.js documentation recommends - https://nextjs.org/docs/app/building-your-application/optimizing/metadata#json-ld – Igor Danchenko Jul 20 '23 at 21:51
  • @IgorDanchenko Thank you! I didn't realize it could go anywhere inside the body too. All of the documentation I've seen on schemas has always said put it in the ``. That's super helpful. – andrilla Jul 22 '23 at 14:48
  • Not everything can go anywhere. It should have been a priority before shoving this unfinished version down our throats. – Marek Maurizio Aug 23 '23 at 12:09
  • @MarekMaurizio If you have a better solution, feel free to share. – andrilla Aug 25 '23 at 13:12
  • @andrilla gladly, at the moment I use the pages router. – Marek Maurizio Aug 28 '23 at 07:23
  • @MarekMaurizio Right. What a great solution to a question regarding the app router. – andrilla Sep 01 '23 at 16:31

0 Answers0