Auto detect browser preferred language

Hey there !

Once thing that convinced be to use Hugo was its ability to natively handle multilingual websites. However, I ran into a big limitation.

In Hugo, it seems that you can only set a global default language (e.g. English). Then, if visitors go to my-website.com, they will all be redirected to my-website.com/en/. Even if their browser indicates that they prefer French !

I found no way to work around the issue within hugo : when multilingual is activated, the root index.html does not seem to be built from the template. So I didn’t find a way to edit it to put my own code. The only solution was found was to edit the index.html file after it’s generated, which is ugly.

Is there another way of getting language detection to work with hugo ? Are you considering adding a new option in the conf to choose this behaviour instead of a global default language ?

Thanks !

This is something that Hugo cannot do. All that Hugo does is generate static HTML (and optionally other file types). Hugo isn’t really a server (although we do have the hugo server command, but that’s primarily for local development).

You’ll likely need to use server-side software (perhaps Apache?) or client-side code (JavaScript) to determine the language of the browser, and whether that visitor should be directed to the English or French website.

There is, by the way, a configuration variable named defaultContentLanguageInSubdir in case you don’t want your primary language (e.g., English) generate in the /en/ folder. (See the configuring variables). But that still won’t solve the issue of ‘Hugo does not look at which language the browser uses’.

Thank you for your quick answer.

This is something that Hugo cannot do.

Ok, I understand that the feature is out of your scope.

You’ll likely need to use server-side software (perhaps Apache?) or client-side code (JavaScript)

Except that with the current behaviour, there doesn’t seem to be a place where I could put my JS code :frowning:. Hugo generates a global index.html page that contains <meta http-equiv="refresh" content="0; url=http://my-website/en" />. If I could put my own JS code in this page, I’d be all set.

But I didn’t find any way of doing it. Is there any way I can set up a layout, or anything, to change the content of this generated file ?

Thanks !

That’s not something Hugo does by default, if I understand correctly. Do you have the defaultContentLanguageInSubdir configure variable set in your config.toml file? If you set that variable to true, then Hugo will put the default language in a subdirectory (/en/) which probably also means a redirect from / to /en/ is needed.

You may otherwise also post all your settings in config.toml, in case I’m mistaken and some other setting can cause this.

It’s an old thread, but given the relevance in google search it deserves a proper closing.
In fact, there’s a way to customize the top level index.html where we have the blind redirect: alias

Create a layout/alias.html and add your custom js lang detection and redirection logic.
(hat tip: https://nanmu.me/en/posts/2020/hugo-i18n-automatic-language-redirection/)

Allez les gars, c’est parti! :slight_smile: