원문: https://react.dev/reference/react-dom/components/meta

컴포넌트

내장 브라우저 <meta> 컴포넌트는 문서에 메타데이터(metadata)를 추가할 수 있게 해줍니다.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

레퍼런스
사용법
- 문서에 메타데이터로 주석 달기
- 문서 내 특정 항목에 메타데이터로 주석 달기

레퍼런스

`<meta>`

문서에 메타데이터를 추가하려면 내장 브라우저 <meta> 컴포넌트를 렌더링하세요. 어떤 컴포넌트에서든 <meta>를 렌더링할 수 있으며, React는 항상 해당 DOM 요소를 문서의 <head>에 배치합니다.

<meta name="keywords" content="React, JavaScript, semantic markup, html" />

아래 예시를 참고하세요.

Props

<meta>는 모든 공통 요소 속성을 지원합니다.

다음 중 정확히 하나의 props를 가져야 합니다: name, httpEquiv, charset, itemProp.

name: 문자열. 문서에 첨부할 메타데이터의 종류를 지정합니다.
charset: 문자열. 문서에서 사용하는 문자 집합을 지정합니다. 유효한 값은 "utf-8"뿐입니다.
httpEquiv: 문자열. 문서 처리를 위한 지시어를 지정합니다.
itemProp: 문자열. 문서 전체가 아닌 특정 항목에 대한 메타데이터를 지정합니다.
content: 문자열. name 또는 itemProp과 함께 사용 시 첨부할 메타데이터의 값을, httpEquiv와 함께 사용 시 지시어의 동작을 지정합니다.

특별한 렌더링 동작

React는 <meta> 컴포넌트에 해당하는 DOM 요소를 React 트리의 어디에 렌더링하든 항상 문서의 <head>에 배치합니다. <head>는 DOM 내에서 <meta>가 위치할 수 있는 유일한 위치이지만, 특정 페이지를 나타내는 컴포넌트가 <meta>를 자체적으로 렌더링할 수 있다면 편리하고 구성이 용이합니다.

예외: <meta>에 itemProp이 있으면 특별 동작이 없습니다. 이 경우 문서 전체가 아니라 특정 부분의 메타데이터로 취급합니다.

사용법

문서에 메타데이터로 주석 달기

키워드, 요약, 저자명 등과 같은 메타데이터로 문서에 주석을 추가할 수 있습니다. React는 이 메타데이터를 React 트리의 어디에 렌더링하든 문서의 <head>에 배치합니다.

<meta name="author" content="John Smith" />
<meta name="keywords" content="React, JavaScript, semantic markup, html" />
<meta name="description" content="API reference for the <meta> component in React DOM" />

아래와 같이 어떤 컴포넌트에서든 <meta>를 렌더링할 수 있습니다. React는 <meta> DOM 노드를 문서 <head>에 배치합니다.

import ShowRenderedHTML from './ShowRenderedHTML.js';

export default function SiteMapPage() {
  return (
    <ShowRenderedHTML>
      <meta name="keywords" content="React" />
      <meta name="description" content="A site map for the React website" />
      <h1>Site Map</h1>
      <p>...</p>
    </ShowRenderedHTML>
  );
}

문서 내 특정 항목에 메타데이터로 주석 달기

itemProp 속성을 사용해 <meta> 컴포넌트를 문서 내 특정 항목에 메타데이터로 주석을 달 수 있습니다. 이 경우 React는 이러한 주석을 문서의 <head>에 배치하지 않고 다른 React 컴포넌트와 같이 배치합니다.

<section itemScope>
  <h3>특정 항목에 주석 달기</h3>
  <meta itemProp="description" content="API reference for using <meta> with itemProp" />
  <p>...</p>
</section>