1. 개념 요약

SEO (Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진이 웹 페이지를 올바르게 인식하고 색인할 수 있도록 구조와 메타 정보를 최적화하는 작업이다.

Next.js에서는 next/head를 활용하여 각 페이지의 <head> 영역에 필요한 메타 데이터를 삽입할 수 있다.


2. 배경 지식


3. 상세 설명

3-1. 권장하는 <head> 태그 목록 및 역할

태그 목적/설명 위치
<title> 페이지 제목, 브라우저 탭과 검색 결과 제목에 표시됨 모든 페이지 <Head>
<meta name="description"> 페이지 설명, 검색 결과 요약에 사용됨 모든 페이지 <Head>
Open Graph 메타 태그 SNS 공유 시 미리보기(썸네일, 제목, 설명 등) 정보 제공 모든 페이지 <Head>
og:title 공유 시 제목 모든 페이지 <Head>
og:description 공유 시 설명 모든 페이지 <Head>
og:image 공유 시 이미지 URL 모든 페이지 <Head>
Twitter Card 메타 태그 트위터에서 공유 시 카드 형태 지정 모든 페이지 <Head>
twitter:card 카드 종류(예: summary_large_image) 모든 페이지 <Head>
twitter:title 트위터 카드 제목 모든 페이지 <Head>
twitter:description 트위터 카드 설명 모든 페이지 <Head>
twitter:image 트위터 카드 이미지 URL 모든 페이지 <Head>
<meta charset="UTF-8"> 문자 인코딩 설정 (UTF-8 권장) _document.tsx
<html lang="ko"> 문서 언어 설정, 검색엔진 및 접근성 향상 _document.tsx
<meta name="viewport"> 모바일 기기 화면 크기 및 확대/축소 설정 _document.tsx 또는 페이지 <Head>
<link rel="icon" href="/favicon.ico"> 브라우저 탭 파비콘 설정 _document.tsx 또는 페이지 <Head>

3-2. 각 위치별 권장 사용법

3-4. fallback 페이지에서의 <Head>