Hreflang 태그: 궁극적인 가이드
게시 됨: 2021-02-02그래서 귀찮게 왜? 이유는 다음과 같습니다. hreflang은 여러 언어로 된 유사한 콘텐츠가 있는 사이트에 대한 SEO 콘텐츠를 만드는 데 있어 가장 중요한 단일 요소일 수 있습니다. 따라서 안심하십시오. 결과는 프로세스와 관련된 고통을 능가할 것입니다. 그것에 대해 사랑하지 않는 것은 무엇입니까?
Hreflang 태그란 무엇입니까?
Hreflang은 동일한 콘텐츠를 사용하는 사이트의 모든 URL을 지정하는 코드(특히 HTML 속성)입니다. hreflang 속성은 10년 전에 Google에 의해 도입되었으며 사용자가 다양한 언어로 여러 웹 페이지 간의 관계를 검색 엔진에 표시할 수 있도록 합니다. 이는 특정 청중을 위해 콘텐츠를 만들 때 유용합니다. 동일한 웹페이지의 여러 버전이 다른 언어로 된 회사의 경우 hreflang 태그는 이러한 변형을 검색 엔진에 전달하고 사용자에게 올바른 버전을 제공하는 데 도움이 됩니다.
예를 들어 누군가 미국에서 "Ikea"를 검색하면 다음과 같은 결과가 표시됩니다.
캐나다의 검색자가 동일한 쿼리를 수행하면 다음과 같은 결과가 반환됩니다.
왜 모든 소란? hreflang 태그를 사용하면 검색 엔진이 국가 및 언어 기본 설정에 따라 사용자에게 결과를 제공할 수 있으므로 hreflang 태그의 의미가 매우 중요합니다. 사용자 경험을 최적화하고 검색 순위를 향상시킵니다. 윈윈을 위한 방법은 무엇입니까?
Hreflang이 SEO에 중요한 이유는 무엇입니까?
그것은 모두 개인화된 결과로 귀결됩니다. 웹 페이지를 여러 언어로 번역하는 모든 수고는 사용자가 자신에게 맞는 결과로 안내되지 않으면 손실됩니다. 간단히 말해서, hreflang SEO는 검색 엔진이 사용자의 언어와 위치를 기반으로 회사 웹 페이지의 가장 적절한 버전을 사용자에게 제공할 수 있도록 합니다. 사용자의 특정 기본 설정에 최적화된 페이지가 있습니까? 당신은 그들이 거기에 착륙하기를 원할 뿐만 아니라 몇 가지 이유로 그들이 오래 머물기를 원하고 hreflang 태그 SEO가 그것을 수행하는 방법입니다.
이 방법을 구현하면 사용자 경험이 향상되고 검색 결과로 반송되는 것을 최소화하며 더 높은 순위를 얻을 수 있습니다. (처음에 성공하지 못하면 시도하고 다시 시도하라는 말이 웹 기반 검색을 탐색할 때 반드시 도움이 되는 속담은 아닙니다.) 여기서 목표는 트래픽을 늘리는 것이 아니라 빠르고 안정적인 수익을 원하는 올바른 사용자에게 올바른 콘텐츠를 제공하는 것입니다. Hreflang 태그는 이러한 미묘한 결과를 얻는 열쇠입니다.
다른 이유가 필요하십니까? hreflang을 사용하면 중복 콘텐츠 문제가 근절됩니다. 귀하의 회사가 미국과 캐나다를 대상으로 하는 서로 다른 URL에서 동일한 콘텐츠를 영어로 제공한다고 상상해 보십시오. 차이는 미세할 수 있으며 통화 세부 정보(USD 대 CAD) 및 용어(영국식 대 미터법)에 반영됩니다.
hreflang 태그는 검색 엔진이 이러한 페이지와 각 페이지가 생성된 고유한 대상 간의 관계를 인식하고 이해하는 데 도움이 됩니다. hreflang이 없으면 Google은 이러한 페이지를 중복 콘텐츠로 보고 결과 중 하나만 반환할 수 있습니다. hreflang을 사용하면 콘텐츠가 (대부분) 동일하지만 다양한 인구 집단에 최적화되어 있다는 것이 검색 엔진에 매우 명확하게 전달됩니다. 모자의 깃털(캐나다 친구의 경우 touque)은 어떻습니까?
이러한 세부 사항은 중요하므로 자세히 알아보려면 계속 읽으십시오.
Hreflang 태그는 어떻게 생겼습니까?
Hreflang 태그는 간단하고 일관성이 있으며 다음 구문을 사용합니다.
<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />
이 형식은 링크된 페이지가 "x" 언어로 표시되는 현재 페이지의 대체 버전임을 나타냅니다. Hreflang 태그는 지시문이 아니라 검색 엔진에 대한 신호 역할을 합니다. 다시 말해, hreflang 속성은 "x" 언어를 사용하여 쿼리하는 사용자가 "y" 언어로 된 거의 유사한 콘텐츠가 있는 페이지보다 이 결과를 선호할 것임을 검색 엔진에 알립니다. 신호와 지시문의 또 다른 차이점은 무엇입니까? Google은 부정확하다고 판단되는 경우 hreflang 속성을 인식하지 못할 수 있습니다. 따라서 다른 SEO 요소가 hreflang 속성을 무시하여 회사 페이지의 대체 버전이 최고의 버전보다 높은 순위를 차지하게 됩니다.
Hreflang HTML 사용
여러 언어로 번역된 웹사이트의 경우 태그 hreflang을 구성하는 것은 1-2-3만큼 간단합니다. 이러한 각 단계는 위에서 언급한 구문(<link rel=“alternate” hreflang=“x” href=“https://www.example.com/new-page” />)을 기반으로 사용합니다.
- hreflang 속성은 언어로 구성된 유효한 값을 포함해야 합니다. 이 정보는 ISO 639-1 형식이라는 두 글자 코드로 전달됩니다. 예를 들어 예제 페이지를 포르투갈어로 번역하려는 경우 다음과 같이 표시됩니다.
<link rel=“alternate” hreflang=“pt” href=“https://example.com/portugese-version” />
지역은 선택 사항이며 사용 중인 경우 ISO 3166-1 Alpha 2 형식이어야 합니다. 다음은 각각 포르투갈과 브라질의 포르투갈어 사용자를 타겟팅하는 데 사용할 수 있는 두 가지 태그입니다.
PT-PT: <link rel=“alternate” hreflang=“pt-pt” href=“https://example.com/pt/our-page” /> PT-BR: <link rel=“alternate” hreflang=“pt-br” href=“https://example.com/br/our-page” />
지역 코드가 반드시 직관적인 것은 아니므로(영국 코드는 "uk"가 아닌 "gb"임) 다시 확인하십시오! 사이트에 잘못된 정보를 삽입하기 전에 이 목록을 사용하여 정확한 언어 및 지역 코드를 확인하십시오.
- 각 URL에는 다른 모든 URL에 대한 반환 링크가 필요하며, 이 링크는 모두 해당 웹사이트의 표준 또는 기본 버전을 가리켜야 합니다. 더 많은 언어를 사용할수록 더 많은 hreflang 링크가 필요합니다. 제한하고 싶은 마음이 들 수도 있지만 이 단계를 피하는 것은 불가능합니다. 게다가 rel=”alternate” hreflang=”x”markup과 rel=”canonical”은 함께 사용할 수 있고 사용해야 합니다. 모든 언어에는 자신을 가리키는 rel=”canonical” 링크가 있어야 합니다. example.com 홈페이지에서 시작하면 다음과 같습니다.
<link rel="canonical" href="http://example.com/"> <link rel="alternate" href="http://example.com/" hreflang="pt" /> <link rel="alternate" href="http://example.com/pt-pt/" hreflang="pt-pt" /> <link rel="alternate" href="http://example.com/pt-br/" hreflang="pt-br" />
표준에 대한 자세한 내용은 표준 태그 및 URL: 초보자를 위한 간단한 가이드를 참조하세요.
- 성공적인 hreflang 구성의 마지막 단계는 자체 링크에 기반을 두고 있습니다. 각 페이지의 hreflang 속성에는 자체 참조 및 이에 대한 대체 역할을 하는 모든 페이지에 대한 참조가 필요합니다. Google은 지정된 범위를 벗어나는 방문자를 위해 특정 언어나 지역을 대상으로 하지 않는 기본 버전으로 단일 URL을 설정하는 "x-default" 페이지를 설정할 것을 적극 권장합니다. 변경됩니다:
<link rel="canonical" href="http://example.com/pt-pt/"> <link rel="alternate" href="http://example.com/"hreflang="pt" /> <link rel="alternate" href="http://example.com/pt-pt/"hreflang="pt-pt" /> <link rel="alternate" href="http://example.com/pt-br/"hreflang="pt-br" />
소화가 많이 됩니다! 하지만 여기까지 했으니 다음 단계인 hreflang 태그를 구현하는 방법을 배울 준비가 된 것입니다.
Hreflang 태그 구현
hreflang 태그를 구현하는 방법에는 세 가지가 있으며 모두 배치로 귀결됩니다.
1 – HTML을 사용하여 Hreflang 태그 구현:
hreflang을 처음 사용하는 경우 기본 HTML 태그를 사용하는 것이 가장 쉽고 빠른 방법입니다. 웹페이지의 <head> 태그에 적절한 hreflang 태그(위 참조)를 추가하기만 하면 됩니다.
예: example.com의 웹마스터는 미국에서 영어와 스페인어를 사용하는 사용자가 자신의 홈페이지에 액세스할 수 있도록 하려고 합니다. 사이트 HTML의 <head>에서 다음 주석을 사용하여 이를 수행합니다.
<link rel="alternate" href="https://www.example.com" hreflang="en-us" /> <link rel="alternate" href="https://www.example.com/es" hreflang="es-us" />
베네수엘라와 멕시코의 스페인어 사용자에게 홈페이지를 표시하려는 경우 hreflang 주석은 다음과 같습니다.
<link rel="alternate" href="https://www.example.com/ve" hreflang="es-ve" /> <link rel="alternate" href="https://www.example.com/mx" hreflang="es-mx" />
이 방법의 가장 큰 단점은 무엇입니까? Hreflang HTML은 다소 빨리 지저분해지고 시간이 많이 소요될 수 있습니다. 또한 <head> 요소와 <header> 요소 사이에는 차이가 있음을 기억하십시오. <head>에는 페이지에 표시되지 않는 요소(이 경우 hreflang 속성)가 포함됩니다.
2 – Hreflang HTTP 헤더 구현:
웹사이트의 PDF 및 HTML이 아닌 콘텐츠의 경우 HTTP 헤더를 사용하여 hreflang을 구현하세요. 이름은 약간 오해의 소지가 있습니다. 구현은 <head> 또는 <header>를 통해 페이지에서 수행되지 않습니다. 대신 사이트의 백엔드에서 모두 수행됩니다. HTTP 헤더를 사용하면 문서 변형의 상대 언어를 지정할 뿐만 아니라 이 콘텐츠를 최적화할 수 있습니다.
예: 사이트의 PDF 문서를 영어 및 프랑스어 버전으로 식별하기 위해 HTTP 헤더에 표시되는 링크는 다음과 같습니다.
링크: <http://en.example.com/document.pdf>; rel="대체"; hreflang="ko", <http://fr.example.com/document.pdf>; rel="대체"; hreflang="fr"
이 구현 방법의 가장 큰 단점은 무엇입니까? HTTP 헤더를 사용하면 사이트에서 이루어진 각 요청에 오버헤드가 추가되어 사용자의 탐색 환경이 느려질 수 있습니다.
3 – XML 사이트맵에서 Hreflang 구현하기
hreflang을 구현하기 위한 마지막 옵션은 XML 사이트맵 마크업을 사용하는 것입니다. 이것은 XML의 xhtml:link 속성을 사용하여 모든 URL에 주석을 추가합니다.
XML 사이트맵에 hreflang을 구현하는 방법은 여러 가지가 있지만 다음과 같이 하는 것이 좋습니다.
또는 아래 예 중 일부를 사용할 수 있습니다.
주의: 한 쌍의 언어/위치 변수가 있는 단일 URL에 필요한 마크업이 길게 나타납니다! 즉, 이점을 읽으십시오. (많이있다!)
예시:
<url> <loc>http://www.example.com/uk/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url>
세 번째 URL은 자체 참조입니다. 이것은 en-gb에 대한 특정 URL을 지정하고 두 개의 다른 언어/위치 조합을 지정합니다. 이제 두 URL을 모두 사이트맵에 구현하면 다음과 같습니다.
<url> <loc>http://www.example.com/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url> <url> <loc>http://www.example.com/au/</loc> <xhtml:link rel="alternate" hreflang="en" href="http://www.example.com/" /> <xhtml:link rel="alternate" hreflang="en-au" href="http://www.example.com/au/" /> <xhtml:link rel="alternate" hreflang="en-gb" href="http://www.example.com/uk/" /> </url>
텍스트의 바다를 지나쳐 볼 수 있다고 가정하면 <loc> 요소 내의 URL만 변경되고 나머지는 모두 동일하게 유지된다는 것을 알 수 있습니다! 아휴. 이 방법은 자체 참조 hreflang 속성이 있는 각 URL에 의존하고 다른 URL에 대한 링크를 반환합니다.
일이 많아보이죠? 한편으로는 이 방법이 길고 많은 URL에 대해 이 작업을 수행할 때 상당한 양의 출력이 필요합니다. 즉, 이점은 간단합니다. 일반 사용자는 이 마크업에 신경 쓰지 않을 것입니다. 추가 페이지 가중치가 없으며 이러한 종류의 마크업을 생성하는 데 페이지 로드 시 많은 데이터베이스 호출이 필요하지 않습니다.
마지막으로 XML 사이트맵을 통해 hreflang을 구현하면 모든 것이 단일 파일에 정의된다는 큰 이점이 있습니다. 이렇게 하면 페이지가 변경되거나 삭제될 때마다 여러 HTML 문서를 편집할 필요가 없습니다. 또한 사이트 속도 저하가 없습니다. 즉, 좋아할 것이 많다!
어떤 구현 모드를 선택해야 할지 아직 확실하지 않습니까? 웹사이트 아키텍처 및 사이트 구조에 대한 추가 팁은 기술 SEO 모범 사례를 참조하세요.
Hreflang 문제 찾기 및 수정
이제 웹사이트에 hreflang을 성공적으로 구현했으므로(여기에 가상 하이파이브 삽입!) 유지 관리가 필수입니다. 선택한 구현에 대한 정기 감사를 실행하면 올바르게 설정되었는지 확인할 수 있습니다. 회사에서 사이트 콘텐츠를 처리하는 개인과 의사 소통하는 것은 큰 도움이 될 것입니다. hreflang에 대해 알게 하여 실수로 구현을 중단하지 않도록 하는 것이 좋습니다.
여기서 두 가지 중요한 점을 언급해야 합니다. 페이지가 삭제된 경우 해당 페이지가 업데이트되었는지 확인합니다. 페이지가 리디렉션되면 해당 페이지의 hreflang URL을 변경하십시오. 귀하와 귀하의 팀이 이러한 작업을 일관되게 수행하고 정기적으로 감사한다고 가정하면 순조롭게 진행되어야 합니다.
그 동안 다음은 가장 일반적인 hreflang 실수와 이를 수정하는 방법에 대한 간략한 설명입니다.
1 - 자체 참조 hreflang 주석 누락
무슨 일이야? 웹페이지에 hreflang 태그를 추가할 때마다 자체 참조 hreflang 태그를 사용하는 것이 중요합니다. Google에서 "각 언어 버전은 다른 모든 언어 버전과 마찬가지로 자체적으로 나열해야 합니다."라고 명시한 것을 기억하십시오.
수정 방법: 영향을 받는 모든 페이지를 검토하고 선택한 구현 방법을 사용하여 각 페이지에 자체 참조 hreflang 태그를 추가합니다.
2 – Hreflang 주석이 잘못되었습니다.
무슨 일이야? 검색 엔진은 잘못된 hreflang 태그를 무시하므로 웹 페이지의 대체 버전이 간과됩니다.
수정 방법: 영향을 받는 페이지를 검토하고 잘못된 hreflang 태그를 제거하고 유효한 언어/위치 코드 형식을 사용하는 태그로 교체합니다.
3 – hreflang에서 둘 이상의 언어에 대해 참조된 페이지
무슨 일이야? 각 콘텐츠는 단일 언어/언어 위치를 제공하도록 설계되었습니다. 두 개 이상의 충돌하는 참조가 검색 엔진을 혼란스럽게 만들고 hreflang 속성이 무시되도록 합니다.
수정 방법: 영향을 받는 페이지를 검토하고 hreflang 속성에서 특정 페이지를 참조하는 URL에 오류가 있는지 검사합니다. 잘못된 hreflang 속성을 제거하고 언어당 하나의 올바른 속성만 남겨둡니다.
4 – 상호 hreflang 누락(반환 태그 없음)
무슨 일이야? Hreflang 태그는 양방향입니다(hreflang 주석에서 페이지 A가 페이지 B에 링크되는 경우 페이지 B는 그 대가로 페이지 A에 링크되어야 함).
해결 방법: 영향을 받는 페이지를 검토하고 필요한 경우 양방향 hreflang 태그를 추가합니다. 참고: Google Search Console의 국제 타겟팅 보고서("언어" 탭 아래에 있음)는 누락된 반환 태그의 모든 인스턴스에 플래그를 지정합니다.
예를 들어:
5 – Hreflang에서 비정규로
무슨 일이야? Rel=“alternate” hreflang=“x”는 페이지의 번역된(현지화된) 버전을 표시하도록 검색 엔진에 지시합니다. rel=canonical 속성은 이것이 권위 있는(표준) 버전이 아니라는 플래그를 지정합니다. 이러한 모순되는 속성은 검색 엔진을 혼란스럽게 합니다.
수정 방법: 영향을 받는 페이지를 검토하고 표준 URL만 가리키도록 hreflang 주석을 수정합니다. 잘못된 표준 태그가 있는 페이지를 발견하면 제거하세요. 이렇게 하면 검색 엔진에서 hreflang 속성을 제대로 이해하고 따를 수 있습니다.
6 – Hreflang 및 HTML 언어 불일치
무슨 일이야? 하나 이상의 URL에 대해 선언된 hreflang과 HTML 언어 속성 사이에 불일치가 있는 경우 검색 엔진(Google 제외)이 혼란스러워집니다. 이 두 속성을 서로 일관성 있게 유지하는 것이 중요합니다.
수정 방법: 영향을 받는 페이지를 검토하고 HTML 언어 속성을 변경하여 선언된 hreflang 속성과 일관성을 유지하도록 합니다.
7 - 깨진 페이지에 대한 Hreflang
무슨 일이야? 검색 엔진은 존재하지 않는 콘텐츠를 반환할 수 없습니다! 따라서 죽은 페이지를 가리키는 hreflang 속성은 간과됩니다.
수정 방법: 영향을 받는 페이지를 검토하고 hreflang 주석을 변경하여 작업 페이지에 연결되도록 합니다.
8 – hreflang에서 동일한 언어에 대한 둘 이상의 페이지
무슨 일이야? 하나 이상의 URL이 hreflang 주석에서 동일한 언어(또는 언어 위치)에 대한 둘 이상의 페이지를 참조하면 검색 엔진이 혼란스러워집니다.
수정 방법: 영향을 받는 페이지를 검토하고 hreflang 주석 중 하나를 제거하여 각 언어에 대해 단일 페이지가 참조되도록 합니다.
9 – X-기본 hreflang 주석 누락
무슨 일이야? x-default hreflang 속성은 선택 사항이지만 모든 hreflang 주석에 대한 SEO 모범 사례로 권장됩니다.
수정 방법: 영향을 받는 페이지를 검토하고 각 페이지에 특정 언어나 위치와 관련이 없는 페이지를 가리키는 "x-default" hreflang 속성 세트가 있는지 확인합니다.
아직 질문이 있으신가요? 올해 최신 정보를 얻으려는 추가 기술 SEO 관행을 간략하게 설명하는 Core Web Vitals 알고리즘 업데이트를 확인하십시오.
Google이 무시할 수 있는 문제
모범 사례를 따르는 데 자신의 몫을 다했지만 여전히 검색 엔진이 특정 문제를 무시하는 경우가 있습니다. 이것은 주로 검색 엔진이 동일한 문제를 반복적으로 보고 해당 문제를 해결할 수 있다고 생각할 때 발생합니다. 땀 흘리지 마! 이것은 실제로 매우 유용합니다. 다음은 Google에서 실제로 "수정"하는 몇 가지 hreflang 태그 문제입니다.
- 대시 대신 밑줄: 이것은 일반적인 오류이며 Google에서 이에 대해 설명합니다. 모든. 하나의. 시간.
- en-GB 대신 en-UK 사용: 우리는 앞서 이것에 대해 이야기했습니다. 지역 코드가 반드시 직관적인 것은 아니라는 사실입니다. 안심하십시오. Google에서 처리해 드립니다. 영국은 예약 코드이므로 Google에서 이 일반적인 문제를 수정합니다.
- 자체 참조가 없는 Hreflang: Google은 최근에 자체 참조 hreflang이 선택 사항이라고 밝혔습니다. 그것은 좋은 습관으로 남아 있습니다.
- 상대 URL 대 절대 URL: 표준 URL과 hreflang 모두 상대 경로를 사용할 수 있지만 절대 URL이 더 절대적입니다! 따라서 가능하면 사용하는 것이 좋습니다.
사용자 리디렉션: 주의 사항
많은 경우 웹사이트는 쿠키, IP 주소 및/또는 브라우저 언어의 조합을 기반으로 사용자를 리디렉션합니다. 리디렉션을 조심하십시오! 사용자에게 이것은 실망스러운(읽기 수준 이하) 경험으로 해석될 수 있습니다. 검색 엔진의 경우 콘텐츠 색인을 생성하는 것이 문제가 됩니다. 또한 사용자를 리디렉션하면 hreflang 태그에 필요한 연결이 끊어질 수 있습니다.
다음은 이 관행에 대한 Google의 설명입니다.
콘텐츠를 조정하기 위해 IP 분석을 사용하지 마십시오. IP 위치 분석은 어렵고 일반적으로 신뢰할 수 없습니다. 또한 Google에서 사이트의 변형을 제대로 크롤링하지 못할 수 있습니다. 전부는 아니지만 대부분의 Google 크롤링은 미국에서 시작되며 사이트 변형을 감지하기 위해 위치를 변경하지 않습니다. 여기에 표시된 명시적 방법(hreflang, 대체 URL 및 명시적 링크) 중 하나를 사용합니다.
검색 엔진 크롤러를 모든 위치의 사용자처럼 취급하십시오. 검색 엔진 봇을 사용자와 다르게 취급하는 것은 클로킹(인간 사용자 및 검색 엔진에 다른 콘텐츠 또는 URL을 표시하는 행위)으로 간주되며 Google 웹마스터 가이드라인을 위반하는 것입니다.
사용자에게 예상한 결과를 제공하는 승인된 수정 사항을 원하십니까? 동일한 감지 논리를 사용하여 작은 배너에서 사용자에게 더 나은 페이지 버전을 제안합니다. 한 가지 주의할 점은 너무 크면 전면 광고로 보일 수 있다는 것입니다(콘텐츠가 사용자에게 완전히 또는 부분적으로 가려질 수 있음).
Hreflang 프로 팁
사이트의 hreflang 배포를 확인하는 프로세스를 자동화하는 Google Chrome 확장 프로그램이 있습니다. 일일 SEO 유지 관리에 도움이 될 수 있는 이 추가 기능 및 기타 SEO Chrome 애드온에 대한 정보를 얻으십시오.
결론
hreflang을 이해하고 활용하고 문제를 해결하는 것은 오늘날의 SEO를 위한 요구 사항입니다. 전 세계 어디에서나 사이트의 가시성을 높이기 위해 최선을 다하고 있습니까? Victorious는 지역 문화 경향과 검색에 영향을 미치는 구매 패턴을 발견하여 국제 SEO 캠페인을 위한 최상의 전략을 결정하기 위해 깊이 파고듭니다.
SEO 대행사를 시작할 준비가 되셨습니까? 지금 무료 SEO 상담에 등록하고 Victorious가 프로세스를 안내해 드립니다.