React
[next/react] metadata 설정하기
떼굴펜
2024. 9. 6. 17:37
정적 metadata 설정
// layout.tsx 또는 특정 페이지 컴포넌트 파일
export const metadata = {
title: '초보 개발자를 위한 리액트 입문',
description: '리액트를 처음 배우는 개발자를 위한 기초부터 심화까지의 과정을 담은 페이지'
};
동적 metadata 설정
import fetchProductDetails from '../path/to/api';
export async function generateMetadata({ params }) {
const product = await fetchProductDetails(params.id);
return {
title: `${product.name} - 상품 정보`,
description: product.description };
}
파일 기반 metadata
: 동일 경로에 다양한 metadata 설정이 있을 경우, 파일 기반 설정이 우선적으로 적용된다.)
// app/pages/about/metadata.json
{
"title": "회사 소개",
"description": "저희 회사의 비전과 사명을 소개합니다",
"robots": "index, follow"
}
내가 설정하지 않아도 필수적으로 포함되는 기본 meta tag
1. 문자 인코딩 태그: 웹 페이지의 문자 인코딩 설정
<meta charset="utf-8" />
2. 뷰포트 태그: 모바일 기기에서의 보기 영역을 제어
<meta name="viewport" content="width=device-width, initial-scale=1" />