피드로 돌아가기
Dev.toFrontend
원문 읽기
JSON-LD 도입을 통한 React 앱의 Google Rich Results 가시성 확보
Why Google Can't See Your React Breadcrumbs (And the 4-Line Fix)
AI 요약
Context
Client-side Rendering(CSR) 기반 React 앱의 Breadcrumb UI가 검색 엔진 크롤러에 의해 인식되지 않는 문제 발생. 브라우저 DOM에 렌더링된 UI 요소와 검색 엔진이 해석하는 Structured Data의 분리 구조로 인한 인덱싱 누락 확인.
Technical Solution
- User Interface와 Search Engine을 위한 데이터 경로를 완전히 분리하여 설계
- Schema.org 표준 기반의 JSON-LD 포맷을
<head>섹션에 주입하는 구조 채택 - CSR 환경에서 Custom Hook을 통한 동적
<script type="application/ld+json">생성 및 Unmount 시 제거 로직 구현 - SSR 환경(Next.js)에서는 Initial HTML 응답에 Schema가 포함되도록 Server-side Rendering 태그 삽입 방식으로 전환
- 다수 페이지 템플릿 대응을 위해 반복적인 Schema 빌더를 추상화한 SEO 라이브러리 도입 고려
- URL 일관성 유지를 통해 Google의 데이터 유효성 검증 통과 및 무시 방지 설계
실천 포인트
- UI 컴포넌트와 별개로 JSON-LD Structured Data가 `<head>`에 정의되었는지 확인 - CSR 환경인 경우 useEffect 기반 주입 로직의 생명주기 관리 검토 - SSR/SSG 환경인 경우 HTML 초기 응답에 script 태그가 포함되는지 네트워크 탭 검증 - Google Rich Results Test 도구를 활용하여 Schema 파싱 여부 최종 확인 - 실제 서비스 URL과 Schema 내 item URL의 일치 여부 상시 모니터링