Hreflang 및 Shopify에 대해 알아야 할 모든 것

게시 됨: 2020-11-05

점점 더 많은 Shopify 매장이 해외로 진출함에 따라 검색 엔진 순위를 관리하는 것이 그 어느 때보다 중요해졌습니다. 새로운 지역으로 확장하면 흥미진진한 새로운 시장 기회가 생성되지만 심각한 SEO 문제도 발생할 수 있습니다.

국제 확장이 도입하는 주요 SEO 문제는 다음과 같습니다.

  • 검색 엔진이 어떤 페이지가 어떤 지역/언어에 대해 순위가 매겨져야 하는지 이해하도록 돕습니다.
  • 지역 또는 언어별 페이지 중복 콘텐츠 문제 방지

이 기사에서는 이러한 국제적 SEO 문제를 해결하는 데 사용되는 Hreflang이라는 기능을 소개합니다.

Hreflang이 필요한 이유는 무엇입니까?

우선 hreflang이 필요한 이유는 무엇입니까?

브랜드에 다른 지역을 위한 여러 웹사이트가 있는 경우 검색 엔진은 어떤 사이트가 어떤 지역을 위한 것인지 어떻게 알 수 있습니까?

이를 설명하기 위해 피트니스 브랜드인 Gymshark를 사용하겠습니다. Gymshark는 Shopify를 사용하며 다양한 대상을 위한 다양한 웹사이트를 보유하고 있습니다.

영국 - https://uk.gymshark.com

독일 - https://de.gymshark.com

프랑스 - https://fr.gymshark.com

이 사이트는 모국어로 번역되어 Google에 각 사이트가 속한 지역에 대한 엄청난 단서를 제공합니다. 그러나 Gymshark에는 미국 웹 사이트와 캐나다 웹 사이트도 있습니다.

미국 - https://www.gymshark.com 캐나다 - https://ca.gymshark.com/

이 두 웹사이트의 콘텐츠는 영어로 되어 있습니다. 그렇다면 검색 엔진은 이를 영어 영국 웹사이트와 어떻게 구별하고 각 사이트가 올바른 지역에서 순위를 매길 수 있도록 할까요?

이것은 hreflang이 들어오는 곳입니다.

Hreflang은 무엇입니까?

Hreflang은 다른 지역/언어 사용자를 대상으로 하는 페이지의 대체 버전이 있는 경우 검색 엔진에 표시하는 HTML 속성입니다.

Hreflang은 다양한 방식으로 구현할 수 있지만 가장 일반적인 것은 대체 버전이 있는 모든 페이지에 적용되는 간단한 메타 태그입니다. 다음은 Gymshark의 예입니다.

 <link rel="alternate" href="https://www.gymshark.com/" hreflang="en-us" />

이 hreflang 태그는 영국 Gymshark 홈페이지 “https://uk.gymshark.com/”에서 찾을 수 있습니다.

이 페이지의 미국 버전은 "https://www.gymshark.com/"에서 찾을 수 있음을 검색 엔진에 알립니다.

hreflang 태그에는 두 가지 주요 속성이 있습니다.

1 - Href href는 대체 페이지에 대한 링크입니다. 전체 URL 주소여야 하고 작업 페이지여야 합니다. 검색 엔진에 "현재 보고 있는 페이지의 대체 버전입니다"라고 알려줍니다.

2 - Hreflang hreflang 속성에는 언어 코드(ISO 639-1)와 선택적으로 대체 페이지 대상 고객의 국가 코드(ISO 3166-1)가 포함됩니다. 국가 코드는 선택 사항이지만 언어 코드는 필수 사항입니다.

다양한 언어/국가 타겟팅 조합을 사용하는 hreflang 속성의 몇 가지 예:

  • ko - 영어 사용자
  • en-GB - 영국의 영어 사용자
  • fr-FR - 프랑스에 거주하는 프랑스어 사용자
  • en-US - 미국의 영어 사용자
  • it - 이탈리아어 사용자
  • it-CH - 스위스의 이탈리아어 사용자.

'href'와 'hreflang'을 함께 연결하면 검색 엔진은 이 대체 URL(href)이 이 특정 대상(hreflang)을 위한 것임을 알게 됩니다.

대체 페이지

hreflang은 도메인 수준이 아니라 페이지 수준에서 작동한다는 점을 기억하는 것이 중요합니다. Hreflang 태그는 '대체 웹사이트'가 아닌 '대체 페이지'를 선언합니다. 많은 웹사이트에서 hreflang 태그를 사용하여 동일한 도메인에서 대체 언어/지역 특정 페이지를 선언합니다.

