I have a problem because my generated HREFLANG tags are not seen by the SEO checker tools such as https://technicalseo.com/tools/hreflang/. I am generating these in my language switcher component inside the next/head component.
I assume the problem is because I use useEffect() to built up hreflang urls?
export default function LanguageSwitcher() {
useEffect(() => {
// I am building array of hreflang URL's here from which I then generate the HTML
}
return (
<Head>
{
languageMapper.map((l) => (
<link key={l.locale} rel="alternate" hrefLang={l.locale} href={l.url} />
))
}
</Head>
)
}
Will this be ok for Google, or should I fix it?
Check how your hrefLang attribute renders on the page. If it hrefLang with upper L, search engines won't see it. Rename it to hreflang, and yes it will drop you a warning about invalid DOM property, but i haven't found solution for that. I'll edit this message whenever i find right answer.