Login/Register
How to set canonical tag in Nextjs 13
Asked Answered
Solved next.jsmeta-tagsnext.js13
E

4

19

How do I set a canonical tag in Nextjs 13?

I used to use the <head> tag, but now it seems deprecated and the generateMetadata has no information about the canonical meta tag.

Epicardium answered 5/4, 2023 at 9:53 Comment(0)
S
12

Per the last NextJS 14.2, you need to define the alternate directly in your root layout.tsx to get automatically generated canonical for all your URLs according to the format.

export const metadata: Metadata = {
    metadataBase: new URL(`https://www.mywebsite.com`),
    title: {
        template: '%s | My Website',
        default: ` My Website`,
    },
    alternates: {
        canonical: './',
    }
};

It's important to have the './'.

You can find all the URL formats here: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#url-composition

Sheepfold answered 18/4, 2024 at 14:34 Comment(2)
On NextJS 14.2, it does, ?ok=ok will be removed. – Sheepfold
You are correct, I was using v14.1.3, but the issue was fixed in v14.2.0. Commit here: github.com/vercel/next.js/pull/63843 – Yokefellow
E
42

I figured out a way:

export async function generateMetadata({
  params,
}: {
  params: { slug: string };
}) {
  const { slug} = params;
  const siteURL = 'https://example.com';

  return {
    title: `Your title`,
    description: `Your meta description`,
    alternates: {
      canonical: `${siteURL}/yourSlug/${slug}`,
    },
  };
}

Edit: Check the comments if you don't want to provide the absolute path for the canonical URL.

Epicardium answered 5/4, 2023 at 9:53 Comment(1)
If you've provided metadataBase in your root layout, then you do not need to provide absolute path for the canonical URL. Next.js will generate it for you. – Smelly
S
12

Per the last NextJS 14.2, you need to define the alternate directly in your root layout.tsx to get automatically generated canonical for all your URLs according to the format.

export const metadata: Metadata = {
    metadataBase: new URL(`https://www.mywebsite.com`),
    title: {
        template: '%s | My Website',
        default: ` My Website`,
    },
    alternates: {
        canonical: './',
    }
};

It's important to have the './'.

You can find all the URL formats here: https://nextjs.org/docs/app/api-reference/functions/generate-metadata#url-composition

Sheepfold answered 18/4, 2024 at 14:34 Comment(2)
On NextJS 14.2, it does, ?ok=ok will be removed. – Sheepfold
You are correct, I was using v14.1.3, but the issue was fixed in v14.2.0. Commit here: github.com/vercel/next.js/pull/63843 – Yokefellow
S
0

Set the default tags in the layout.tsx file in the app directory. Then use the metaDataBase to create a base url. Then with the alternates property you should be able to create canonical URLs for different routes of your website.

 alternates: {
    canonical: "/",
  },
Siren answered 31/10, 2023 at 6:32 Comment(0)
C
-3
<Head>
  <link rel="canonical" href="https://www.website.com/" />
</Head>
Constituency answered 3/8, 2023 at 3:52 Comment(1)
This method is not preferred in nextjs 13 use generateMetadata or simply define an static metadata object – Belong

© 2022 - 2025 — McMap. All rights reserved.