예를 들어 하위 폴더를 사용하여 사이트의 대체 언어/지역 버전을 호스팅할 수 있습니다. Apple이 폴더를 사용하여 국제 웹 사이트를 설정하는 방법은 다음과 같습니다.

  • 영국: https://www.apple.com/uk/
  • ES: https://www.apple.com/es/
  • 프랑스: https://www.apple.com/fr/

X-기본값

'x-default'라는 특별한 hreflang 폴백 값이 있습니다. 'x-default'를 웹 페이지 검색 엔진이 검색자의 언어/지역과 일치하는 다른 hreflang 링크가 없을 때 순위를 매겨야 한다고 생각하십시오.

다시 한 예로 Gymshark를 사용합니다. row.gymshark.com에 다른 매장이 있습니다. 이것은 x-기본값으로 선언됩니다.

 <link rel="alternate" href="https://row.gymshark.com/" hreflang="x-default" />

따라서 누군가가 Gymshark의 hreflang 태그에 선언되지 않은 언어/위치로 검색하면 Google은 아마도 Gymshark의 ROW 저장소를 표시할 것입니다.

Hreflang을 추가해야 합니까?

다른 언어/지역 청중에게 서비스를 제공하는 거의 동일한 두 페이지가 있는 경우에만 Hreflang 태그를 추가하면 됩니다. 페이지의 대체 버전이 없으면 hreflang 태그를 추가할 필요가 없습니다.

Hreflang 규칙

hreflang 태그의 유효성을 검사하려면 특정 규칙을 따라야 합니다.

1 - 링크 반환 - 페이지 hreflang이 대체 페이지로 연결되는 경우 대체 페이지는 hreflang 링크를 첫 번째 페이지로 다시 연결해야 합니다. 예를 들어 영국 Gymshark에 독일 Gymshark 페이지를 가리키는 hreflang 링크가 있는 경우 독일 페이지에는 영국 버전으로 돌아가는 hreflang 링크가 있어야 합니다.

2 - 작업 페이지 - hreflang에서 링크하는 모든 페이지는 200 상태 코드를 반환해야 합니다. 즉, hreflang 링크는 작업 페이지여야 합니다.

3 - 자체 참조 Hreflang 태그 - hreflang 링크가 포함된 모든 페이지에는 자체에 대한 hreflang 링크도 있어야 합니다. 이것을 자체 참조 hreflang 링크라고 합니다. 자체 참조 hreflang 링크에는 표준 언어/국가 선언이 포함되어야 합니다.

Hreflang 챌린지

이제 hreflang이 무엇이고 어떻게 작동하는지 확인했으므로 이것이 SEO의 복잡한 부분인 이유에 대해 논의할 수 있습니다. 사실, hreflang은 아마도 SEO에서 제대로 하기 가장 어려운 부분 중 하나일 것입니다.

다음은 hreflang이 얼마나 어려운지 설명하는 Google의 웹마스터 트렌드 분석가 John Mueller의 트윗입니다!

태그를 추가하는 것은 간단하지만 위의 3가지 규칙을 충족하는 hreflang 태그를 유지 관리하는 것은 매우 어려울 수 있습니다.

항상 유효성을 검사하려면 서로 다른 페이지 간의 hreflang 태그가 동기화되어야 합니다. URL 변경과 같은 간단한 작업으로 두 페이지 간의 hreflang 연결이 끊어질 수 있습니다.

웹 사이트가 두 개 이상이고 동적 페이지가 있고 다른 팀에서 관리하는 경우 이것이 얼마나 복잡한지 상상할 수 있습니다. 웹사이트가 여러 개인 경우 팀에서 hreflang 태그가 손상되지 않도록 조정해야 합니다.

Hreflang 실수

우리는 깨진 hreflang 설정을 항상 처리합니다. 다음은 우리가 직면하는 가장 일반적인 hreflang 문제입니다.

반환 링크 없음

지금까지 우리가 보는 가장 빈번한 Hreflang 문제는 반환되는 Hreflang 링크가 없는 페이지입니다. 여기에서 hreflang 태그가 항상 작동하도록 구성해야 합니다. 한 페이지에서는 URL 경로가 변경되고 다른 페이지에서는 변경되지 않으면 hreflang 태그가 동기화되지 않습니다.

200페이지가 아닌 페이지

Hreflang 태그는 200 서버 응답을 반환하는 작업 페이지를 가리켜야 합니다. 웹사이트가 발전함에 따라 URL도 변경됩니다. 이렇게 하면 hreflang 태그가 손상되므로 페이지를 사용 중지하고 리디렉션하는 경우 hreflang 태그도 업데이트해야 합니다.

자체 참조 Hreflang 태그 없음

