SOYOYU
문서 골격필수

<html>

모든 HTML 문서의 루트 요소. lang 속성이 SEO·a11y·AI 모두에 큰 신호.

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

SEO

●●●●○높음

lang 속성이 페이지 언어를 검색엔진에 알림. 다국어 SEO의 기반.

GEO

●●●●○높음

AI가 사용자 언어에 맞는 페이지를 인용할 때 lang 속성 우선 참고.

AEO

●●●○○중간

답변 인용 시 동일 언어 페이지가 우선. lang 명시가 후보 자격.

A11y

●●●●●결정적

스크린리더의 발음 엔진이 lang을 보고 언어를 전환. 누락 시 외국어 발음으로 읽힘.

올바른 사용

  • lang 속성 명시 (예: lang="ko")
  • 다국어는 lang="ko-KR" 같은 region 코드까지
  • <!DOCTYPE html>은 그 위에
  • 한 페이지에 한 개
한국어 사이트 표준
<!DOCTYPE html>
<html lang="ko">
  <head>...</head>
  <body>...</body>
</html>

lang 속성으로 스크린리더 발음 엔진과 검색엔진의 언어 인식.

다국어 페이지의 region
<html lang="ko-KR">

한국어와 일본 한국어 등을 구분해야 할 때 region 코드 사용.

자주 보는 안티패턴

  • lang 속성 누락
  • lang="en"인데 한국어 콘텐츠
  • <!DOCTYPE html> 누락 — quirks mode
  • html 안에 head/body 외 요소 직접 넣기
lang 누락
<!DOCTYPE html>
<html>
  <head>...</head>
</html>

스크린리더가 영어 발음으로 한국어 읽음. 구글 언어 인식 모호.

콘텐츠와 lang 불일치
<html lang="en">
<body>안녕하세요. 한국어 사이트입니다.</body>

자동 번역 도구가 다른 언어로 오인. SEO 언어 신호 손해.

해설

모든 HTML 문서의 시작점. <!DOCTYPE html> 바로 아래에 단 하나의 <html> 요소가 위치한다. 이 한 줄에 박힌 lang 속성이 스크린리더의 발음, 검색엔진의 언어 인덱싱, AI의 답변 언어 매칭을 한 번에 결정한다.

SEO 관점에서 lang="ko"는 구글의 다국어 인덱싱에 직접 영향한다. 같은 콘텐츠의 한국어 버전과 영어 버전이 있을 때, 구글은 각 페이지의 lang과 hreflang을 종합해 한국어 검색에 한국어 페이지, 영어 검색에 영어 페이지를 노출한다. lang이 비어 있거나 잘못 박혀 있으면 — 구글이 콘텐츠 자체를 분석해 언어를 추측하는데, 추측은 틀릴 수 있다. 한국어 사이트에 영어 키워드("SEO consulting")가 섞여 있으면 영어로 오인되는 경우가 흔하다.

GEO 관점에서 AI Overviews와 LLM은 사용자의 언어 컨텍스트에 맞는 페이지를 인용한다. "한국어로 답해줘"에는 한국어 페이지를, "in English"에는 영어 페이지를. lang이 명확한 페이지는 언어별 인용 후보 풀에 정확히 들어간다.

A11y 관점에서 lang의 중요도가 가장 직접적이다. NVDA·VoiceOver의 발음 엔진은 lang 속성을 보고 어떤 언어 모드로 발화할지 결정한다. lang이 영어인데 한국어 콘텐츠를 만나면 — 스크린리더가 한글을 영어 발음 규칙으로 읽어 들리지 않는 소음이 된다. 시각장애 사용자에게 가장 큰 좌절 중 하나.

자주 보는 안티패턴: lang 자체 누락(스크린리더 fallback이 시스템 기본값으로 가서 환경별로 다름), 부트스트랩 템플릿 그대로 lang="en"을 둔 한국 사이트, region 없는 lang="ko"로 두고 일본어 한자 표기를 섞는 경우. 한국 사이트의 표준은 lang="ko" 또는 더 정확히 lang="ko-KR". Next.js의 layout.tsx에서 <html lang="ko">로 한 번 설정하면 모든 페이지에 적용된다.