How to make a dual languages website?

Question

Requirements are:

1.The text change should not affect the design layout(meaning if the text gets really long or short, it is still a good layout with other element around the text. This relates to requirement #3 );

2. Good SEO for both languages(meaning the translation text should not be stored separately somewhere else);

3. Changes to the design should not be made twice (meaning one html page for both language).

Answer 1

See if this can help you.
.
https://www.google.com/amp/s/searchengineland.com/seo-for-multi-language-websites-how-to-speak-your-customers-language-295092/amp
.
Basically, if you want to do language switching in the same page, you'll need to build content data object for each language.
.
Once change language is selected, all contents will change to the selected language.
.

https://code.sololearn.com/WSCfxWL6rVpN/?ref=app

Answer 2

This is not so easy, I did some research and turns out there is no great solution. My best gues is:

✴ Do the translations yourself, most reliable. (Do not use auto translate of google)
✴ Make different versions, I did this, a lot of work..

Or check this

https://youtu.be/PaJrDAmrOB4

Or do it with editors

https://www.websitebuilderexpert.com/building-websites/how-to-build-a-multi-language-website/

Answer 3

Gordon is always trying to help others, the ones downvoting are probably not familiair with him.🤔 Anyway, downvoting someone who is trying to help is not helping anyone.☝

Answer 4

🤔
If we need to fit search engine and put contents in HTML,
we can use dataset.
for example data-lang attributes, and then we toggle the display or visibility with JS.

Answer 5

Hi Robin, the video you suggested seems like a good sulotion. I guess the downside is putting the second language translation in the scripts, which is not good for SEO, I guess. Any thought on that?

Answer 6

Kun Wu I got an idea from the code of Gordon, CONTENT is seperate now.
https://code.sololearn.com/WRNoyi4O7lDF/?ref=app

Answer 7

And also. with SEO you mean search engine optimization?
I think if use the semantic tags well this wil be ok.

I use the hidden atribute to hide the content, this isn't very backwards compatible..

In css visibility: hidden; can be used this has better backwards compatibility, I will check this later
}

Answer 8

Go through Github

Answer 9

I appreciate Gordon's effort to try to help. But i don't see how the script will handle the SEO challenge.

Answer 10

Hmm getting the translation apart from the script would be better I agree, this is not great for maintaining content, script should be seperate from content, maybe Gordon knows how to do this 🤔any thoughts Gordon?

Answer 11

https://code.sololearn.com/Wj2Rsws11y6l/?ref=app

Answer 12

And here is my Css version,
it will have better browser compatibility👌

https://code.sololearn.com/WE0n7j5TuSuG/?ref=app