<head> — 문서 골격 태그 도감

올바른 사용

<html> 직속 첫 번째 자식

title, meta, link, script 정도만

본문 콘텐츠(p, h1 등)는 head에 절대 넣지 않기

charset은 <head>의 첫 줄

표준 head 구조

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>페이지 제목</title>
  <meta name="description" content="..." />
  <link rel="canonical" href="..." />
</head>

charset이 가장 먼저, viewport 두 번째. 이후 title/description/canonical.

Next.js Metadata API

export const metadata = {
  title: "...",
  description: "...",
};

Next.js App Router에서 head 직접 작성 대신 metadata 객체로 선언.

자주 보는 안티패턴

본문 콘텐츠가 head 안에 들어감

여러 개의 title

charset 누락 또는 head 중간에 위치

외부 script가 head에 무거운 로드

본문이 head에 들어감

<head>
  <title>...</title>
  <h1>이건 head 안에 들어가면 안 됨</h1>
</head>

HTML 명세 위반. 브라우저가 자동 보정하지만 일부 환경에서 렌더 깨짐.

charset 누락

<head>
  <title>한국어 페이지</title>
</head>

브라우저가 charset을 추측. 일부 환경에서 한글 깨짐.

해설

브라우저 화면에 직접 보이지 않는 모든 것이 들어가는 컨테이너. title, meta, link, script, style — 페이지의 정체성과 인프라를 담는다. head 자체는 SEO·a11y·GEO에 직접적인 시각 영향은 없지만, 그 안에 들어가는 것들이 전부 검색·접근성의 핵심 신호.

SEO 관점에서 head의 역할 자체보다 안에 들어가는 다섯 줄이 중요하다 — title, meta description, link canonical, og:tags, structured data. 이들이 모두 head 안에 있다. 결국 head가 정리됐는가 = 사이트의 SEO 인프라가 정리됐는가의 거의 동의어. 잘못된 head는 본문 콘텐츠가 아무리 좋아도 검색 노출에서 손해를 본다.

GEO 관점에서 AI 인덱서(GPTBot, ClaudeBot, PerplexityBot)는 페이지를 크롤할 때 head를 먼저 파싱한다. 어떤 페이지인지 판단의 첫 신호. head가 정리된 페이지는 AI의 페이지 이해 비용이 적고, 결과적으로 인용 가능성이 올라간다.

A11y 관점에서 head 안의 <title>이 스크린리더가 페이지 진입 시 첫 번째로 발화하는 텍스트. 시리즈 #1에서 봤듯 — 스크린리더 사용자가 어디로 이동했는지를 인지하는 핵심 단서.

자주 보는 안티패턴: 본문 콘텐츠가 head에 들어감(브라우저가 자동 보정해 body로 옮기지만 일부 환경에서 깨짐), charset이 누락되거나 title 뒤로 밀림(charset은 반드시 head의 첫 줄 — 그 전 바이트가 다른 인코딩으로 해석될 수 있음), 무거운 외부 script가 head에 동기 로드되어 First Contentful Paint를 막는 경우. async/defer 또는 body 끝으로 옮기는 게 표준.

Next.js App Router에서는 head를 직접 작성하지 않고 metadata 객체로 선언하는 패턴이 권장된다. head 안의 모든 태그가 metadata API의 각 필드(title, description, openGraph, alternates 등)로 정리되어, 중복·누락·잘못된 위치 같은 실수가 원천 차단된다.

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

SEO

GEO

AEO

A11y

올바른 사용

자주 보는 안티패턴

해설