메타데이터(Metadata)란?
메타데이터는 웹페이지의 정보를 나타내는 데이터.
예를 들어, 우리가 보통 웹 브라우저 상단에서 볼 수 있는 제목이나 페이지 설명 같은 것들이 metadata에 해당.
브라우저나 검색엔진, 소셜 미디어가 이 정보를 읽고 사용자에게 표시함.
대표적인 메타데이터 요소
- title: 페이지 제목
- description: 페이지 내용을 설명하는 간단한 문구
- open graph(og) Tags: 페이스북이나 트위터 같은 소셜 미디어에서 공유할 때 보여지는 정보
- Author: 페이지나 콘텐츠 작성자
Next.js에서 metadata 설정하는 방법
next/head 컴포넌트를 사용하여 쉽게 설정 가능.
이걸 통해 페이지별로 동적으로 metadata 추가 가능
import Head from 'next/head';
export default function Home() {
return (
<>
<Head>
<title>내 Next.js 사이트</title>
<meta name="description" content="이 페이지는 Next.js로 만든 사이트입니다!" />
<meta name="author" content="나의 이름" />
<meta property="og:title" content="내 Next.js 사이트" />
<meta property="og:description" content="이 페이지는 Next.js로 만든 사이트입니다!" />
<meta property="og:image" content="/images/123456.jpg" />
</Head>
<main>
<h1>Welcome to my site!</h1>
</main>
</>
);
}
이 코드에서 Head 컴포넌트 안에 <title>, <meta> 태그들을 넣어서 metadata를 설정할 수 있고, 페이지마다 제목이나 설명을 다르게 설정할 수 있는 점이 next.js의 강력한 장점.
SEO 최적화를 위한 메타데이터 설정 tip!!
- Title 태그는 50-60자 내외로 설정하는 게 좋고, 주요 키워드를 포함해야 검색 엔진에서 더 잘 노출될 수 있음
- Description은 페이지의 핵심 내용은 150-160자로 간결하고 명확하게 설명하는게 좋음. 검색 결과에서 바로 표시되기 때문에 중요한 역할을 함
주의: 레이아웃과 페이지만 메타데이터를 export 한다는 점 기억!!
fe()