1. 개념 설명 및 기본 원리
SEO(검색엔진 최적화)는 검색 엔진이 웹 사이트의 구조와 내용을 잘 이해하도록 돕는 과정
- Sitemap & RSS: 검색 엔진 크롤러에게 사이트의 지도와 최신 업데이트 소식을 전달하여 빠른 인덱싱 유도.
- 시멘틱 태그: HTML 구조에 의미를 부여하여 기계가 콘텐츠의 중요도를 파악하게 함.
- 메타데이터: 페이지의 제목, 설명, 오픈 그래프 등을 정의하여 검색 결과와 SNS 공유 화면을 최적화함.
2. 사용 상황 예시 및 구현 방법
a) 메타데이터 설정 (Metadata API)
App Router에서는 layout.js나 page.js에서 metadata 객체를 내보내는 것만으로 설정 가능. 동적 페이지의 경우 generateMetadata 함수를 활용함.
// 정적 메타데이터
export const metadata = {
title: '내 블로그',
description: '코딩 지식 공유',
};
// 동적 메타데이터
export async function generateMetadata({ params }) {
const post = await getPost(params.id);
return { title: post.title };
}b) Sitemap & RSS 발행
Next.js는 sitemap.js를 통해 파일 기반 또는 동적 사이트맵 생성을 지원함. RSS 피드는 route.js를 사용하여 XML 형식으로 응답을 반환하도록 설정함.
c) 시멘틱 태그 활용
단순 div 대신 header, main, section, article, footer 등을 사용하여 문서의 계층 구조를 명확히 함. 이는 웹 접근성 향상과 SEO에 직결됨.
3. 기본 문법 요약
- Metadata:
export const metadata: Metadata = { ... }형태의 명시적 선언. - Sitemap:
app/sitemap.ts위치에default함수를 선언하여MetadataRoute.Sitemap타입의 배열 반환. - Semantic Tag: 레이아웃 구조 내에서
<article>,<nav>등 의미 있는 HTML5 태그 적극 사용.
4. 자주 하는 실수
- 중복 메타데이터: 상위 레이아웃과 하위 페이지에서 동일한 태그를 중복 정의하여 혼선 초래.
- 잘못된 사이트맵 경로:
robots.txt에 사이트맵 주소를 명시하지 않아 크롤러가 찾지 못하는 경우 발생. - 비시멘틱 태그 남용: 디자인 편의를 위해 모든 요소를
div로 구성하여 콘텐츠 의미 해석 방해.
핵심 요약
- Metadata API를 통한 선언적 관리 및 동적 생성 필수
- sitemap.ts와 Route Handler를 이용한 자동 인덱싱 환경 구축
- HTML5 시멘틱 태그 사용으로 문서의 구조적 의미 강화
