Hreflang 태그 속성 및 구현 방법
- Technical SEO
- 2024. 1. 16.
검색엔진 최적화(SEO) 마케팅을 하게 되면, 다국어 사이트를 운영할 때가 한 번씩 찾아온다.
이럴 때 중요한 것이 Hreflang 태그라고 할 수 있다.
다국어 SEO에 중요한 부분이며, Hreflang 및 Alternate SEO에 영향을 줄 수 있기 때문이다.
이 글을 통해, Hreflang 태그 속성 및 구현 방법에 대해서 알아보자.
에스이오 소개
에스이오는 글 1개로 세상을 바꾸고 싶다는 신념으로 시작했습니다.
정확한 SEO 정보를 제공하고 세상을 더 긍정적으로 바꿉니다.
- Introduction to Google Seo 수료
- Google SEO fundamentals 수료
- The Fundamentals of Digital Marketing 수료
- <에스이오_검색엔진 최적화 7가지> 저자
- 현) 에스이오 대표
Hreflang 태그 속성 및 구현 방법
Hreflang 태그란 무엇인가?
Hreflang은 웹페이지 언어와 대상 지역을 지정하는 HTML 속성이다.
여러 언어로 된 콘텐츠가 있다면 지역에 맞는 웹사이트에 유용하다.
구글과 같은 검색 엔진은 해당 Hreflang 태그를 사용해서 사용자에게 적합한 버전을 제공한다.
Hreflang 태그는 어떻게 보이는가?
Hreflang은 간단한 구조로 따른다.
내용은 다음과 같다.
<link rel="alternate" hreflang="언어코드" href="대상 URL">구문 의미는 아래와 같다.
- rel="alternate": 이 링크가 대체 버전을 나타내는 것임을 나타낸다.
- hreflang="언어코드": 대상 버전의 언어를 정의한다. 언어 코드는 ISO 639-1 형식(예: "en"은 영어, "es"는 스페인어)을 따른다.
- hreflang="대상 URL": 대체 언어 버전의 URL을 지정합니다.
구글은 hreflang 속성을 사용하지만, Bing이나 타 검색엔진 경우에는 HTML 속성에 의존한다.
Hreflang 태그 구현 방법
여러 언어 및 지역에 대한 'hreflang' 태그를 구현할 수 있다.
내용은 다음과 같다.
<link rel="alternate" hreflang="kr" href="https://example.com/kr/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/pagina">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">각 웹페이지의 hreflang 속성에는 대체 페이지로 사용되는 모든 페이지에 대한 참조가 포함되는 것이 좋다.
hreflang 속성이 관련 대체 페이지를 참조하지 않는 경우 검색 엔진은 hreflang 태그를 무시하거나 잘못 해석할 수 있다.
x-defalut 태그도 설정하는 것이 중요하다.
다른 언어 버전이 없는 경우 대체 페이지를 나타낸다.
내용은 다음과 같다.
<link rel="alternate" hreflang="kr" href="https://example.com/kr/page">
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/pagina">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/default-page">
Hreflang 태그는 어디에 쓰면 될까?
Hreflang 태그를 사용하는 공간은 크게 3가지이다.
- HTML head
- HTTP header
- XML 사이트맵
더 자세하게 알아보자.
HTML Head
대체 페이지를 나타내는 가장 기본적인 방법은 HTML 코드를 사용하는 것이다.
페이지 <head> 부분에 관련된 모든 hreflang 태그를 넣기만 하면 된다.
예시는 아래와 같다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Your Page Title</title>
<!-- 예제의 hreflang 태그들 -->
<link rel="alternate" hreflang="en" href="https://example.com/en/page">
<link rel="alternate" hreflang="es" href="https://example.com/es/pagina">
<link rel="alternate" hreflang="fr" href="https://example.com/fr/page">
<link rel="alternate" hreflang="x-default" href="https://example.com/default-page">
</head>
<body>
<!-- 페이지 내용은 이곳에 추가합니다 -->
</body>
</html>HTML 내 head를 사용하는 경우 시간이 오래 걸릴 수 있다는 것이 단점이다.
HTTP Header
HTTP Header 경우 HTML이 아닌 콘텐츠에 대한 Hreflang 속성을 구현하는 데 적합하다.
HTTP Header 코드는 서버와 클라이언트 간에 데이터를 전송한다.
해당 코드에는 요청 날짜, 추천인, 언어 등 기본 정보가 포함되어 있다.
예시는 아래와 같다.
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Language: en
XML 사이트맵
XML 사이트맵은 검색 엔진에 사이트 페이지에 대한 정보를 제공하는 파일이다.
이는 각 URL의 모든 언어 및 지역을 구글에 알리는 좋은 방법이다.
XML 사이트맵을 사용하면 HTML 및 HTTP Header에 비해 따로 업데이트를 할 필요가 없다는 것이다.
예시는 아래와 같다.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://example.com/page1</loc>
<!-- 여러 언어의 hreflang 태그 추가 -->
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/page1"/>
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/pagina1"/>
</url>
<url>
<loc>https://example.com/page2</loc>
<!-- 다른 페이지의 hreflang 태그 추가 -->
<xhtml:link rel="alternate" hreflang="en" href="https://example.com/en/page2"/>
<xhtml:link rel="alternate" hreflang="es" href="https://example.com/es/pagina2"/>
</url>
<!-- 다른 페이지들도 유사한 방식으로 추가 -->
</urlset>
결론
혹시나 블로그나 홈페이지를 운영하면서 외국인 유입이 많다고 생각된다면, Hreflang 태그를 사용하는 것이 좋다.
이 과정에서 Hreflang checker를 통해 문제점을 찾고, 위와 같이 코드를 설정하는 것을 추천한다.
<참조: What Are Hreflang Attributes & How to Implement Them>
더 알아보기
- 에스이오 홈페이지 : 검색엔진 최적화(SEO) FACT만 제공하는 콘텐츠 페이지.