Automatic language detection

Develop, Build & Integrate CMS Development
1

Hi,

We set up the automatic language detection for our new website in the site header. If a customer is visiting fairtiq.com/ they are supposed to be redirected to either the German, French or English version, based on their browser language. (FAIRTIQ - The easiest public transport ticket., FAIRTIQ - Die einfachste Fahrkarte., FAIRTIQ - Le billet le plus simple.)

The language detection seems to work, but as you can see in the log below it fetches the 404 page in the background, which might have negative impact on SEO or other.

461×266 33.7 KB

Is there a way to avoid this? Did we miss anything?

HTML code:

<script>
function redirectToPreferredLanguage() {
 if (window.location.pathname !== '/') {
 return;
 }
 const lang = navigator.language;

 const languageConfig = {
 de: '/de',
 fr: '/fr',
 en: '/en'
 };

 const defaultLanguage = 'de';
 const userLanguage = Object.keys(languageConfig).find(language => lang.includes(language));
 const redirectLanguage = userLanguage 
 ? languageConfig[userLanguage] || languageConfig[defaultLanguage] 
 : languageConfig[defaultLanguage]

 window.location = languageConfig[userLanguage] || languageConfig[defaultLanguage];
}
redirectToPreferredLanguage();
</script>

Thanks for your help.

2

Hi @MartinaWi. Thanks for your question and for including your details. I have a question — have you tried adding a few console logs to your code to debug the path resolution?

  • The detected browser language (lang)
  • The user’s language as determined by the script (userLanguage)
  • The final URL to which the user will be redirected (redirectLanguage)
  • Exampleconsole.log('Browser Language:', lang);​

I’d also like to invite some of our SEO experts to the converstaion — hey @Phil_Vallender @louischausse @MatthiasWeber, do you have any additional suggestions for @MartinaWi?

Thank you! — Jaycee