React SEO: 상위 노출되는 React 앱을 위한 렌더링, 메타데이터, 링크

간단 퀴즈

SEO가 맞습니까? 어떻게 시작해야 합니까?

4개 중 1번째 질문25%

사람들이 귀사가 파는 것을 Google에서 검색합니까?

네, 그럴 것 같음아니요, 새롭거나 아주 틈새임모름

React SEO는 React 애플리케이션을 검색엔진과 AI 어시스턴트가 크롤링하고 색인하고 이해할 수 있게 만드는 작업입니다. React 자체는 중립적이며, 문제는 모든 것을 브라우저에서 렌더링하는 데서 생깁니다. Google은 JavaScript SEO 기본사항에서 JavaScript 앱을 크롤링, 렌더링, 색인 생성의 세 단계로 처리하며, 서버 측 렌더링이나 사전 렌더링은 "사용자와 크롤러 모두에게 사이트를 더 빠르게 만들고, 모든 봇이 JavaScript를 실행할 수 있는 것은 아니므로 여전히 좋은 방법"이라고 확인합니다.

React는 왜 SEO에 까다롭습니까?

싱글 페이지 애플리케이션으로 만든 React 앱이 전달하는 HTML 파일에는 빈 루트 div와 script 태그 정도만 들어 있습니다. 브라우저가 JavaScript를 내려받아 실행하고 페이지를 만듭니다. HTML만 읽는 크롤러에는 색인할 제목도, 본문도, 링크도 보이지 않습니다.

Googlebot은 JavaScript를 실행하지만 별도 단계에서 처리합니다. 페이지를 크롤링하고, 렌더링 대기열에 넣고, 헤드리스 Chromium에서 렌더링한 뒤에야 렌더링된 링크와 콘텐츠를 사용합니다. 단계가 늘어날 때마다 실패할 가능성(스크립트 오류, API 차단, 시간 초과)이 생기고, 새 페이지가 검색 결과에 나타나기까지 시간이 더 걸립니다. 이 과정은 JavaScript SEO 가이드에서, 색인을 앞당기는 방법은 Google 색인 생성 글에서 설명합니다.

다른 봇은 이만큼 기다려 주지 않습니다. Vercel이 2024년 12월에 발표한 분석 The rise of the AI crawler는 "주요 AI 크롤러 중 현재 JavaScript를 렌더링하는 것은 없다"고 밝히며 GPTBot, ChatGPT-User, OAI-SearchBot, ClaudeBot, PerplexityBot을 언급했습니다. 클라이언트에서 렌더링한 React 페이지는 Google이 색인하더라도 ChatGPT, Claude, Perplexity에는 보이지 않습니다.

React 사이트에는 어떤 렌더링 방식을 써야 합니까?

React 팀은 이제 새 앱을 프레임워크로 시작하라고 권장합니다. 2025년 2월 14일 Create React App을 지원 중단하면서 공지에서 "서버 렌더링은 SEO를 개선할 수 있다"고 밝혔고, 콘텐츠를 보기 전에 내려받아야 할 JavaScript를 줄여 성능도 높인다고 설명했습니다. 검색에 약한 방식부터 강한 방식까지 정리하면 다음과 같습니다.

동적 렌더링에 대해 Google 문서는 "임시방편이었으며 장기적인 해결책이 아니었다"고 분명히 밝히고, 대신 서버 측 렌더링, 정적 렌더링, 하이드레이션을 권장합니다. 프레임워크를 고르고 있다면 Next.js SEO 가이드에서 렌더링 방식, Metadata API, 사이트맵을 자세히 다룹니다.

이전이 어렵다면 몇 가지만 주의해도 Google은 싱글 페이지 앱을 색인할 수 있습니다. 조건은 싱글 페이지 애플리케이션 SEO 가이드에 정리했으며, 이 글의 나머지 내용은 두 경우 모두에 적용됩니다.

React에서 제목과 메타 태그는 어떻게 설정합니까?

React 19(2024년 12월 5일 안정화) 이후 컴포넌트는 title, meta, link 태그를 직접 렌더링할 수 있으며, React가 이를 문서의 head로 옮깁니다. React 19 릴리스 노트는 이 기본 지원이 "클라이언트 전용 앱, 스트리밍 SSR, Server Components"에서 모두 동작한다고 설명합니다. React 19 이전에는 react-helmet이나 react-helmet-async 같은 라이브러리가 이 역할을 했으며, 경로별로 기본값을 덮어쓸 때는 지금도 유용합니다.

function ProductPage({ product }) {
  return (
    <>
      <title>{`${product.name} | Shop`}</title>
      <meta name="description" content={product.summary} />
      <link rel="canonical" href={`https://example.com/p/${product.slug}`} />
      <h1>{product.name}</h1>
    </>
  )
}

어떤 방법을 쓰든 세 가지 규칙이 적용됩니다.

• 페이지당 제목 하나: 고유하고 내용을 잘 설명해야 합니다. React 문서는 여러 컴포넌트가 동시에 제목을 렌더링하면 "브라우저와 검색엔진의 동작이 정의되지 않는다"고 경고합니다. 텍스트와 변수를 섞지 말고 하나의 문자열(템플릿 리터럴)을 전달하십시오.
• URL마다 설명과 canonical 하나씩: 페이지 데이터로 생성합니다. 메타 태그 생성기로 문안을 만들고, canonical 검사기로 실제 게시된 상태를 확인할 수 있습니다.
• Open Graph 태그는 초기 HTML에: 공유되는 페이지에 특히 중요합니다. 링크 미리보기 봇은 대개 원본 HTML을 읽기 때문입니다.

