Proper links in language switcher

[jdahdah]

In the example starter, you have an anchor link without an href attribute in the language switcher.

const Language = () => {
  return (
    <div>
      <IntlContextConsumer>
        {({ languages, language: currentLocale }) =>
          languages.map(language => (
            <a
              key={language}
              onClick={() => changeLocale(language)}
            >
              {languageName[language]}
            </a>
          ))
        }
      </IntlContextConsumer>
    </div>
  )
}

This is problematic for a number of reasons, including accessibility and SEO, since there is no proper link to the other language version. How would I go about rewriting this to create a proper link (perhaps by using the Link component)?

[sn3h]

I've just changed it to button. For accessibility and SEO use this https://support.google.com/webmasters/answer/189077. The question then would be how to add all the language links to head somehow nicely.

[jdahdah]

@sn3h Thanks for the tip, adding alternate links to the header is definitely a good idea. I'd still like to have proper a links and think that should always be the default way to link between pages as a non-JS fallback.

[sn3h]

well, then I would suggest using intl object from IntlContextConsumer. like here : https://github.com/wiziple/gatsby-plugin-intl/blob/master/src/link.js .. you always have language and original route to create correct path .. anyway don't forget about adding attribute lang="{language}" to a[href].

[orioltf]

@jdahdah when inspecting the source code from the Link.js component, I've noticed that you could basically use the language attribute in order to force the redirection to another language:

import React from 'react'
import { Location } from '@reach/router'
import { Link } from 'gatsby-plugin-intl'

// Provably somewhere else and imported in the `LanguageSwitcher` component
const supportedLanguages = [
	{
		label: `English`,
		languageTag: `en-us`,
	},
	{
		label: `Español`,
		languageTag: `es-es`,
	},
]

const LanguageSwitcher = () => {
	// Create a string to allow a regex replacement for SEO hreflang links: https://support.google.com/webmasters/answer/189077
	const supportedLocaleRegexGroups = supportedLanguages
		.map(language => language.languageTag)
		.join(`|`)

	return supportedLanguages.map(language => {
		return (
			<Location>
				{({ location }) => (
					<Link
						language={language.languageTag}
						to={`${location.pathname.replace(new RegExp(`^/(${supportedLocaleRegexGroups})`), ``)}`}
						key={`href-lang-${language.languageTag}`}
						lang={language.languageTag}
					>
						{language.label}
					</Link>
				)}
			</Location>
		)
	})
}

export default LanguageSwitcher

As you can see I get the location from @reach/router, but I think you can get the idea and reuse it with <IntlContextConsumer>.

The important bit is that you can control which language you want to link to by passing the wanted language in the language prop in the <Link /> component from 'gatsby-plugin-intl'