Next.js Discord

Discord Forum

[SEO] How to use metadata to populate hreflang links for subpages?

Unanswered
Wilson's Plover posted this in #help-forum
Open in Discord
Wilson's PloverOP
On my App router app, I need to generate hreflang <link> tags in my <head>, for SEO purposes. This website is localized in English and French.
On the metadata doc page, there is the alternates feature which seems to solve my problem, but there is only an example for the root page. On subpages, the generated <link>s still target the root page.

For example: 
export const metadata = {
  alternates: {
    canonical: 'https://example.com',
    languages: {
      'en': 'https://example.com/en',
      'fr': 'https://example.com/fr',
    },
  },
}

This generates the following <link>s in the <head> of the root page (https://example.com): 
<link rel="canonical" href="https://example.com" />
<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr" />


BUT when I am on the page https://example.com/restaurant, I have again:
<link rel="canonical" href="https://example.com" />
<link rel="alternate" hreflang="en" href="https://example.com/en" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr" />

although I should have: 
<link rel="canonical" href="https://example.com/restaurant" />
<link rel="alternate" hreflang="en" href="https://example.com/en/restaurant" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/restaurant" />


Maybe I need to generate this <link>s by hand in my layout (with a Client Component, as usePathname is not available Server-side)? If yes, what the utility of metadata.alternates besides one-page websites?

Thanks for your answers! ^^

0 Replies