Question 22505 in SEO Question posted in
Some basic information to get you started with this can be found here.

How to change a HTML page into a different language? – SEO

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!

Tags:

2

Answers


  1. 0

    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 pick 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>

    Using CSS variables:

    function changelang(){
var currentlanguage = getComputedStyle(document.body).getPropertyValue("--language")
if (currentlanguage == 'data-en'){
document.documentElement.style.setProperty('--language', 'data-du')
} else {
document.documentElement.style.setProperty('--language', 'data-en')
}
}
    :root {
--language:data-en;
}
.bilanguage::after {
  content: attr(var(--language));
}
    <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>
    Login or Signup to reply.
  2. 0

    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 class="lang lang-en">My english text</p>
  <p class="lang lang-de">Mein deutscher Text</p>
  <p class="lang lang-it">Il mio testo</p>
  <p class="lang lang-es">El mi texto</p>
  <p class="lang lang-zh">我的文字</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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search