Next.js로 SEO 친화적 React 앱 만들기
Next.js의 SSR과 SSG를 활용해 검색 엔진에 최적화된 React 애플리케이션 구축 방법과 메타 태그, 구조화 데이터, 크롤링 설정을 설명.
목차
개요
검색 엔진 최적화(SEO)는 웹 서비스의 가시성을 좌우한다. React 단일 페이지 애플리케이션은 클라이언트 렌더링 특성 때문에 검색 봇 노출에 제약이 생긴다. Next.js는 SSR(Server-Side Rendering)과 SSG(Static Site Generation)를 제공해 초기 HTML을 서버에서 생성함으로써 SEO 성능을 개선한다. 이 글에서는 next.js seo 설정 관점에서 필요한 핵심 요소를 예제와 함께 설명한다.
SSR과 SSG의 차이
SSR(실시간 렌더링)
getServerSideProps를 사용하는 방식이다. 요청마다 서버에서 HTML을 생성하므로 개인화된 페이지나 빈번한 데이터 변경에 적합하다. 검색 엔진이 완전한 HTML을 받아가므로 초기 크롤링에 유리하다.
SSG(정적 생성)
getStaticProps와 getStaticPaths를 사용해 빌드 시점에 HTML을 생성한다. 빠른 응답성과 캐시 이점이 크다. 자주 변경되지 않는 콘텐츠, 블로그, 마케팅 페이지에 적합하다.
예제: SSG와 SSR 기본 구조
export async function getStaticProps() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json())
return { props: { posts } }
}
export async function getServerSideProps() {
const data = await fetch('https://api.example.com/live').then(r => r.json())
return { props: { data } }
}
메타 태그와 Head 설정
페이지별로 title, description, canonical, Open Graph, Twitter Card 등을 적절히 설정해야 한다. nextjs 메타 태그 설정은 next/head 컴포넌트를 통해 손쉽게 적용할 수 있다. 하나의 재사용 가능한 SEO 컴포넌트를 만들어 관리하면 일관성 유지에 도움이 된다.
SEO 컴포넌트 예제
import Head from 'next/head'
export default function SEO({ title, description, url, image }) {
return (
<Head>
<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={url} />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={url} />
<meta property="og:image" content={image} />
<meta name="twitter:card" content="summary_large_image" />
</Head>
)
}
동적 메타 태그와 데이터 패칭
동적 라우트에서는 getStaticProps나 getServerSideProps에서 데이터를 받아와 SEO 컴포넌트에 전달한다. react seo ssr ssg 관점에서 중요한 점은 검색 엔진이 크롤링할 때 올바른 메타 정보를 포함한 HTML을 반환하는 것이다.
동적 페이지 예
export async function getStaticPaths() {
const posts = await fetch('https://api.example.com/posts').then(r => r.json())
return { paths: posts.map(p => ({ params: { slug: p.slug } })), fallback: 'blocking' }
}
export async function getStaticProps({ params }) {
const post = await fetch(`https://api.example.com/posts/${params.slug}`).then(r => r.json())
return { props: { post } }
}
// 페이지 컴포넌트 내부에서
// <SEO title={post.title} description={post.excerpt} url={`https://site.com/posts/${post.slug}`} />
구성 요소별 체크리스트
- 제목(title): 각 페이지 고유하고 핵심 키워드 포함
- 설명(description): 120자 내외로 페이지 요약
- canonical: 중복 콘텐츠 방지용 정규 URL 지정
- Open Graph / Twitter Card: 소셜 공유용 메타
- 구조화 데이터(JSON-LD): 검색 결과 확장 요소 노출
- sitemap.xml: 검색 엔진에게 사이트 구조 제공
- robots.txt: 크롤러 제어
구조화 데이터 예
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Article",
"headline": "예시 제목",
"author": { "@type": "Person", "name": "작성자" },
"datePublished": "2023-01-01"
}
</script>
사이트맵과 robots 설정
사이트맵은 검색 엔진에게 페이지 우선 순위와 업데이트 주기를 알려준다. Next.js 프로젝트에서는 빌드 시 sitemap을 생성하는 스크립트를 추가하거나 API 라우트를 통해 동적으로 제공할 수 있다. robots.txt는 크롤러 접근을 제어하므로 비공개 경로나 중복 페이지를 차단할 때 유용하다.
성능과 접근성
SEO는 메타 태그뿐 아니라 성능과 접근성에도 크게 의존한다. Lighthouse 점수 개선을 목표로 이미지 최적화, 응답 시간 단축, 적절한 ARIA 속성 적용 등을 병행한다. SSG로 정적 페이지를 제공하면 CDN 캐시 효과로 로드 속도가 크게 향상된다.
검증과 모니터링
Search Console과 같은 도구로 인덱싱 상태를 확인한다. 구조화 데이터는 Google의 테스트 도구에서 검증한다. 페이지를 배포한 뒤 크롤링 결과와 검색 트래픽 변화를 지속적으로 모니터링해 설정을 조정한다.
요약
Next.js는 SSR과 SSG를 통해 React 앱의 SEO를 향상시킨다. 핵심은 올바른 메타 태그 설정, 구조화 데이터 적용, 사이트맵·robots 관리, 그리고 성능 최적화다. 위에서 소개한 nextjs 메타 태그 설정과 예제를 기반으로 프로젝트에 맞는 전략을 수립하면 검색 엔진에서의 가시성이 개선된다.