🔎 Next.js를 이용한 SEO 최적화
리액트는 기본적으로 CSR 기반이기 때문에 구조적으로 SEO에 불리하다는 단점이 있다. 이 문제를 보완하기 위해 등장한 프레임워크가 바로 Next.js이며 이를 활용해 어떻게 SEO를 최적화할 수 있는지 살펴보자.
“CSR이 SEO에 불리한 이유”
CSR은 초기 HTML은 거의 비어 있고 브라우저가 JavaScript 파일을 이용하여 콘텐츠를 렌더링 하는 방식을 의미한다. React 나 Vue 같은 대부분의 SPA(Single Page Application)는 기본적으로 CSR을 기반으로 동작한다.
검색엔진 크롤러(Google, Naver 등)는 페이지에 접근하면 먼저 HTML 콘텐츠를 파싱 한다. 그런데 CSR 방식에서는 JavaScript 실행 전까지 콘텐츠가 존재하지 않으므로 검색엔진이 내용을 제대로 인식하지 못할 수 있다. 그로 인해 SEO 점수가 낮아지거나 검색 결과에 노출되지 않는 문제가 발생할 수 있다.
따라서 Next.js는 3가지 렌더링 방식을 제공한다.
- SSR(Server-Side Rendering) : 사용자의 요청이 들어올 때마다 서버에서 HTML을 생성해 응답한다.
- SSG(Static Site Generation) : 빌드 시에 HTML을 미리 생성해 정적 파일로 배포한다.
- ISR(Incremental Static Regeneration) : SSG처럼 정적으로 생성하되 일정 시간마다 서버에서 백그라운드로 재생성한다.
각각의 렌더링 방식은 장단점이 다르기 때문에 페이지의 성격에 따라 적절히 선택해야 한다. 그럼 본격적으로 SEO 최적화를 해보자.
1. 메타태그 설정
Next.js에서는 메타태그를 설정하는 방식이 라우팅 방식에 따라 달라진다. pages 디렉터리 기반의 기존 방식에서는 <Head> 컴포넌트를 사용하고 app 디렉터리 기반의 App Router 방식에서는 metadata 객체를 정의하는 방식으로 설정할 수 있다.
블로그의 경우 App Router 방식을 사용하였기 때문에 우선 공통적으로 사용할 메타데이터를 layout 파일에 정의해두었다.
그 후 페이지별로 메타데이터를 변경하고 싶을 때에는 page 파일별로 metadata 객체를 다시 정의하여 오버라이드 해준다.
블로그 글처럼 메타데이터를 일일이 정의하기 어려운 경우에는 generateMetadata() 함수를 사용하여 동적으로 메타데이터를 설정할 수 있다.
2. 이미지 최적화
Next.js는 기본적인 <img> 태그 대신 자체적으로 이미지 최적화를 지원하는 <Image> 컴포넌트를 제공하는데 대표적인 기능은 다음과 같다.
width, height 등의 속성을 설정하여 브라우저에 전송되는 이미지 용량을 최적화하고 브라우저가 지원하는 경우 자동으로 WebP 또는 AVIF 등의 최신 이미지 포맷으로 변환 해준다.
다양한 화면 크기에 맞춰 이미지를 자동으로 리사이징해 주기 때문에 반응형 웹사이트를 구현하는 데 유용하다.
이미지가 실제로 화면에 나타날 때까지 로딩을 지연시키는 Lazy Loading 기능을 기본적으로 내장하여 초기 페이지 로딩 속도를 향상시킨다.
3. 구조화된 데이터 (JSON-LD)
구조화 데이터란 구글과 같은 검색 엔진이 페이지의 의미와 구조를 이해하기 쉽도록 돕는 메타데이터이다. 일반적으로 JSON-LD 형식을 사용하며 App Router 방식에서는 head 파일을 이용하여 삽입한다.
// app/about/head.tsx
export default function Head() {
const jsonLd = {
"@context": "https://schema.org",
"@type": "Person",
"name": "BlueCool12",
"url": "https://pyomin.com/about",
"jobTitle": "Full Stack Developer"
};
return (
<script type="application/ld+json">
{JSON.stringify(jsonLd)}
</script>
);
}
블로그와 같이 검색 유입이 핵심인 웹사이트는 SEO 설정이 무엇보다 중요하기 때문에 Next.js가 제공하는 다양한 렌더링 방식과 기능들을 적극적으로 활용하는 것이 중요하다.
