hreflang이 무엇인지, Google이 사이트를 이해하는 데 어떻게 도움이 되는지, 그리고 다국어 WordPress 웹사이트에 hreflang을 추가하는 방법을 알아보세요.
WPML은 페이지에 hreflang 태그를 자동으로 삽입하고, 웹사이트를 변경할 때마다 태그를 업데이트합니다. 이 과정은 백그라운드에서 진행되며 별도의 조치가 필요하지 않습니다.
hreflang이란?
hreflang 태그는 페이지가 대상으로 하는 언어와 지역을 나타내는 HTML 속성입니다. 다국어 웹사이트에서 hreflang 태그는 검색 엔진에 각 페이지 버전의 대상 독자를 알려줍니다.
예를 들어 다음 hreflang은 지정된 URL에 스페인어 사용자를 위한 홈페이지 버전이 있음을 나타냅니다.
<link rel="alternate" href="https://www.repaircafe.com/es" hreflang="es" />
따라서 스페인에 있는 사용자가 이 홈페이지를 검색하면 Google은 스페인어 버전을 표시합니다.
홈페이지에는 스페인어 외에도 영어 버전이 있습니다. 따라서 미국에 있는 사용자가 검색하면 Google은 영어 버전을 표시합니다.
hreflang은 검색 엔진이 다국어 웹사이트를 이해하도록 돕는 필수 구성 요소입니다. 그렇다면 언제 hreflang 태그를 구현해야 할까요?
hreflang을 사용해야 하는 경우
웹사이트에 hreflang 태그를 추가해야 하는 경우는 다음 4가지입니다.
- 웹사이트에서 여러 언어를 지원하는 경우
- 특정 지리적 지역을 타겟팅하려는 경우
- 콘텐츠에 약간의 지역적 차이가 있는 경우(미국 영어와 영국 영어)
- 주제는 같지만 콘텐츠가 다른 경우(미국 최고의 해변, 호주 최고의 해변)
경험상 웹사이트에 페이지의 여러 버전이 있고 각 버전이 다른 독자를 대상으로 하는 경우 해당 페이지에 hreflang 태그를 추가해야 합니다.
hreflang을 추가하지 않으면 발생하는 일
hreflang 태그에는 두 가지 주요 역할이 있습니다. Google에 페이지가 대상으로 하는 독자를 알려주고, 페이지가 원본 콘텐츠의 변형임을 나타내는 것입니다.
명확한 hreflang 태그가 없으면 Google은 한 페이지가 다른 페이지의 변형인지 알 수 없으므로 변형을 중복 콘텐츠로 간주하여 페이지에 페널티를 줄 수 있습니다.
hreflang 태그의 작동 방식
hreflang 태그는 <head> 섹션에 표시되며 페이지의 대체 버전을 가리킵니다.
hreflang 태그의 형태는 다음과 같습니다.
<head> … <link rel="alternate" href="https://www.domain.com/es" hreflang="es" /> <link rel="alternate" href="https://www.domain.com/de" hreflang="de" /> … </head>
hreflang 태그에는 3가지 정보가 포함됩니다.
rel="alternate"– 원본 페이지의 대체 버전임을 나타냅니다.- href=URL – 대체 페이지의 URL을 나타냅니다.
- hreflang=LANG – 대체 페이지의 언어를 나타냅니다.
위의 예시를 말로 풀어서 설명하면 다음과 같습니다.
현재 페이지에는 http://www.domain.com/es URL에 스페인어 대체 버전이 있고, http://www.domain.com/de URL에 독일어 대체 버전이 있습니다.
보시다시피 hreflang 태그는 언어를 나타낼 때 2자리 코드를 사용합니다. 이 예시에서 es는 스페인어(Español)를 나타냅니다. 전체 약어 목록을 보려면 언어 코드 표준인 ISO 639-1을 방문하세요.
스페인어-멕시코와 같이 언어와 대상 지역을 나타내려면 다음과 같이 hreflang 구성 요소의 끝에 국가 코드를 추가합니다.
hreflang="es-mx"
이 예시에서 es는 스페인어를, mx는 멕시코를 나타냅니다. 국가 코드도 ISO 3166-1 alpha-2 표준에 따라 언어 코드와 마찬가지로 2자리 약어를 사용합니다.
웹사이트에 hreflang 태그를 추가할 때는 아래에 설명된 Google의 권장 hreflang 가이드라인을 따르는 것이 중요합니다.
대체 페이지를 서로 가리키도록 설정
페이지의 모든 버전에 다른 모든 버전을 참조하는 hreflang 태그가 포함되어 있는지 확인하세요. 이렇게 하면 Google이 대체 페이지 전체와 각 페이지 간의 관계를 파악하는 데 도움이 됩니다.
예를 들어 영어와 스페인어로 된 페이지가 있는 경우, 영어 버전에는 스페인어 버전을 가리키는 hreflang 태그가 포함되어야 합니다. 마찬가지로 스페인어 버전에는 영어 버전을 가리키는 hreflang이 포함되어야 합니다.
자체 참조 hreflang 포함
각 버전에는 자기 자신을 가리키는 hreflang을 포함하세요.
예를 들어 영어와 스페인어의 2가지 버전이 있는 경우, 페이지가 서로를 가리키도록 하는 것 외에도 각 버전에 해당 페이지 자체를 가리키는 추가 hreflang이 있어야 합니다.
스페인어 버전에서는 다음과 같이 표시됩니다.
<link rel="alternate" href="https://www.domain.com/en" hreflang="en" /> <link rel="alternate" href="https://www.domain.com/es" hreflang="es" />
그리고 영어 버전에서는 다음과 같이 표시됩니다.
<link rel="alternate" href="https://www.domain.com/es" hreflang="es" /> <link rel="alternate" href="https://www.domain.com/en" hreflang="en" />
적절한 번역이 없을 때의 대체 페이지 정의
x-default는 사용자에게 적절한 버전이 없을 경우 ‘대체(fallback)’ 페이지를 나타냅니다. 형태는 다음과 같습니다.
<link rel="alternate" href="https://www.domain.com/" hreflang="x-default" />
예를 들어 영어와 스페인어로 된 웹사이트에는 프랑스어 사용자를 위한 적절한 페이지가 없습니다. 이 경우 Google은 가장 적합하다고 판단되는 페이지를 제공하려고 시도합니다. 하지만 Google이 어떤 페이지를 제공할지 직접 정하려면 대체 페이지로 사용할 URL을 x-default hreflang에 지정하면 됩니다.
영어 홈페이지를 대체 페이지로 사용하려는 경우 영어 페이지에서는 다음과 같이 표시됩니다.
<link rel="alternate" href="https://www.domain.com/es" hreflang="es" /> <link rel="alternate" href="https://www.domain.com/" hreflang="en" /> <link rel="alternate" href="https://www.domain.com/" hreflang="x-default" />
WordPress 웹사이트에 hreflang을 추가하는 방법
다국어 플러그인을 사용하면 WordPress 웹사이트에 hreflang 태그를 쉽게 추가할 수 있습니다. 직접 수동으로 작업하는 대신 플러그인을 사용하면 다음과 같은 이점이 있습니다.
- 자동 배치 – hreflang 태그가 페이지의 HTML 헤더에 자동으로 배치됩니다. 소스 코드를 직접 열어 태그를 수동으로 추가할 필요가 없습니다.
- 자동 구성 – 콘텐츠를 만들고 업데이트할 때마다 hreflang 태그가 자동으로 생성되고 업데이트됩니다.
위의 모든 기능과 그 이상을 제공하는 다국어 플러그인을 찾고 있다면 가장 널리 사용되는 다국어 WordPress 플러그인인 WPML을 사용할 수 있습니다.
WPML을 사용하여 웹사이트에 자동으로 hreflang 태그 추가
WPML을 사용하면 hreflang 태그에 대해 걱정할 필요가 없습니다.
새 언어를 추가하고 콘텐츠를 번역하면 WPML이 원본 페이지와 번역된 페이지에 hreflang 태그를 자동으로 삽입하고 업데이트합니다.
모든 WPML 요금제에는 사이트의 hreflang 자동 관리 기능이 포함되어 있습니다. 요금제에 대해 자세히 알아보려면 가격 페이지를 방문하세요.
WPML로 지역 타겟팅 추가(선택 사항)
기본적으로 WPML에 추가하는 언어는 국가와 연결되지 않습니다. 지역 타겟팅을 추가하려면 사용자 정의 언어를 추가해야 합니다.
사용자 정의 언어를 사용하면 원하는 언어 및 국가 속성으로 hreflang 값을 만들 수 있습니다. 예를 들어 프랑스계 캐나다인 독자를 타겟팅하려는 경우 hreflang="fr-ca"로 사용자 정의 언어를 만들 수 있습니다.
사용자 정의 언어를 추가하려면 WPML → 언어로 이동하여 사이트 언어에서 언어 편집 링크를 클릭하세요. 그런 다음 하단의 언어 추가 버튼을 클릭하세요.
사용자 정의 언어 설정에 대한 자세한 내용은 사용자 정의 언어 추가에 대한 단계별 튜토리얼을 참조하세요.