[languageAlternates] hreflang rendered with wrong case (hrefLang)

[AntoineKM]

Reopening this issue: #656

<link rel="alternate" hrefLang="fr" href="https://example.com/fr" />

Should be:

<link rel="alternate" hreflang="fr" href="https://example.com/fr" />

[nyedidikeke]

@AntoineKM Can you provide a complete information on how to reproduce the current challenge?

[AntoineKM]

@AntoineKM Can you provide a complete information on how to reproduce the current challenge?

sure

this is what i've done:

const Head: React.FC = () => {
  const { locales, asPath } = useRouter();

  const languageAlternates =
    locales &&
    locales.map((locale) => ({
      hrefLang: locale,
      href: `${APP.URL}/${locale}${asPath}`,
    }));

  return <NextSeo languageAlternates={languageAlternates} />;
};

[AntoineKM]

Some news ?

[rnbrady]

On #656 @garmeeh wrote:

Hey @romaincointepas can you provide an recreation of this? Just checking here and for me it renders correctly.

The best way to reproduce is by view raw output of cURL as some browsers (e.g. Chrome) will internally apply a fix by lowercasing the attribute. Even passing the out output of cURL through tidy will do this.

Here's an example that shows the attribute present with incorrect case:

curl -s 'https://www.yourbusinessnumber.com/' | grep -oi 'hreflang'

Seems to be an upstream issue with React since the JSX <link> tag only accepts hrefLang as attribute, which is what next-seo is using.

[rnbrady]

Confirmed this is an upstream issue facebook/react #12403.

Their view is that HTML is not case sensitive so there's no reason to lowercase the attribute names.