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'