다국어 사이트 언어 리디렉션 설정하기 (자바스크립트)

워드프레스에서는 플러그인을 사용하거나 멀티사이트로 다국어 사이트를 만들 수 있습니다. 인기 다국어 번역 플러그인인 WPML에는 사용자 브라우저의 언어를 감지하여 해당 언어로 리디렉션시키는 기능이 있습니다. 멀티사이트로 다국어 사이트를 구현하는 경우 워드프레스 멀티사이트 언어 전환기 플러그인을 사용하면 브라우저 언어를 감지하여 리디렉션시키는 기능이 제공되기도 합니다.

플러그인에서 제공하는 브라우저 언어 리다이렉트 기능이 작동하지 않거나 생각처럼 기능하지 않는 경우, 혹은 워드프레스가 아니더라도 언어별 사이트를 제작한 후에 브라우저 언어를 감지하여 해당 언어로 리디렉션시키려는 경우 이 글에서 소개하는 자바스크립트 코드를 사용하여 다국어 사이트 리디렉션을 설정할 수 있습니다.

자바스크립트(JavaScript)로 다국어 사이트 언어 리디렉션 설정하기

워드프레스 멀티사이트 다국어 리디렉션 설정하기

방문자가 랜딩 페이지를 방문했을 때 랜딩 페이지에서 브라우저 언어를 감지하여 각 언어 사이트로 리다이렉션시키는 것은 별로 어렵지 않습니다. 예를 들어, 다음과 같은 자바스크립트 코드를 적절히 응용할 수 있습니다.

function language () {
    var nav = window.navigator,
    browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
    i,
    language;

    // support for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
      for (i = 0; i < nav.languages.length; i++) {
        language = nav.languages[i];
        if (language && language.length) {
          return language;
        }
      }
    }

    // support for other well known properties in browsers
    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
      language = nav[browserLanguagePropertyKeys[i]];
      if (language && language.length) {
        return language;
      }
    }

    return null;
  };
function checker () {
  const whatIs = language();
  if (whatIs === "ko-KR") {
    window.location.href = 'https://example.com/ko/';
     }
  else if (whatIs === "ja-JP") {
    window.location.href = 'https://example.com/ja/';
    }

.....

  }
  
}
checker()

브라우저 언어 코드는 https://gist.github.com/wpsmith/7604842에서 확인할 수 있습니다.

많은 사이트가 영어 사이트로 접속할 경우 언어를 감지하여 각 언어 버전으로 리디렉션시키고, 다시 영어 사이트로 이동하면(재방문 시) 리디렉션시키지 않도록 설정되어 있습니다. 간혹 모든 언어 사이트에서 브라우저 언어를 감지하여 각 언어 사이트로 리디렉션하도록 요구하는 경우도 있습니다. 그런 경우 SEO에 좋지 않다고 합니다.

영어 사이트(example.com)로 접속 시 브라우저 언어를 감지하여 각 언어 버전의 사이트(예: 한국어의 경우 example.com/ko)로 리디렉션시키고 싶은 경우 다음과 같은 코드를 참고할 수 있습니다.

function language () {
    var nav = window.navigator,
    browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'],
    i,
    language;

    // support for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
      for (i = 0; i < nav.languages.length; i++) {
        language = nav.languages[i];
        if (language && language.length) {
          return language;
        }
      }
    }

    // support for other well known properties in browsers
    for (i = 0; i < browserLanguagePropertyKeys.length; i++) {
      language = nav[browserLanguagePropertyKeys[i]];
      if (language && language.length) {
        return language;
      }
    }

    return null;
  };
function checker () {
  const whatIs = language();
  
  const localWhat = sessionStorage.getItem('lang');
if (localWhat === "Y") {
return !1;
}
else if (whatIs === "ja-JP") {
		window.location.href = 'https://example.com/ja/';
		sessionStorage.setItem('lang', 'Y');
  }

  else if ((whatIs === "it-IT") || (whatIs === "it-CH")) {
		window.location.href = 'https://example.com/it/';
		sessionStorage.setItem('lang', 'Y');
  }
  
    else if (whatIs === "ko-KR") {
		window.location.href = 'https://example.com/ko/';
		sessionStorage.setItem('lang', 'Y');
  }
  
    else if ((whatIs === "de-DE") || (whatIs === "de-AT") || (whatIs === "de-CH") || (whatIs === "de-LI") || (whatIs === "de-LU")) {
		window.location.href = 'https://example.com/de/';
		sessionStorage.setItem('lang', 'Y');
  }
  
      else if ((whatIs === "es_ES") || (whatIs === "es-AR") || (whatIs === "es-BO") || (whatIs === "es-CL") ||  (whatIs === "es-CO") ||  (whatIs === "es-CR") || (whatIs === "es-DO") ||  (whatIs === "es-EC") ||  (whatIs === "es-GT") || (whatIs === "es-HN") ||  (whatIs === "es-MX") ||  (whatIs === "es-NI") ||  (whatIs === "es-PA") ||  (whatIs === "es-PE") || (whatIs === "es-PR") ||  (whatIs === "es-PY") ||  (whatIs === "es-SV") ||  (whatIs === "es-UY") ||  (whatIs === "es-VE")) {
		window.location.href = 'https://example.com/es/';
		sessionStorage.setItem('lang', 'Y');
  }
  
        else if ((whatIs === "fr-FR") || (whatIs === "fr-BE") || (whatIs === "fr-CA") || (whatIs === "fr-CH") ||  (whatIs === "fr-LU") ||  (whatIs === "fr-MC")) {
		window.location.href = 'https://example.com/fr/';
		sessionStorage.setItem('lang', 'Y');
  }
  
        else if (whatIs === "ru-RU") {
		window.location.href = 'https://example.com/ru/';
		sessionStorage.setItem('lang', 'Y');
  }
  
}
checker()

