SEO (Search Engine Optimization, 검색 엔진 최적화)는 검색 엔진이 웹 페이지를 올바르게 인식하고 색인할 수 있도록 구조와 메타 정보를 최적화하는 작업이다.
Next.js에서는 next/head
를 활용하여 각 페이지의 <head>
영역에 필요한 메타 데이터를 삽입할 수 있다.
<head>
태그 안의 <title>
및 <meta>
태그에서 추출된다.<title>
, <meta name="description">
, Open Graph (og:
), Twitter Card 정보 등을 제공하는 것이 중요하다.
next/head
컴포넌트를 사용해 각 페이지별로 HTML <head>
태그를 설정할 수 있다.<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> |
_document.tsx
(공통 설정)
<html lang="ko">
, 문자 인코딩, 파비콘, 뷰포트 등import { Html, Head, Main, NextScript } from 'next/document';
export default function Document() {
return (
<Html lang="ko">
<Head>
<meta charSet="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
페이지마다 고유한 제목, 설명, 공유 이미지 등을 설정
SEO와 SNS 공유 카드가 각 페이지별로 달라지도록 함
ISR/SSG fallback 상태일 때도 기본적인 <head>
태그를 포함하는 것이 중요
import Head from 'next/head';
export default function BookPage({ book }) {
return (
<><Head>
<title>{book.title} | 한입북스</title>
<meta name="description" content={book.summary} />
<meta property="og:title" content={book.title} />
<meta property="og:description" content={book.summary} />
<meta property="og:image" content={book.coverImage} />
<meta property="og:type" content="book" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={book.title} />
<meta name="twitter:description" content={book.summary} />
<meta name="twitter:image" content={book.coverImage} />
</Head>
<main>{/* 페이지 콘텐츠 */}</main>
</>
);
}
<Head>
fallback
상태에서는 페이지가 아직 빌드되지 않아 로딩 중이기 때문에