Localization: multilingual website
Hey all!
I want to build my personal website in three languages I speak without using translation services and I am not sure what the best approach would be. Is there a good guide on the web I could follow? I tried googling and searching YT, but couldn't find anything satisfactory. Thanks!
P.S. I don't know which tag fits here.
17 Replies
The simplest way is to have three different websites: one for each language, and have them be subdomains of the main site.
For example,
https://en.zenon.com for the English version, https://fr.zenon.com for the French version, and https://cn.zenon.com for the Chinese version.
You'll find sites like Wikipedia use this approach (though they probably use a translation service so they don't have to manually translate each page).What I have done is that I have three language json files with the same key for a given word. On my page I have an attribute called lang with the word key in there. If the user clicks on the desired language I fetch the corresponding json file, iterate over it and replace every word on the html which has a lang attribute with the key specified. I will write you an example soon.
Here is an example in codepen
That is a simplified example. You can fetch the language json from your backend or from a CDN. It's up to you
That's an interesting approach đź‘Ť
One possible downside I can see is that it wouldn't be particularly SEO friendly for any languages other than the default language. But of course this might not be an issue/concern.
One possible downside I can see is that it wouldn't be particularly SEO friendly for any languages other than the default language. But of course this might not be an issue/concern.
Nice, thanks! What are some other approaches. So it can be done by having multiple sites and by doing JS. Are there other ways? Are there any comprehensive tutorials that cover the possibilities and their pros and cons?
I have just one site and store all the texts in a database. The code detects the user language from the url and selects the correct text from the database.
Is that SEO friendly?
Yes. You have a unique url for each language and, as the text is loaded on the server, there it doesn’t rely on JavaScript, so the bots can index each URL.
Cool, thanks a lot.
Having an actual url is important for seo as it also allow you to add hreflang tags
Cool, I didn't even know about these, now I do. Thanks!
Just wanted to follow up with this as I don't know a whole lot about it, but wouldn't you need a canonical url as well? Aren't canonical urls for pages that can have multiple different versions but you specify what is the main page?
Canonical URL’s are for pages that may have multiple urls pointing to the same content. The canonical url defines which url is the “correct” one (ie the one you want the bots to index. However this is different to language urls, especially if you want each language url to be indexed in its own right. I suppose if you consider your alternative languages as less important this might not matter but if you want your page to work well in all the languages that you have it you need to use the hreflang tags. And each of those will have its own unique canonical url.
Ah I see! Thanks for clearing that up for me 🙂
Yeah, it is better to do it at server side. Languages can still be in database and not in a file from memory. And you can ofc do this exact same thing at the backend with server side rendering.
I see. So, if I want to do it the best way possible, I either have to have multiple sites with the content already in the HTML, or I have to do it on the back-end and not in the client for SEO purposes. Thanks a lot all.