<meta>
소개
브라우저 내장 <meta> 컴포넌트를 사용하면 문서에 메타데이터를 추가할 수 있어요.
<meta name="keywords" content="React, JavaScript, semantic markup, html" /><meta>는 페이지의 설명, 키워드, 작성자, 문자 인코딩 등 문서에 대한 정보를 담는 데 사용돼요. 검색 엔진 최적화(SEO)나 브라우저에 정보를 제공할 때 필수적인 요소예요!
목차
레퍼런스
<meta>
문서 메타데이터를 추가하려면, 브라우저 내장 <meta> 컴포넌트를 렌더링하세요. 어떤 컴포넌트에서든 <meta>를 렌더링할 수 있고, React는 항상 해당하는 DOM 요소를 문서 head에 배치할 거예요.
<meta name="keywords" content="React, JavaScript, semantic markup, html" />Props
<meta>는 모든 공통 요소 props를 지원해요.
다음 props 중 정확히 하나를 가져야 해요: name, httpEquiv, charset, itemProp. <meta> 컴포넌트는 이러한 props 중 어느 것이 지정되었는지에 따라 다르게 동작해요.
name: 문자열이에요. 문서에 첨부될 메타데이터의 종류를 지정해요.charset: 문자열이에요. 문서가 사용하는 문자 집합을 지정해요. 유일하게 유효한 값은"utf-8"이에요.httpEquiv: 문자열이에요. 문서 처리를 위한 지시문을 지정해요.itemProp: 문자열이에요. 문서 전체가 아니라 문서 내의 특정 항목에 대한 메타데이터를 지정해요.content: 문자열이에요.name또는itemPropprops와 함께 사용될 때 첨부될 메타데이터를,httpEquivprop과 함께 사용될 때는 지시문의 동작을 지정해요.
특별한 렌더링 동작
React는 React 트리의 어디에서 렌더링되든 상관없이 <meta> 컴포넌트에 해당하는 DOM 요소를 항상 문서의 <head> 안에 배치할 거예요. <head>는 DOM 내에서 <meta>가 존재할 수 있는 유일하게 유효한 위치지만, 특정 페이지를 나타내는 컴포넌트가 <meta> 컴포넌트 자체를 렌더링할 수 있다면 편리하고 구성 가능성을 유지할 수 있어요.
여기에는 한 가지 예외가 있어요: <meta>에 itemProp prop이 있으면 특별한 동작이 없어요. 이 경우 문서에 대한 메타데이터가 아니라 페이지의 특정 부분에 대한 메타데이터를 나타내기 때문이에요.
사용법
메타데이터로 문서에 주석 달기
키워드, 요약, 작성자 이름 같은 메타데이터로 문서에 주석을 달 수 있어요. 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는 문서 <head>에 <meta> DOM 노드를 넣을 거예요.
// src/App.js
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>
);
}위 예시에서 <meta> 태그들이 SiteMapPage 컴포넌트 안에 있지만, React가 자동으로 HTML의 <head> 섹션에 배치해줘요!
일반적인 메타데이터 활용 예시:
<meta name="description" content="...">: 검색 엔진이 검색 결과에 표시할 페이지 설명<meta name="keywords" content="...">: 페이지와 관련된 키워드들<meta name="author" content="...">: 페이지 작성자<meta charset="utf-8">: 문자 인코딩 (보통 페이지 최상단에 위치)<meta name="viewport" content="width=device-width, initial-scale=1">: 모바일 반응형을 위한 뷰포트 설정
문서 내 특정 항목에 메타데이터로 주석 달기
itemProp prop과 함께 <meta> 컴포넌트를 사용해서 문서 내 특정 항목에 메타데이터로 주석을 달 수 있어요. 이 경우 React는 이러한 주석을 문서 <head> 안에 배치하지 않고 다른 React 컴포넌트처럼 배치할 거예요.
<section itemScope>
<h3>Annotating specific items</h3>
<meta itemProp="description" content="API reference for using <meta> with itemProp" />
<p>...</p>
</section>위 코드에서 itemProp이 있으면, 이 메타데이터는 문서 전체가 아니라 해당 <section> 내의 특정 항목에 대한 정보를 나타내므로, <head>로 이동하지 않고 그 자리에 그대로 있어요.
itemProp은 구조화된 데이터(Structured Data)를 마크업할 때 사용되는데, 검색 엔진이 페이지 콘텐츠를 더 잘 이해할 수 있도록 도와줘요. 예를 들어:
<article itemScope itemType="http://schema.org/Article">
<h1 itemProp="headline">React 배우기</h1>
<meta itemProp="datePublished" content="2024-01-15" />
<meta itemProp="author" content="Kim Developer" />
<p itemProp="articleBody">React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리예요...</p>
</article>이렇게 하면 검색 엔진이 이 페이지가 기사이고, 제목과 작성자, 게시 날짜를 명확히 알 수 있어요!
사이트맵
