무엇
<meta>는 설명·키워드·인코딩 같은 문서 메타데이터를 담는 요소다. React 19부터는 컴포넌트 트리 어디에 렌더하든 React가 자동으로 <head>로 올려 준다.
페이지 컴포넌트가 자기 메타데이터를 그 자리에서 선언할 수 있다.
export function SiteMapPage() {
return (
<>
<meta name="keywords" content="React" />
<meta name="description" content="사이트맵" />
<h1>사이트맵</h1>
</>
)
}
무슨 일이 일어나나
React는 <meta>를 렌더 위치와 무관하게 <head>로 끌어올린다. 태그는 name·charSet·httpEquiv·itemProp 중 정확히 하나를 가져야 하고, 값은 대개 content로 준다. name은 메타데이터의 종류(description·keywords·author 등), charSet은 인코딩(유효 값은 "utf-8"), httpEquiv는 처리 지시다.
예외는 itemProp이다. itemProp이 붙으면 이 <meta>는 문서 전체가 아니라 페이지의 특정 구획에 대한 메타데이터라, hoisting되지 않고 그 자리에 인라인으로 남는다.
사용법
문서 수준 메타데이터는 name + content 짝으로 쓴다. 컴포넌트 안에 두어도 최종 DOM에서는 <head>로 모인다.
export function PageMeta() {
return (
<>
<meta name="description" content="zerovoids — 한 브랜드 두 자아" />
<meta name="author" content="zerovoids" />
</>
)
}
특정 구획의 메타데이터는 itemProp으로 표시한다. 이건 head로 올라가지 않는다.
<section itemScope>
<meta itemProp="description" content="이 구획에 대한 설명" />
<p>…</p>
</section>
실무 예시
Open Graph 태그는 property 속성을 쓰는데, 공식 문서가 예시로 다루진 않지만 React는 표준 속성이라 그대로 통과시킨다.
export function OpenGraph({ title }: { title: string }) {
return (
<>
<meta property="og:title" content={title} />
<meta property="og:type" content="article" />
</>
)
}
왜 중요한가
메타데이터는 SEO·소셜 공유 카드·문서 인코딩에 닿는 표면이라 작지만 무시하기 어렵다. React 19의 hoisting은 이 태그를 관련 컴포넌트 곁에서 선언하게 해 준다. 다만 실전에서는 Next.js의 Metadata API처럼 프레임워크가 이 영역을 대신 관리하는 경우가 많아, 날것의 <meta>를 직접 렌더할 일은 스택에 따라 갈린다. 그래도 어떤 prop이 무엇을 뜻하고 itemProp이 왜 예외인지는 알아 두면 유용하다.
Reference