개념 설명: Next.js <Head> 컴포넌트
Next.js에서 제공하는 <Head>는 HTML 문서의 <head> 영역에 메타데이터를 동적으로 주입하기 위한 내장 컴포넌트임. 일반적인 리액트 앱과 달리, 서버 사이드 렌더링(SSR)을 지원하는 Next.js의 특성상 검색 엔진 봇이 페이지를 크롤링할 때 정확한 메타 정보를 읽을 수 있도록 돕는 역할.
- 동적 메타데이터 관리: 각 페이지의 특성에 맞는 제목, 설명, 키워드 설정 가능.
- SEO 최적화: 검색 엔진 결과 페이지(SERP)에서 사이트 노출 순위 및 정보 가시성 향상.
- 사용자 경험 개선: 소셜 미디어 공유 시 매력적인 미리보기 카드 생성.
사용 상황 예시
이 개념은 주로 다음과 같은 상황에서 필수적으로 활용.
- 블로그 포스트 상세 페이지: 글 제목과 요약본을 메타 태그로 설정하여 검색 노출 극대화.
- 쇼핑몰 상품 페이지: 상품 이미지와 가격 정보를 소셜 공유 미리보기(OG Tag)로 제공.
- 브랜드 홍보 페이지: 사이트의 대표 이미지와 설명(Description)을 통해 브랜드 신뢰도 구축.
기본 문법 및 구조
핵심 구조 분석
import Head from 'next/head';
const MyPage = () => {
return (
<>
<Head>
{/* 브라우저 탭에 표시될 제목 */}
<title>한입북스</title>
{/* SNS 공유 시 표시될 이미지 */}
<meta property="og:image" content="/thumbnail.png" />
{/* SNS 공유 시 표시될 제목 */}
<meta property="og:title" content="한입북스" />
{/* SNS 공유 시 표시될 설명 */}
<meta
property="og:description"
content="한입 북스에 등록된 도서들을 만나보세요"
/>
</Head>
<div>페이지 콘텐츠</div>
</>
);
};title태그: 브라우저 상단 탭에 노출되는 텍스트로, 검색 결과의 제목으로 활용.og(Open Graph) 태그: 페이스북, 카카오톡 등 SNS에서 링크를 공유할 때 정보를 규격화하여 보여주는 프로토콜.
자주 하는 실수 (Mistakes)
초보자뿐만 아니라 숙련자도 놓치기 쉬운 포인트.
- 중복 태그 발생: 여러 컴포넌트에서
<Head>를 사용할 때 동일한 태그가 중복 생성될 위험. 이를 방지하기 위해key속성을 부여하여 마지막에 선언된 값만 적용되도록 설정 권장. - 클라이언트 컴포넌트 오남용: SEO는 초기 HTML 로드 시 정보가 있어야 함.
useEffect내부에서 메타 태그를 동적으로 수정할 경우, 일부 크롤러가 이를 인식하지 못할 가능성 존재. - 절대 경로 미사용:
og:image설정 시 상대 경로(/thumbnail.png)가 아닌 도메인을 포함한 절대 경로를 사용해야 일부 플랫폼에서 이미지가 정상적으로 출력.
핵심 요약
- Next.js 페이지별 메타데이터 삽입을 위한 내장 컴포넌트.
- 검색 엔진 최적화(SEO) 및 소셜 공유 미리보기 설정에 필수.
- 태그 중복 방지를 위한
key속성 활용 및 절대 경로 사용 권장.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
