국제화 페이지를 위한 hreflang
검색 엔진에 언어 및 지역별 변형 알리기
국제화 페이지를 위한 hreflang은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
hreflang이 해결하는 문제
같은 문서를 영어, 터키어, 일본어로 게시하면 검색 엔진은 각 사용자의 검색 결과에 어떤 버전을 표시해야 하는지 알아야 합니다. hreflang이 없으면 Google이 잘못된 언어의 페이지를 제공하거나 각 버전을 중복 콘텐츠로 처리할 수 있습니다.
link 태그
<head> 안에서 <link rel="alternate" hreflang="..." href="...">를 사용해 각 대체 버전을 선언하십시오. hreflang 속성은 BCP-47 언어 코드(en, tr) 또는 언어-지역 조합(en-US, en-GB, pt-BR)입니다.
<link rel="alternate" hreflang="en" href="https://example.com/en/article">
<link rel="alternate" hreflang="tr" href="https://example.com/tr/article">
<link rel="alternate" hreflang="ja" href="https://example.com/ja/article">상호 참조 필수
각 버전은 자기 자신을 포함해 다른 모든 버전에 연결되어야 합니다. Google은 양방향이 아닌 hreflang 클러스터를 무시합니다. 영어 페이지는 TR과 JA에 연결하고, 터키어 페이지는 EN과 JA에 연결하는 식으로 구성합니다.
자기 참조
각 페이지는 hreflang을 통해 자기 자신에게도 연결해야 합니다. 영어 페이지에는 자체 URL을 가리키는 <link rel="alternate" hreflang="en" ...>가 포함되어야 합니다. 이는 "상호 참조"의 일부이며, Google은 자기 연결을 사용해 클러스터 소속을 확인합니다.
x-default 값
Google이 언어를 일치시킬 수 없는 사용자를 위한 대체 페이지를 지정하려면 hreflang="x-default"를 사용하십시오. 일반적으로 영어 버전이나 언어 선택기 랜딩 페이지를 가리키므로, 대상 언어가 아닌 사용자도 적절한 페이지로 이동할 수 있습니다.
언어 코드와 지역 코드
en은 모든 영어 사용자를 대상으로 합니다. en-US, en-GB, en-AU는 콘텐츠가 지역에 따라 달라질 때(통화, 철자, 배송) 국가별 변형을 대상으로 합니다. 콘텐츠가 일반 버전과 실제로 다를 때만 지역을 지정하십시오.
대체 선언 방법
hreflang은 HTTP Link 헤더(예: PDF와 같은 비HTML 파일용)나 <xhtml:link rel="alternate" hreflang="...">를 사용하는 XML 사이트맵에서도 선언할 수 있습니다. 세 방법은 동일하므로 유지 관리하기 가장 쉬운 방식을 선택하십시오.
사이트맵 선언
언어가 많은 사이트에서는 HTML 태그보다 사이트맵에 hreflang을 선언하는 방식이 확장성이 더 좋습니다. URL마다 사이트맵 항목 하나를 두고 모든 대체 버전을 나열하면 페이지별 템플릿 중복을 없앨 수 있습니다. Search Console은 누락된 상호 참조를 표시하므로 오류를 조기에 발견할 수 있습니다.
흔한 실수
하이픈(en-US) 대신 밑줄(en_US)을 사용하거나, 상태 코드 200이 아닌 URL을 가리키거나, 클러스터에서 http와 https를 섞거나, 자기 연결을 빠뜨리면 hreflang이 아무런 표시 없이 작동하지 않습니다. 출시 후 Google Search Console의 국제 타겟팅 보고서를 실행하십시오.
번역을 대신하지 않음
hreflang은 어떤 번역이 이미 존재하는지만 Google에 알려 줍니다. 페이지 자체에는 여전히 실제로 번역된 콘텐츠가 필요하며, Google이 대신 번역해 주지는 않습니다. 영어가 80%인 페이지에 hreflang만 적용해 출시하는 사이트는 색인에 조용히 혼란을 일으킵니다.
og:locale 및 lang과 함께 사용하기
문서의 <html lang="...">과 og:locale을 페이지의 실제 언어에 맞게 설정하십시오. hreflang은 검색 엔진에 관련 페이지를 알려 주고, lang/og:locale은 브라우저와 소셜 네트워크에 현재 페이지의 언어를 알려 줍니다. 완전한 정보를 제공하려면 둘 다 필요합니다.
지식 확인
hreflang="x-default"는 무엇을 가리키나요?
요약
hreflang은 페이지의 번역된 버전을 연결하여 검색 엔진이 올바른 언어를 제공하도록 합니다. BCP-47 코드를 사용하고, 자기 연결을 포함해 대체 버전을 상호 참조하도록 선언하며, 대체 페이지에는 x-default를 추가하십시오. Google Search Console의 국제 타겟팅 보고서에서 확인해야 합니다. 번역 품질과 lang/og:locale 태그도 서로 일치해야 합니다.
AI 튜터와 함께 HTML을(를) 배우세요 — 무료
브라우저에서 실제 코드를 작성하고 실행하며, 24/7 AI 튜터로부터 즉각적인 도움을 받고, 웹이나 앱에서 중단한 부분부터 계속 학습하세요.
- 코스
- 40
- 레슨
- 159
자주 묻는 질문
“국제화 페이지를 위한 hreflang” 강의는 무료인가요?
네 — “국제화 페이지를 위한 hreflang” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“국제화 페이지를 위한 hreflang”에서 뭘 배우나요?
검색 엔진에 언어 및 지역별 변형 알리기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“국제화 페이지를 위한 hreflang” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.
이 강의의 모든 강의
- OpenGraph og:title og:description og:image
- Twitter Card 메타 태그
- JSON-LD 구조화된 데이터 기초
- 국제화 페이지를 위한 hreflang