리액트 앱(SPA)을 구글 검색 1페이지에 올리는 법

"SEO 하려면 무조건 Next.js 써야 한다던데요?" 반은 맞고 반은 틀린 말입니다. 물론 SSR(Server Side Rendering)이 유리하긴 하지만, 이미 Create React App(Vite)으로 다 만들어놨는데 언제 다 엎나요. CSR(Client Side Rendering) 환경에서도 검색 엔진 최적화(SEO) 할 수 있습니다. 포기하지 마세요.

이 글에서는 SPA 환경에서 SEO를 최대한 끌어올리는 실전 전략을 다룹니다.

구글 봇은 자바스크립트를 실행할까?

먼저 알아야 할 사실: 2026년 기준 구글봇은 자바스크립트를 실행합니다. Chrome의 헤드리스 브라우저를 사용해서 페이지를 렌더링한 후 크롤링합니다.

그러나 문제가 있습니다:

렌더링 대기열: 구글봇이 자바스크립트를 실행하려면 "렌더링 큐"에 들어가서 기다려야 합니다. SSR 페이지는 즉시 인덱싱되지만, CSR 페이지는 며칠에서 몇 주가 걸릴 수 있습니다.
렌더링 실패 가능성: API 호출이 느리거나, 에러가 나거나, 로딩 상태가 길면 구글봇이 빈 페이지를 인덱싱할 수 있습니다.
다른 검색 엔진: 네이버, Bing 등은 자바스크립트 실행 능력이 구글보다 떨어집니다.

그래서 CSR에서도 SEO를 하려면 아래 전략들이 필수입니다.

1. 메타 태그에 목숨 거세요

구글 봇이 페이지에 들어왔는데 <title>React App</title> 이거 하나 딱 있다? 바로 뒤로 가기 누릅니다. react-helmet-async 같은 라이브러리 써서 페이지마다 타이틀, 설명(Description)을 동적으로 바꿔줘야 합니다.

필수 메타 태그 체크리스트

title 태그: 50~60자 사이, 페이지마다 고유하게. "회사명 | 페이지명" 형식이 일반적입니다.
meta description: 150~160자. 검색 결과에 직접 표시되므로 클릭하고 싶게 작성하세요. CTA(Call to Action)를 넣으면 효과적입니다.
canonical URL: 중복 페이지 문제를 방지합니다. ?sort=price 같은 쿼리 파라미터 변형 URL이 많을 때 특히 중요합니다.
Open Graph(OG) 태그: 카카오톡, 페이스북 공유할 때 썸네일과 설명이 뜨게 하려면 필수입니다. og:title, og:description, og:image는 꼭 넣으세요.
Twitter Card 태그: 트위터(X)에서 공유될 때의 미리보기를 설정합니다.

각 페이지에 고유한 메타 정보를 넣는 게 핵심입니다. 모든 페이지가 같은 타이틀과 설명을 가지면 구글이 "이 사이트 다 같은 페이지네?"라고 판단합니다.

2. 시맨틱 태그 안 쓰면 바보

<div> 떡칠하지 말고 의미 있는 태그를 쓰세요.

헤더는 <header>
메뉴는 <nav>
본문은 <main>, <article>
사이드바는 <aside>
각 섹션은 <section>
버튼은 <button> (제발 <div onClick> 하지 마세요...)

검색 로봇은 시각장애인과 같습니다. 코드를 읽어서 구조를 파악하는데, 시맨틱 태그가 바로 그 이정표가 됩니다.

헤딩 구조의 중요성

H1~H6 태그의 계층 구조를 정확하게 지켜야 합니다:

H1은 페이지당 하나만: 페이지의 가장 중요한 제목. H1 없으면 구글이 어리둥절합니다.
순서를 건너뛰지 마세요: H1 다음에 바로 H3가 오면 안 됩니다. H1 → H2 → H3 순서를 지키세요.
CSS로 스타일만 바꾸세요: "작게 보여야 해서 H4 썼다"는 잘못된 접근입니다. 시맨틱 의미에 맞는 태그를 쓰고, 스타일은 CSS로 조절하세요.

3. 프리렌더링(Pre-rendering): CSR의 구원자

Next.js로 갈아타기 막막하다면, 프리렌더링이라는 중간 솔루션이 있습니다.

프리렌더링은 빌드 타임이나 요청 시점에 페이지를 미리 렌더링해서 정적 HTML을 생성합니다. 검색 봇이 방문하면 이 HTML을 보여주고, 일반 사용자는 기존 CSR로 서비스합니다.

프리렌더링 도구

Prerender.io: SaaS 방식. 설정이 간단하고, 캐싱도 자동으로 해줍니다.
React-snap: 빌드 시 Puppeteer로 모든 페이지를 크롤링해서 정적 HTML을 생성합니다. CI/CD 파이프라인에 통합하기 좋습니다.
서버 미들웨어: User-Agent를 확인해서 봇이면 프리렌더링된 HTML을, 사용자면 SPA를 서빙합니다.

SPA도 SEO가 된다고? (Next.js 없이)