Question 160284 in SEO Question posted in
Some basic information to get you started with this can be found here.

How do I add a tag to using Next.js 13.3 with appDir enabled?

The documentation for using appDir on Next.js 13.4 states the following:

Step 3: Migrating next/head

In the pages directory, the next/head React component is used to manage HTML elements such as title and meta . In the app directory, next/head is replaced with the new built-in SEO support.

But the next/head component was able to add non-SEO tags too. In particular, I want to add <link rel="..."> tags. How does one accomplish this if the metadata mechanism doesn’t seem to support link tags (just custom <meta> tags)?

I can’t add the tags directly to the root layout because there are tags that are only supposed to live on the website home page. I could conditionally add the tags to the root layout if the layout was aware of the current route but it doesn’t seem to work with SSG.

Tags:

2

Answers


  1. 0

    What about file based metadata?

    Once a file is defined, Next.js will automatically serve the file
    (with hashes in production for caching) and update the relevant head
    elements with the correct metadata, such as the asset’s URL, file
    type, and image size.

    You MUST add a global.css file in app folder, … ad import it inside your layout. This is working for me.

    .redtext { color: red;}

    import './foo.css'

export const metadata = {
    title: 'mamma mia'
}

export default function RootLayout({ children }) {
    return (
        <html lang="en">
            <body>
                <div className="redtext">test rosso</div>
                <div id="root-container">{children}</div>
            </body>
        </html>
    )
}
    Login or Signup to reply.
  2. 0

    Trying Next 13 for the first time right now too, and in the default layout.tsx file, I placed my link tags like so:

    <html lang="en">
  <head>
    <link rel="preconnect" href="xyz.com" />
  </head>
  <body >{children}</body>
</html>

    and my link tags show up correctly in the browser. This also seems to work correctly with the exported metadata object, so I left the rest of the metadata tags in the new recommended format.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search