위의 코드는 영문으로 워드프레스 사이트를 만든 후에, 멀티사이트로 구성하여 7개 언어(한국어, 일본어, 독일어, 스페인어, 프랑스어, 이탈리아어, 러시아어)를 추가한 다국어 사이트에 사용하기 위해 자바스크립트를 잘 아는 분의 도움을 받아 만든 것으로, 실제 적용했던 코드를 그대로 올렸습니다. 코드를 랜딩 페이지에만 적용하거나, 영어 사이트에만 적용하도록 하면 원하는 대로 작동할 것입니다.

상황에 따라 적절히 수정하여 활용할 수 있을 것입니다.

만약 모든 언어 사이트에서 브라우저 언어를 체크하여 해당 언어 사이트로 리디렉션시키려는 경우에는 조금 복잡하게 됩니다.

예를 들어, 독일어 브라우저로 한국어 사이트를 방문하게 되면 독일어 사이트로 리디렉시키면 되지만, 독일어 브라우저로 독일어 사이트를 방문하게 되면 리디렉션시키면 안 됩니다. 이를 감안하지 않으면 무한 리디렉션에 걸려서 오류가 발생할 것입니다.

Too Many Redirects(너무 많은 리다이렉트) 문제를 방지하기 위해 다음과 같은 조건식을 사용할 수 있습니다.

 const whatIs = language();
  if (whatIs === "ko-KR") {
    if (window.location.href.indexOf("ko") !== -1 ){
      return !1;
    }
    else {
    window.location.href = 'https://example.com/ko/';
    }
  }

window.location.href.indexOf를 사용하여 URL에 특정 문자열이 포함되어 있는지 여부를 체크할 수 있습니다("How to check if the URL contains a given string?" 참고).

상기 예제는 방문자가 방문한 사이트의 현재 URL에 ko가 포함되어 있는지 체크하여 'ko'가 있는 경우에는 아무런 작업을 하지 않고, 'ko'가 없는 경우에는 한국어 사이트로 리디렉션시키게 됩니다. 일반적으로 하위 디렉터리(example.com/ko/...)로 되어 있으므로 "/ko/"와 입력해도 되는 것 같습니다. (이 부분은 자바스크립트를 잘 아는 분께 문의하여 "/ko/"와 같은 형식으로 넣어도 된다는 답변을 받았습니다.)

부록: 코드 개선

챗GPT에 위의 코드를 넣어서 개선을 요구해보았습니다. 아래의 코드는 챗GPT가 제시한 개선된 코드입니다. 실제로 원하는 대로 작동하는지에 대해서는 테스트하지 않았습니다.

function getBrowserLanguage() {
    const nav = window.navigator;
    const browserLanguagePropertyKeys = ['language', 'browserLanguage', 'systemLanguage', 'userLanguage'];

    // Check for HTML 5.1 "navigator.languages"
    if (Array.isArray(nav.languages)) {
        for (const lang of nav.languages) {
            if (lang && lang.length) {
                return lang;
            }
        }
    }

    // Check for other well-known properties in browsers
    for (const key of browserLanguagePropertyKeys) {
        const lang = nav[key];
        if (lang && lang.length) {
            return lang;
        }
    }

    return null;
}

function redirectToLocalizedSite() {
    const language = getBrowserLanguage();
    const sessionStorageKey = 'lang';
    const hasRedirected = sessionStorage.getItem(sessionStorageKey);

    if (hasRedirected === "Y") {
        return;
    }

    const languageMap = {
        "ja-JP": 'https://example.com/ja/',
        "it-IT": 'https://example.com/it/',
        "it-CH": 'https://example.com/it/',
        "ko-KR": 'https://example.com/ko/',
        // ... add other languages and their mappings
    };

    const redirectUrl = languageMap[language];
    if (redirectUrl) {
        window.location.href = redirectUrl;
        sessionStorage.setItem(sessionStorageKey, 'Y');
    }
}

redirectToLocalizedSite();

코드 개선 사항:

  • var 대신 let과 const 사용
  • 비교문에 === 및 !== 사용
  • if 문 단순화

마치며

이상으로 다국어 사이트에서 브라우저 언어를 인식하여 해당 언어별 사이트로 이동시키는 방법에 대하여 살펴보았습니다.

혹시 위의 자바스크립트 코드에서 개선이 필요한 부분이 있다면 아래에 댓글을 통해 알려주시면 코드를 업데이트하겠습니다.

참고

일부 글에 제휴 링크가 포함될 수 있으며 파트너스 활동으로 일정액의 수수료를 받을 수 있습니다.

댓글 남기기

* 이메일 주소는 공개되지 않습니다.