Set Canonical Tag in NextJS 13 App Router

With the NextJs 13 change where App Router and therefore Meta Data functions should be used the recommendation is to make use of the alternates property by setting a canonical property with the value you need. 

The following is an example of setting the canonical tag for a page as "/"

export const metadata: Metadata = {
    alternates: {
        canonical: '/',
    }
}

If this is applied in the following structures page file: app/page.tsx then only the index page would have this canonical value added within the header.

 

Testing

You can test this by viewing the source of the route and searching for canonical