이상하게 보일 수 있지만 페이지에 hreflang 태그가 있는 경우 자체 참조 hreflang 태그도 포함해야 합니다. 이것은 많은 웹사이트가 저지르는 일반적인 실수입니다.

Hreflang 태그를 확인하는 방법

Hreflang 태그 검사기

hreflang 태그를 감사하는 가장 쉬운 방법은 Hreflang 태그 검사기라는 Chrome 확장 프로그램을 사용하는 것입니다. 확장 프로그램이 설치되면 아무 페이지나 방문하여 도구 모음 아이콘을 누르기만 하면 됩니다. 그런 다음 확장 프로그램은 현재 URL에 hreflang 태그가 있는지 확인합니다.

이 도구의 가장 좋은 기능은 실제로 hreflang 링크를 크롤링하고 유효성 검사를 통과했는지 확인한다는 것입니다.

비명 개구리

대규모로 hreflang 태그를 감사하려면 Screaming Frog가 최고의 도구입니다. Screaming Frog는 웹사이트를 크롤링하고 크롤링 중에 발견된 hreflang 태그의 유효성을 검사합니다.

검색 콘솔

Search Console의 기존 보고서 섹션에 숨겨진 국제 타겟팅 보고서가 있습니다. 이 보고서에 액세스하려면 왼쪽 메뉴에서 '기존 도구 및 보고서 > 국제 타겟팅'으로 이동하십시오.

이 보고서는 웹사이트에 있는 hreflang 태그의 수와 hreflang 오류가 있는 위치를 자세히 보여줍니다.

Hreflang을 추가하는 다양한 방법

Hreflang을 구현하는 데 둘 이상이 있습니다. 위에서 설명한 HTML 태그 방법은 hreflang을 설정하는 가장 쉬운 방법이지만 두 가지 대체 방법이 있습니다.

XML 사이트맵

XML 사이트맵에 익숙할 것입니다. 사이트맵 내의 각 페이지에 대한 hreflang 선언을 포함하도록 XML 사이트맵을 업데이트할 수 있습니다. 시스템이 복잡한 대규모 웹사이트의 경우 이 방법이 가장 쉬운 방법이 될 수 있습니다.

HTTP 헤더

웹 브라우저가 페이지를 방문할 때마다 서버는 해당 페이지에 대한 정보를 웹 브라우저에 반환합니다. 이것을 HTTP 응답이라고 합니다. HTTP 헤더 응답에서 hreflang 정보를 반환하도록 서버를 구성할 수 있습니다.

Shopify에 Hreflang을 추가하는 방법

그렇다면 실제로 Shopify에 hreflang 태그를 추가하는 방법은 무엇입니까? 대부분의 콘텐츠 관리 시스템과 마찬가지로 Shopify에는 플랫폼에서 할 수 있는 것과 할 수 없는 것에 영향을 주는 미묘한 차이가 있습니다. XML Sitemap 또는 HTTP 헤더 방법을 통해 Shopify에 hreflang을 추가할 수 있지만 상당한 기술적 구성이 필요하므로 권장하지 않습니다.

Shopify 웹사이트의 경우 Hreflang을 구현하는 데 권장되는 접근 방식은 항상 HTML 태그입니다. 사이트에 hreflang 태그를 물리적으로 추가하는 것은 매우 쉽지만 hreflang 태그가 항상 확인되도록 하는 방식으로 추가해야 합니다. 위의 세 가지 규칙을 기억하십시오.

  • 대체 페이지에서 반환되는 hreflang 링크가 있어야 합니다.
  • 대체 페이지는 작동하는 URL이어야 합니다.
  • hreflang 태그를 포함하는 모든 페이지에는 자체 참조 hreflang 태그가 있어야 합니다.

앱을 통해 Shopify에 Hreflang 추가

페이지에 Hreflang 태그를 추가하는 Shopify 앱이 있습니다. Weglot 및 Langify와 같은 번역 앱은 자동으로 Hreflang 태그를 생성하여 페이지에 추가합니다.

앱이 Shopify 스토어에 hreflang 태그를 추가할 수 있지만 경험상 이것이 최선의 방법은 아닙니다. 앱 접근 방식은 다국어를 제공하는 단일 상점이 있는 경우에만 작동합니다. 대부분의 앱은 언어+국가 hreflang 타겟팅을 제공하지 않으며 앱은 서로 다른 도메인의 여러 스토어를 고려하지 않습니다. Shopify 앱은 hreflang에 대해 권장되는 접근 방식이 아닙니다.

theme.liquid 파일에 Hreflang 태그 추가

