Published on

Browser language based redirects with Netlify

Before releasing the website you are currently browsing, I maintained the subdomains lab.julienverneaut.com and blog.julienverneaut.com to publish front-end experiments and blog articles respectively.

I wanted to unify these 2 platforms into a single site during its redesign in order to allow my visitors to discover my other content once easily.

In the case of my laboratory lab.julienverneaut.com, the subdomain still exists but is now only used to host independent pages that are then displayed in the experiments section of this site embedded in iframes.

Redirecting witn the _redirects file

So all I had to do was redirect users from the old lab listing page to my current site with a Netlify-side redirect rule defined in a _redirects file.

https://lab.julienverneaut.com https://www.julienverneaut.com/experiences 301!

Everything was working great until I noticed in my analytics that most users coming from my lab were bouncing quickly once they arrived on this new site.

Since the lab had a few backlinks on American sites, visitors who were redirected to my new site found themselves on a French site and quickly left the page.

Language based redirections

To solve the problem, Netlify offers additional options to redirect users based on their country or language.

So I added a second redirect rule with a language condition fr which redirects to the French version of this site.

https://lab.julienverneaut.com https://www.julienverneaut.com/experiences 301! Language=fr
https://lab.julienverneaut.com https://www.julienverneaut.com/en/experiments 301!

From now on, users are redirected to the English version by default, unless they speak French in which case they will land on the site in French.