Great tipp, I did it exactly like this now.
www.buerge-buergt.ch
Your landing page is still in German, even after clicking on the UK flag. At least on my 4ā phone.
(And while weāre at at, the title, āturnaround managementā is two words. In case you care about these kind of details. You have it correct in the text below that)
Hello Sven and thank you for your feedback. In fact I guess that on mobile device could be a fault, but I care about it. Actually I am abroad and will do it asap. Also thanks for the hint regarding the title Ā«turnaround managementĀ»ā¦ Its really kind of you! Gene
Hi there! I think Iāve done it right, but I canāt find a way to test if the english version of my website gets automatically displayed for english browsers. Could anyone try and tell me if it works? Or even better tell me a way to test it myself (changing my browser language doesnāt seem to work).
My (french) website is at lesfaire-valoir.com and it should display this EN version for appropriate users: lesfaire-valoir.com/en.html [No, I havenāt translated all the portfolio yet.]
No, itās displaying the French version - If I understand you correctly, you havenāt translated the page yet so its all in French anyway. So, I checked the page title at the top of the browser and it isnāt showing the EN extension, only the normal.com. Therefore, it isnāt currently redirecting based on system language. How did you set up the redirect? was it through geo-location or system language. The latter is the best to use because foreigners can be based anywhere in the world, but will usually have their systems set up for their native language.
Thanks for checking @francbrowne! This is all Iāve set up in Sparkle. I canāt find where you can specify the geo-location/system part.
On the english version page settings:
And in the general settings:
Iāve used this solution on a number of websites and it seems to work well in most cases. Add a code widget to the page (only the home page) and add the following code:
<script type= "text/javascript">
var language = window.navigator.language;
if(language == "en-US" || language == "en-āgb || language == "en-CA"){
window.location.href = "www.yoursite.com/āen;
}
else if(language == "de" || language == "de-at" || language == "de-li" || language == "de-ch" || language == "de-lu"){
window.location.href = "www.yoursite.com/de";
}
else if(language == āfrā || language == āfr-beā || language == āfr-chā){
window.location.href = "www.yoursite.com/frā;
}
</script>
What it does.
You would establish all the possible (or most common) language variants that a user may be using. For example, people whoās system is set up in English may have en-gb, en-us, en-au etc. So you add all the relevant variables in your āifā or āelse ifā statements. and direct them all to your English language site. Do the same for your other language variants. You can get a full list of the language codes from HERE.
Next, you would create the language variant websites and publish them to their respective directories on your domain - for example, your English site could be published to yoursite.com/en , whilst your French Language site could be published to yoursite.com/fr .
Finally, you would add the code n the head of your main language index.html page. This is important because you only want to run the code once when someone visits. You donāt want the code to be on every variant of your site as this will cause issues. You may like to consider a splash page containing a manual language switcher just in case, for some reason, a particular browser doesnāt redirect or, javascript may be turned off. In any event, you should place a manual language switching option on each of your site pages (in all variants) so people can get to an alternative language version if they so wish.
2 Likes
Hi @nicolasfolliot,
the language settings are actually only a hint to search engines, which can then direct visitors to the better language for them.
It is not an automated redirection mechanism, and Iād actually recommend against that, because it makes it really hard for someone wanting to check the different language, or receiving a link, to see it. It also needs to be carefully handled vs. the different kinds of bots that visit the page.
Duncan
Thanks for your answer @duncan, that wasnāt clear to me. But @francbrowneās solution works, thanks a lot Frank! Iāll stick with this piece of code for now ā at least until I get issues with botsā¦
I just noticed that your root domain now diverts to the EN version of your site on my browser now - so looks ok. My system is set up for ES but with English language, so I guess your site is now recognising my language setting, as it should.
As Duncan points out, there can be issues with bots trawling the site, but what Iāve found, through trial and error, is that if you have links to and from the various language versions of your site, the bots will index everything. But itās still worth noting that you should set your page language for each page, even if itās only advisory for the bots. You do this through the settings - I guess in your site the base language would be French and you would set up additional base links for the English version.
If you want to avoid the possibility of people not being able to view the French version of your site, this is achieved by duplicating your index page on the French site and remove the language detect code from that page. Name the page something like fr-home.html. Then change your home navigation links to point to that page instead of the index.html. You would then place a language selector link to this pseudo home page on your EN version instead of the index page, This will prevent the language detection from kicking in if someone chooses to view your French site from an English Language system. This is why I recommended having a splash page which would effectively do the same thing. But there is no reason why your French index page cannot act as the splash page.
I setup multilingual sites by building a separate site for each language. Itās the cleanest way for users and SEO.
In the just released iPadOS and iOS 14 Safari has a Beta feature that allows users to translate websites in seven different languages. When a users comes to a website that Safari can translate, an icon appears. The users taps the icon and all text is translated. In this first Beta Safari supports English, Spanish, Simplified Chinese, French, German, Russian, and Brazilian Portuguese. Iāve tested all seven languages and it works exceptionally well, far better than Google. Once out of Beta it will be expanded Worldwide with additional languages. The entire process takes place on device, so us web designers donāt have to do anything special, like separate sites!
macOS Big Sur Safari will get this too.
1 Like
Hi all, I have a 3 languages site, which I made like this: Trance Form. Only works with small not too dynamic sites, because you have too change every language by hand.