Adding a tag to using Next.js13.3 with appDir enabled

Question

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.

feedpanda · Accepted Answer

I think the document covered how to add <link rel="..."> tags, you just need to follow their predefined way.

https://nextjs.org/docs/app/api-reference/functions/generate-metadata#manifest https://nextjs.org/docs/app/api-reference/functions/generate-metadata#icons

// in your app/page.tsx export metadata
export const metadata = {
  manifest: 'https://nextjs.org/manifest.json',
  icons: {
    icon: '/icon.png',
    shortcut: '/shortcut-icon.png',
    apple: '/apple-icon.png',
    other: {
      rel: 'apple-touch-icon-precomposed',
      url: '/apple-touch-icon-precomposed.png',
    },
  },
};

export default function Page() {
    ... // your code here
}

<link rel="manifest" href="https://nextjs.org/manifest.json" />
<link rel="shortcut icon" href="/shortcut-icon.png" />
<link rel="icon" href="/icon.png" />
<link rel="apple-touch-icon" href="/apple-icon.png" />
<link
  rel="apple-touch-icon-precomposed"
  href="/apple-touch-icon-precomposed.png"
/>

verified with [email protected]

Tochi Bedford · Answer

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.

Adding a <link> tag to <head> using Next.js>13.3 with appDir enabled

Tags:

seo

next.js

server-side-rendering

next.js13

villasv

2 Answers

feedpanda

Tochi Bedford

Recent Activity

Donate For Us