How to change a HTML page into a different language?-CodePudding

My website is currently in English, and I would like to offer a possibility to read it in Dutch. So I'm translating my website and there will be 2 different languages available.

It's built with HTML, CSS and JS (those are my languages right now, JS is not that strong yet). The website doesn't change often, and I'm not writing a blog or anything similar for now.

What would be the best approach in translating them?
Will there be problems with SEO and duplicated content if I upload
the same page content in a different language?
How do I write it in HTML?
Is there a way to automatically detect the right language?

Thanks!

CodePudding user response：

There are many ways to do that. One of these is to keep both text contents inside the HTML tag with data-something then later change it using Javascript CSS when necessary.

var currentlanguage = 'en'
function changelang(){
if (currentlanguage == 'en'){
document.head.insertAdjacentHTML('beforeend', '<style>.bilanguage::after {content: attr(data-du);}</style>');
currentlanguage = 'du'
} else {
document.head.insertAdjacentHTML('beforeend', '<style>.bilanguage::after {content: attr(data-en);}</style>');
currentlanguage = 'en'
}
}

.bilanguage::after {
  content: attr(data-en);
}

<h1 class='bilanguage' data-en='Title' data-du='Titel'></h1>
<p class='bilanguage' data-en='The quick brown fox jumps over the lazy dog.' data-du='De snelle bruine vos springt over de luie hond heen.'></p>
<button type="button" class='bilanguage' onclick='changelang()' data-en='Change Language' data-du='Taal wijzigen '></button>

CodePudding user response：

Level entry internationalization is achieved by using style properties:

function changeLanguage(languageCode) {
    Array.from(document.getElementsByClassName('lang')).forEach(function (elem) {
        if (elem.classList.contains('lang-'   languageCode)) {
             elem.style.display = 'initial';
        }
        else {
             elem.style.display = 'none';
        }
    });
}

// select handler
const selector = document.getElementById('langSelector');
selector.addEventListener('change', function (evt) {
    changeLanguage(this.value);
});

// detect initial browser language
const lang = navigator.userLanguage || navigator.language || 'en-EN';
const startLang = Array.from(selector.options).map(opt => opt.value).find(val => lang.includes(val)) || 'en';
changeLanguage(startLang);

// updating select with start value
selector.selectedIndex = Array.from(selector.options).map(opt => opt.value).indexOf(startLang)

// fill "The selected language is:"
document.getElementById('browserLang').innerText = lang;
document.getElementById('startLang').innerText = startLang;

<div>
  <p >My english text</p>
  <p >Mein deutscher Text</p>
  <p >Il mio testo</p>
  <p >El mi texto</p>
  <p >我的文字</p>
</div>
<select id="langSelector">
    <option value="en">English</option>
    <option value="it">Italian</option>
    <option value="es">Espanol</option>
    <option value="de">Dutch</option>
    <option value="zh">Chinese</option>
</select>
<div>
<p>Your browser language is: <b id="browserLang"></b></p>
<p>The selected language is: <b id="startLang"></b></p> 
</div>

Duplicating content does not impact SEO, in particular if you give some keywords. Also SEO can be language dependent, but surely having differentiated content for different laguages improves the research: in the snippet simple example you can find the site by searching either "My English text" or "Mein deutscher Text" or any other content.

For a more deep approach i suggest to use i18n (MDN) API that are broadly supported in latest browsers