[SEO] SEO와 Metadata 설정(Next.js)

Next.js를 사용하면 웹 애플리케이션의 SEO를 손쉽게 개선할 수 있습니다. SEO(Search Engine Optimization)는 검색 엔진에서 더 높은 가시성을 얻기 위해 중요한데, Next.js의 Metadata API를 활용하면 페이지마다 적절한 메타 정보를 설정하여 SEO를 최적화할 수 있습니다. 이번 글에서는 SEO가 무엇인지, 그리고 Next.js 13+ 버전의 app 디렉토리 기반 라우팅에서 메타데이터를 어떻게 설정할 수 있는지에 대해 자세히 살펴보겠습니다.

 

■ SEO란?

**SEO(검색 엔진 최적화)**는 웹사이트가 검색 엔진에서 더 잘 노출되도록 하는 일련의 작업입니다. 구글, 빙, 네이버와 같은 검색 엔진은 웹사이트를 색인(indexing)하고 검색 결과에 표시할 때, 메타데이터를 참고해 페이지의 내용을 파악합니다. SEO가 잘 이루어지면 관련 키워드 검색 시 사이트가 상위에 노출될 가능성이 높아지며, 이를 통해 더 많은 방문자를 유치할 수 있습니다.

메타 태그(Meta Tags)가 중요한 이유

• <meta name="description">: 페이지의 내용을 설명하는 태그로, 검색 엔진이 검색 결과에 이 내용을 표시합니다. 사용자에게 웹페이지의 주요 내용을 요약하여 전달함으로써 클릭 유도에 중요한 역할을 합니다.
• <link rel="canonical">: 중복된 콘텐츠가 여러 URL로 노출될 때, 이 태그를 통해 검색 엔진에 "정식" 버전의 페이지를 알릴 수 있습니다.
• <meta name="robots">: 검색 엔진 크롤러에게 페이지를 색인할지, 링크를 따라갈지 등의 행동 지침을 제공합니다.

 

■ Next.js 13+에서 Metadata 설정하기

Next.js 13+ 버전부터 도입된 app 디렉토리 기반의 라우팅을 통해 페이지별 메타데이터를 설정하는 것이 더 간편해졌습니다. metadata는 각 페이지나 레이아웃에 export const metadata 형태로 설정할 수 있습니다. 이때 적용되는 메타데이터의 우선순위가 있어, 특정 페이지에만 메타데이터를 다르게 설정하는 것도 가능합니다.

기본 구조

• 전역 레이아웃(app/layout.tsx): 모든 페이지에서 공통으로 사용할 메타데이터를 설정할 수 있습니다.
• 특정 페이지의 레이아웃(app/pageName/layout.tsx): 해당 경로의 모든 하위 페이지에 적용할 메타데이터를 설정할 수 있습니다.
• 특정 페이지(app/pageName/page.tsx): 개별 페이지에 적용할 메타데이터를 설정합니다.

우선순위 규칙

1. **app/pageName/page.tsx**의 metadata가 가장 높은 우선순위를 가집니다. 따라서 이 페이지에서 설정된 메타데이터가 최종적으로 적용됩니다.
2. **app/pageName/layout.tsx**에만 metadata가 정의되어 있고, 해당 페이지(page.tsx)에 metadata가 없다면 이 메타데이터가 적용됩니다.
3. **전역 레이아웃(app/layout.tsx)**의 메타데이터는 해당 경로의 모든 파일에 별도의 metadata가 없을 때만 적용됩니다.

이러한 우선순위 규칙을 통해 Next.js는 프로젝트의 규모가 커져도 간편하게 페이지별로 최적화된 메타데이터를 설정할 수 있도록 해줍니다.

// 예시 코드
import type { Metadata } from "next";

export const metadata: Metadata = { 
     title: "Taxi Share", 
     description: "경로가 비슷한 유저들끼리 택시비를 나눠내는 서비스",
};