# [[SEO]]

## 📌 Brief Summary
검색 엔진 최적화(SEO)는 웹사이트가 검색 엔진 결과에서 높은 순위를 차지하고 유기적 트래픽을 늘릴 수 있도록 웹사이트의 구조, 콘텐츠, 기술적 성능을 개선하는 전략적 과정입니다. 현대의 SEO는 단순한 키워드 최적화를 넘어 모바일 우선 인덱싱, Core Web Vitals와 같은 사용자 경험(UX) 지표, 그리고 AI 답변 엔진 최적화(AEO)까지 포괄적으로 고려해야 합니다. 특히 React와 같은 단일 페이지 애플리케이션(SPA) 환경에서는 클라이언트 사이드 렌더링(CSR)으로 인한 크롤링 및 인덱싱 누락 문제를 해결하기 위해 서버 사이드 렌더링(SSR) 등 검색 엔진 친화적인 렌더링 아키텍처를 도입하는 것이 필수적입니다.

## 📖 Core Content
*   **모바일 우선 인덱싱(Mobile-First Indexing) 및 사용자 경험 지표:** 
    구글은 모바일 버전의 사이트를 기본으로 인덱싱하며, 이는 SEO 성능을 결정짓는 핵심 요소입니다 [1, 2]. 2025년 기준 검색 랭킹에 직접적인 영향을 미치는 주요 지표로 Core Web Vitals(LCP, INP, CLS)가 활용되며, 웹사이트의 로딩 속도, 상호작용성, 시각적 안정성을 최적화하면 반송률이 감소하고 검색 가시성이 크게 향상됩니다 [3-7].
*   **React 및 SPA(단일 페이지 애플리케이션)에서의 SEO 기술적 한계:** 
    React와 같은 SPA는 기본적으로 클라이언트 사이드 렌더링(CSR)을 사용하기 때문에 초기 요청 시 내용이 없는 빈 HTML 셸을 제공합니다 [8, 9]. 이는 검색 엔진 봇이 자바스크립트 렌더링 큐에 의존하게 만드는 "투 웨이브 인덱싱(Two-wave indexing)" 현상을 초래하여 크롤링 예산(Crawl Budget) 낭비, 인덱싱 지연, AI 크롤러의 콘텐츠 접근 실패 등의 심각한 문제를 발생시킵니다 [10-14].
*   **렌더링 아키텍처의 전환 (SSR, SSG, ISR):** 
    SPA의 SEO 문제를 해결하기 위해서는 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 점진적 정적 재생성(ISR) 방식의 도입이 적극 권장됩니다 [15-17]. 서버에서 렌더링된 HTML을 제공함으로써 검색 엔진 봇과 AI 에이전트는 자바스크립트 실행을 대기할 필요 없이 즉시 콘텐츠와 메타데이터를 수집할 수 있으며, Next.js나 Remix 같은 프레임워크가 이러한 아키텍처 구현에 매우 적합합니다 [18-20].
*   **URL 라우팅 규칙 및 메타데이터의 동적 관리:** 
    SPA 라우팅 시 URL에 해시(`#`)를 사용하는 해시 라우팅은 검색 엔진이 해당 경로를 개별 페이지로 인식하지 못하므로 SEO에 치명적이며, 반드시 HTML5 History API를 활용한 깔끔한 URL 구조를 사용해야 합니다 [21-23]. 또한 봇은 자바스크립트의 `onClick` 이벤트를 추적하지 못하므로 내부 링크는 표준 `<a href>` 태그로 작성해야 하며, 페이지 이동에 따라 `<title>`과 Open Graph 태그가 동적으로 업데이트될 수 있도록 React Helmet이나 프레임워크 내장 기능을 활용해야 합니다 [21, 24, 25].
*   **AI 검색 엔진 및 차세대 SEO 대응:** 
    최근 SEO는 답변 엔진 최적화(AEO), 생성형 엔진 최적화(GEO)로 진화하고 있으며, ChatGPT나 Perplexity와 같은 AI 모델의 인용(Citation)을 얻기 위해서는 자바스크립트 장벽 없이 접근 가능한 HTML이 필수적입니다 [14, 26, 27]. AI 크롤러가 콘텐츠의 문맥과 엔티티를 명확히 이해할 수 있도록 시맨틱 HTML5 구조와 JSON-LD 형태의 Schema.org 구조화된 데이터(Structured Data)를 반드시 포함해야 합니다 [28, 29].

## 🔗 Knowledge Connections
- **Related Topics:** [[Core Web Vitals]], [[Server-Side Rendering (SSR)]], [[Single Page Application (SPA)]], [[Mobile-First Design]], [[Client-Side Rendering (CSR)]]
- **Projects/Contexts:** [[Next.js 및 React 애플리케이션의 렌더링 방식 최적화 맥락]], [[구글의 Page Experience 2025 업데이트 및 검색 랭킹 적용 프로젝트]]
- **Contradictions/Notes:** 동적 렌더링(Dynamic Rendering)은 과거 검색 봇에게만 사전 렌더링된 HTML을 보여주고 실제 사용자에게는 CSR을 제공하는 차선책으로 사용되었으나, 구글은 이를 클로킹(Cloaking) 위험이 있는 방법으로 보고 2026년 기준 더 이상 권장하지 않습니다(Deprecated). 따라서 근본적으로 SSR이나 SSG를 도입하는 것이 올바른 SEO 접근법입니다 [30, 31].

---
*Last updated: 2026-04-26*