<link rel="alternate" hreflang> — 메타 태그 도감

올바른 사용

양방향 연결 (A는 B를, B는 A를 가리킴)

절대 URL 사용

x-default로 기본 페이지 명시

사이트맵에 hreflang annotation 병행 권장

한국어/영어 양방향

<link rel="alternate" hreflang="ko" href="https://example.com/ko/about" />
<link rel="alternate" hreflang="en" href="https://example.com/en/about" />
<link rel="alternate" hreflang="x-default" href="https://example.com/en/about" />

두 페이지 모두에 같은 세 link 박기. x-default로 기본 fallback.

지역별 (region) 구분

<link rel="alternate" hreflang="ko-KR" href="https://example.com/kr/" />
<link rel="alternate" hreflang="en-US" href="https://example.com/us/" />
<link rel="alternate" hreflang="en-GB" href="https://example.com/uk/" />
<link rel="alternate" hreflang="x-default" href="https://example.com/" />

같은 언어의 지역별 페이지. en-US와 en-GB는 다른 페이지.

Next.js Metadata API

export const metadata = {
  alternates: {
    languages: {
      ko: "https://example.com/ko/about",
      en: "https://example.com/en/about",
      "x-default": "https://example.com/en/about",
    },
  },
};

Next.js App Router에서 metadata 객체로 자동 생성.

자주 보는 안티패턴

단방향 연결 — 한쪽만 가리킴

상대 URL

ko-KR 등 region 코드 부정확

x-default 누락

단방향

<!-- 한국어 페이지에만 -->
<link rel="alternate" hreflang="en" href="https://example.com/en/" />
<!-- 영어 페이지에는 ko 방향 없음 -->

구글이 hreflang 인정 안 함. 다국어 SEO 효과 0.

상대 URL

<link rel="alternate" hreflang="en" href="/en/about" />

환경별 다르게 해석. http/https 혼재 가능.

x-default 누락

<link rel="alternate" hreflang="ko" href="..." />
<link rel="alternate" hreflang="en" href="..." />

사용자 언어가 ko/en 외(독일·프랑스 등)일 때 fallback 페이지 모호.

해설

다국어·다지역 사이트의 언어별 페이지 연결. link-rel 카드에서 짧게 다뤘지만 — 다국어 SEO에서 가장 까다롭고 직접적인 신호라 전용 카드로 분리.

SEO 관점에서 가장 critical. 같은 콘텐츠의 한국어·영어·일본어 버전이 있을 때 hreflang이 언어별 인덱싱을 정확하게 만든다. 구글이 한국어 검색에 한국어 페이지, 영어 검색에 영어 페이지를 노출. hreflang이 빠지거나 잘못되면 — 영어 사용자에게 한국어 페이지가 노출되어 즉시 이탈, 언어 신호 손해.

GEO 관점에서 AI가 사용자 언어에 맞는 페이지를 인용. "in English"에 영어 페이지를, "한국어로"에 한국어 페이지를. hreflang이 명확한 사이트는 언어별 인용 후보 풀에 정확히 들어간다. 한국어 질문에 영어 페이지 인용 같은 언어 불일치가 사라진다.

AEO 관점에서 다국어 Featured Snippet에 영향. 같은 "환불 정책" 질문에 한국어와 영어 답변이 각각 다른 페이지에서 추출되어야 한다 — hreflang이 그 매칭의 신호.

A11y 관점에서 hreflang 자체의 a11y 영향은 적다. 스크린리더 발음 엔진은 html의 lang 속성 기반. 다만 hreflang과 lang이 일관되어야 사용자 경험이 매끄럽다.

자주 보는 안티패턴:

단방향 연결 — 가장 흔한 실수. 한국어 페이지가 영어를 가리키는데 영어 페이지에서 한국어 방향이 없음. 구글이 hreflang 자체를 인정 안 함. 양방향 필수.
상대 URL — /en/about 같은 형태. 환경(dev/staging/prod)별로 다르게 해석. 반드시 절대 URL.
region 코드 부정확 — ko-KR이 맞지만 ko_KR(언더스코어) 또는 ko-kr(소문자)로 박는 경우. 둘 다 인정되지만 표준은 ko-KR.
x-default 누락 — 사용자 언어가 지정된 언어 외일 때 fallback 페이지. 영어가 일반적이지만 사이트별로 다름.

hreflang 값 종류:

언어 코드만: ko, en, ja (지역 구분 없음)
언어-지역: ko-KR, en-US, en-GB, zh-CN, zh-TW
지역만: und-KR (언어 무관, 한국 지역)
x-default: 기본 fallback (지정 언어 외)

3가지 구현 방법:

HTML head의 link 태그 — 페이지마다 모든 언어 버전 link
HTTP 응답 헤더 — Link: <url>; rel="alternate"; hreflang="..."
사이트맵의 hreflang annotation — XML 사이트맵에 각 URL의 언어 버전 명시

세 방법은 함께 사용 가능. 큰 사이트는 사이트맵 + HTML link 병행이 안전.

Next.js App Router에서는 metadata.alternates.languages로 자동 생성. 페이지별 hreflang을 코드로 관리해 양방향 누락을 방지. 다국어 i18n 라이브러리(next-intl 등)도 hreflang 자동 처리.

소요유 사이트는 현재 한국어 단일 — hreflang 필요 없음. 다만 영어 글로벌 사이트로 확장 시 가장 먼저 챙겨야 할 SEO 인프라.

SEO·GEO·AEO·A11y 4축에서의 의미

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설