글로벌 사용자층을 목표로 하는 다국어 웹사이트라면 여러 언어로 콘텐츠를 제공하는 것이 필수적입니다. 이를 위해 다국어 지원을 고려한 HTML 설계는 사용자 경험(UX)과 검색 엔진 최적화(SEO) 모두에 중요한 영향을 미칩니다. 특히 lang 속성과 hreflang 태그는 올바른 언어 표시와 지역화된 콘텐츠 제공에 핵심적인 역할을 합니다.
1. lang 속성을 통한 문서 언어 설정
HTML의 lang 속성은 웹 페이지의 기본 언어를 검색 엔진과 보조 기술(예: 스크린 리더)에 알려줍니다.
lang 속성은 <html> 태그와 개별 요소에 설정할 수 있습니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Welcome</title> </head> <body> <p>Hello, world!</p> </body> </html>
위 코드에서 lang="en"은 문서의 기본 언어가 영어임을 나타냅니다.
다국어 콘텐츠를 포함한 경우
다국어 웹사이트에서는 특정 텍스트의 언어가 문서 기본 언어와 다를 때, 해당 텍스트에 개별적으로 lang 속성을 지정해야 합니다.
<p lang="fr">Bonjour tout le monde!</p> <p lang="es">¡Hola, mundo!</p>
이 방법은 보조 기술이 텍스트를 올바르게 발음하도록 도와줍니다.
2. hreflang 태그로 다국어 및 지역화 콘텐츠 최적화
hreflang 태그란?
hreflang은 특정 언어와 지역의 사용자를 대상으로 제작된 페이지를 검색 엔진이 인식하도록 돕는 메타 태그입니다. 이를 통해 검색 결과에 적절한 언어와 지역의 페이지를 표시할 수 있습니다.
hreflang 태그는 <link> 요소에서 사용하며, 각 페이지의 언어와 지역 코드를 명시합니다.
<link rel="alternate" hreflang="en" href="<https://example.com/en/>" /> <link rel="alternate" hreflang="fr" href="<https://example.com/fr/>" /> <link rel="alternate" hreflang="es" href="<https://example.com/es/>" />
위 코드에서는 영어, 프랑스어, 스페인어 버전의 URL을 지정하고 있습니다.
지역 코드 포함
특정 지역에 맞춘 언어 변형이 필요한 경우 언어 코드 뒤에 지역 코드를 추가합니다.
예:
- 미국 영어:
en-us - 영국 영어:
en-gb - 캐나다 프랑스어:
fr-ca
<link rel="alternate" hreflang="en-us" href="<https://example.com/us/>" /> <link rel="alternate" hreflang="en-gb" href="<https://example.com/uk/>" /> <link rel="alternate" hreflang="fr-ca" href="<https://example.com/ca-fr/>" />
x-default 지정
x-default는 기본 페이지(언어 선택 화면 등)를 지정할 때 사용합니다.
<link rel="alternate" hreflang="x-default" href="<https://example.com/>" />
3. 다국어 웹사이트 설계 시 주의사항
3-1. 언어 코드와 지역 코드 정확히 구분하기
- 언어 코드는 ISO 639-1 형식(예:
en,fr)을 따릅니다. - 지역 코드는 ISO 3166-1 형식(예:
US,GB)을 따릅니다.올바르지 않은 코드는 검색 엔진이 hreflang 태그를 무시하게 만듭니다.
3-2. hreflang과 URL 구조
hreflang 태그를 적용할 때 URL 구조를 일관되게 설정하는 것이 중요합니다.
- 서브도메인 방식:
en.example.com,fr.example.com - 디렉토리 방식:
example.com/en/,example.com/fr/
3-3. Canonical 태그와의 관계
hreflang을 사용하는 페이지는 보통 동일한 콘텐츠를 제공하는 여러 언어 버전이 있습니다. 이 경우 각 언어 버전에서 자체 URL을 canonical로 지정해야 합니다.
<link rel="canonical" href="<https://example.com/en/>" /> <link rel="alternate" hreflang="en" href="<https://example.com/en/>" /> <link rel="alternate" hreflang="fr" href="<https://example.com/fr/>" />
4. 실제 사례를 통한 다국어 웹사이트 지원 구현
4-1. 다국어 웹사이트 블로그
예를 들어, 블로그가 영어, 일본어, 스페인어로 콘텐츠를 제공한다고 가정해 봅시다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link rel="alternate" hreflang="en" href="<https://example.com/en/>" /> <link rel="alternate" hreflang="ja" href="<https://example.com/ja/>" /> <link rel="alternate" hreflang="es" href="<https://example.com/es/>" /> </head> <body> <h1>Welcome to our Blog</h1> </body> </html>
4-2. 다국어 웹사이트 전자상거래
전자상거래 사이트는 언어뿐 아니라 지역화된 통화와 배송 정보를 제공해야 합니다.
<link rel="alternate" hreflang="en-us" href="<https://example.com/us/>" /> <link rel="alternate" hreflang="en-gb" href="<https://example.com/uk/>" /> <link rel="alternate" hreflang="es-es" href="<https://example.com/es/>" />
5. 다국어 지원의 SEO 효과
- 검색 결과의 정확성
hreflang태그는 검색 엔진이 사용자 지역과 선호 언어에 맞는 페이지를 제공하도록 돕습니다. - 중복 콘텐츠 문제 해결 언어와 지역에 따른 콘텐츠 중복을 검색 엔진이 인식하지 못할 경우 순위 하락으로 이어질 수 있습니다. hreflang은 이를 방지합니다.
- 사용자 경험 개선 올바른 언어와 지역 설정은 사용자가 웹사이트를 더 편리하게 탐색하도록 돕습니다.
다국어 웹사이트를 설계할 때 lang 속성과 hreflang 태그는 필수적입니다. 이들을 효과적으로 활용하면 사용자 경험을 향상시키는 동시에 검색 엔진의 가시성을 높일 수 있습니다. 언어와 지역에 최적화된 콘텐츠를 제공하여 글로벌 사용자층을 확보해 보세요.