어떤 라우팅과 링크 실수가 색인을 막습니까?

Google은 "href 속성이 있는 HTML a 요소여야만 링크를 발견할 수 있다"고 밝히며, 서로 다른 콘텐츠를 불러오는 데 URL 프래그먼트를 쓰지 말라고 권합니다. React SEO 실패의 대부분은 라우팅의 세부 사항에서 비롯됩니다.

Google이 무엇을 렌더링하는지 보려면 Search Console의 URL 검사 도구에서 테스트한 페이지의 HTML을 확인하거나, 주요 템플릿을 색인 가능성 검사기로 점검하십시오.

React에서 사이트맵과 구조화된 데이터는 어떻게 처리합니까?

React에는 사이트맵 기능이 내장되어 있지 않습니다. 빌드 시 경로와 데이터로 sitemap.xml을 생성하고(또는 프레임워크의 사이트맵 기능을 사용하고), 200을 반환하는 canonical URL만 넣은 뒤 robots.txt에서 참조하십시오. 작은 정적 사이트라면 XML 사이트맵 생성기로 충분합니다.

구조화된 데이터도 메타데이터와 같은 규칙을 따릅니다. JSON-LD 스크립트를 페이지와 함께, 같은 데이터로, 가능하면 서버에서 렌더링하십시오. Google은 JavaScript로 삽입된 JSON-LD를 렌더링 후 읽을 수 있지만, 초기 HTML에 없는 마크업은 렌더링하지 않는 크롤러에게는 존재하지 않습니다. 글에는 Article, 전자상거래에는 Product, 사이트 전체에는 Organization, 깊은 페이지에는 BreadcrumbList를 사용하십시오.

성능은 React SEO에 어떤 영향을 줍니까?

큰 JavaScript 번들은 Core Web Vitals를 떨어뜨립니다. 페이지가 반응하기 전에 브라우저가 코드를 내려받고 해석하고 하이드레이션해야 하므로, 특히 모바일에서 Largest Contentful Paint와 Interaction to Next Paint에 부담이 됩니다. Create React App에 관한 React 팀의 공지는 서버 렌더링이 더 적은 JavaScript와 완전한 HTML 문서를 보내므로 First Contentful Paint가 빨라지고 INP도 낮아질 수 있다고 설명합니다. 실천 방법은 React.lazy로 경로별 코드 분할, 크기를 명시한 이미지 제공, 첫 화면 아래 컴포넌트의 지연 로딩, 외부 스크립트 점검입니다.

React SEO 체크리스트에는 무엇이 들어가야 합니까?

1. 색인 대상 URL은 모두 완전한 HTML을 반환합니다(서버 렌더링 또는 사전 렌더링). curl로 확인합니다.
2. URL마다 고유한 제목, 설명, 자기 참조 canonical이 있습니다.
3. history 기반 경로를 쓰고 해시 URL이 없으며, 모든 내부 링크가 href가 있는 a로 렌더링됩니다.
4. 실제 상태 코드: 없는 페이지는 404, 이전된 페이지는 301 또는 308.
5. 경로와 같은 데이터로 만든 sitemap.xml을 robots.txt에 선언합니다.
6. JSON-LD를 페이지와 함께 렌더링하고 리치 결과 테스트로 검증합니다.
7. 렌더링에 필요한 스크립트, 스타일, API를 robots.txt에서 허용합니다.
8. 경로별로 코드를 분할하고 실제 사용자의 Core Web Vitals를 모니터링합니다.

React 사이트를 AI 답변에 노출하려면 어떻게 해야 합니까?

GEO(생성형 엔진 최적화)는 접근성에서 시작합니다. AI 크롤러는 원본 HTML을 가져가므로, React 페이지는 JavaScript 없이도 본문, 제목, JSON-LD를 제공해야 읽히고 요약되고 인용될 수 있습니다. AI 크롤링 가능성 점검으로 이 봇들이 페이지에서 무엇을 받는지 확인할 수 있습니다. 두 번째 조건은 인용할 가치가 있는 콘텐츠로, 섹션마다 질문 하나에 답하고 출처, 수치, 명확한 정의를 갖춘 페이지입니다.

이 콘텐츠 영역을 자동화하는 것이 저희 제품 Sorank입니다. Sorank는 autopilot으로 SEO와 GEO를 수행하는 소프트웨어로, 블로그 글 생성기가 출처, 내부 링크, 이미지를 갖춘 글을 매월 20개, 60개 또는 120개 작성하고 게시하며, webhook으로 React나 Next.js 같은 맞춤형 사이트에도 연결됩니다. SEO Chat은 사이트의 검색 성과에 대한 질문에 대화 형식으로 답합니다.

정리하면 HTML은 서버에서 제공하고, URL마다 고유한 제목, 설명, canonical을 지정하며, 실제 링크를 사용하는 것입니다. 그러면 React 사이트도 다른 사이트처럼 상위 노출되고 AI 어시스턴트도 읽을 수 있습니다. Google과 AI를 위한 글을 사이트에 꾸준히 공급하려면 Sorank 요금제를 확인하십시오. 월 49달러부터 시작하며 3일 무료 체험을 제공합니다.