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 (2)
Since useRouter is a hook, I assume these link tags are only rendered in the client side, and not server side.
So basically, this gives zero value for SEO.
You should really add these tags to the head on server side.
Correct me if I'm wrong here...
You are wrong,
useRoutergets executed server-side, and provides correctasPath