Creating link tags to locales for SEO in NextJS

#i18n #seo #nextjs #javascript

This wasn't hard but I didn't find good search results for it so here's a quick tip.

I'm using next-translate with nextjs for localization but this technique will probably work with other localization frameworks like next-i18next.

in pages/_app.ts

import Head from 'next/head';
import type { AppProps } from 'next/app';
import {useRouter} from 'next/router';

const supportedLocales = ['ar-ye', 'en-us', 'fr'];

export default function MyApp({ Component, pageProps }: AppProps): ReactElement {
  const {asPath} = useRouter();
  return (
    <>
      <Head>
        {supportedLocales.map(loc =>
          <link rel="alternate" hrefLang={loc} href={`/${loc}${asPath}`}/>)}
      </Head>
      <Component {...pageProps} />
    </>
  );

}

I hope this helps google find your translated pages!

Top comments (3)

alaa sufi • Mar 25 • Edited

thank you
I edit the code:

add key to loop
use PUBLIC_SITE_URL
add condition to '/' path

 {['ar', 'en', 'nl'].map(loc =>
            <link 
                key={`/${loc}${asPath}`}
                rel="alternate" hrefLang={loc}
                href={`${process.env.NEXT_PUBLIC_SITE_URL}/${loc}${asPath === '/' ? '' : asPath}`} 
            />)}

then check the result using the website
hreflang Tags Testing Tool