페이지와 URL이 동일한 두 개의 상점이 있는 경우(도메인만 다른 경우) 유효한 hreflang 태그를 추가하는 것은 상당히 쉬울 수 있습니다. 두 웹 사이트는 완전한 복제품이므로 사이트 A의 모든 페이지에 대해 사이트 B에 동일한 페이지가 있다는 것을 알고 있습니다.

따라서 보고 있는 페이지의 URL 경로를 사용하여 hreflang 태그를 동적으로 구성하도록 테마 코드를 편집할 수 있습니다.

그것이 아래의 액체 코드가 하는 일입니다:

 <link rel="alternate" hreflang="x-default" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.mystore.com' }}" hreflang="en-GB" /> <link rel="alternate" href="{{ canonical_url | replace: shop.domain, 'www.us.mystore.com' }}" hreflang="en-US" />

이 코드 조각은 theme.liquid 파일의 섹션입니다. 'mystore.com' 인스턴스를 실제 도메인 이름으로 바꿔야 합니다. 이 스니펫이 있으면 페이지는 URL 경로를 구성하는 표준 페이지를 사용하여 hreflang 태그를 출력합니다.

이 방법에는 웹 사이트 코드 편집이 포함되므로 이 방법을 선택하는 경우 Shopify 전문가를 고용하여 변경 사항을 적용하는 것이 좋습니다.

사용자 정의 필드 사용(권장되는 Shopify Hreflang 접근 방식)

URL 핸들이 일치하지 않는 수천 개의 제품이 있는 여러 Shopify 웹사이트에서 Hreflang 태그를 어떻게 추가합니까? 페이지별로 hreflang 태그를 추가할 시간이 없으며 앱에서 이를 수행할 수 없습니다.

이 시나리오에서는 사용자 정의 필드라는 다른 앱을 사용하는 것이 좋습니다. 사용자 정의 필드를 사용하면 웹사이트에서 완전히 새로운 메타필드를 생성할 수 있습니다. Shopify에서 복잡한 hreflang 상황을 처리할 때마다 고객이 사용자 정의 필드를 사용하여 hreflang 메타필드를 생성할 것을 권장합니다. hreflang 메타필드의 값은 페이지의 섹션.

이 접근 방식을 사용하면 Excel에서 자체 hreflang 태그를 만든 다음 페이지별로 사용자 정의 필드에 직접 추가할 수 있습니다.

더욱이 Custom Fields Plus 플랜이 있는 경우 csv 업로드를 통해 제품 hreflang 태그를 가져올 수 있습니다. 우리는 정기적으로 이 접근 방식을 사용하여 수천 개의 제품 hreflang 태그를 Shopify에 몇 분 안에 업로드합니다.

이 접근 방식은 사용자 정의 메타필드(Shopify Expert 필요)를 설정하고 자체 hreflang 태그를 구축해야 하기 때문에 가장 간단하지는 않지만 대규모 Shopify hreflang 관리에는 단연 가장 효과적입니다. 자신만의 hreflang 태그를 쉽게 구축할 수 있는 방법을 원하신다면 Aleyda Solis의 무료 hreflang 태그 생성기를 추천합니다.

국제 도메인(신규)

Shopify는 최근 국제 도메인이라는 새로운 기능을 발표했습니다. 이 개발을 통해 Shopify 판매자는 다른 언어/국가를 대상으로 하는 대체 도메인/하위 도메인에 상점을 표시할 수 있습니다.

국제 도메인을 사용하면 대상 국가의 2자리 ISO 코드(예: gb.yourdomain.com)를 사용하여 대체 도메인/하위 도메인을 등록합니다. 그러면 Shopify가 각 도메인/하위 도메인에서 hreflang 태그를 자동으로 구성합니다. 이 작업을 수행하는 방법에 대한 전체 지침은 Shopify에서 찾을 수 있습니다.

국제 도메인에는 몇 가지 단점이 있습니다. 모든 판매자에게 적합하지 않은 도메인 전체에서 정확히 동일한 페이지와 제품을 호스팅해야 합니다. 또한 다른 도메인에서 콘텐츠를 편집할 수 없습니다(번역 제외).

즉, 이것은 큰 진전이며 Shopify가 판매자의 의견을 경청했음을 보여줍니다. 조만간 International Domains가 Shopify에 권장되는 hreflang 솔루션이 될 것이라고 확신합니다.

Hreflang과 관련하여 도움이 필요하십니까?

hreflang 관리는 SEO에서 가장 복잡한 부분 중 하나입니다. 당사의 SEO 팀은 수십 개의 웹사이트에 대한 국제 SEO를 성공적으로 관리합니다. 국제 SEO 최적화에 도움이 필요하면 저희에게 알려주십시오.