피드로 돌아가기
My React Portfolio SEO Checklist: From 0 to Rich Results in 48 Hours
Dev.toDev.to
Frontend

48시간 만에 React 포트폴리오 SEO 점검 완료하여 Google Rich Results Test 통과 달성함

My React Portfolio SEO Checklist: From 0 to Rich Results in 48 Hours

Nguyen Xuan Hai2026년 4월 2일11beginner

Context

React SPA는 Google이 JavaScript 렌더링 가능함에도 많은 개발자가 SEO 친화적이지 않다고 인식함. 실제 문제는 렌더링이 아니라 메타 태그, 구조화된 데이터 등 기본 fundamentals 누락임.

Technical Solution

  • Meta Tags: public/index.html에 title, description, Open Graph, Twitter Card, canonical URL 포함함
  • JSON-LD Structured Data: Person, WebSite, ProfilePage, ItemList, FAQPage 스키마 6개 적용함
  • FAQPage Schema: AI 검색 엔진(ChatGPT, Perplexity, Google AI Overviews)이 일반 단락 대비 3배 높은 비율로 콘텐츠 추출함
  • robots.txt: GPTBot, PerplexityBot, ClaudeBot 등 AI 봇을 명시적으로 허용함
  • noscript Fallback: Google의 2단계 인덱싱(크롤링 후 렌더링 대기) 지연을 우회하여 즉시 인덱싱 가능함

Impact

48시간 내에 zero structured data에서 Google Rich Results Test 통과 달성함

Key Takeaway

AI 검색 엔진 최적화를 위해서는 구조화된 데이터가 필수임. FAQPage 스키마는 AI 모델이 처리하기 적합한 질문-답변 쌍 형식을 제공하여Citation Rate를 높임.


React 포트폴리오에서 Google Rich Results 및 AI 검색 엔진 노출을 위해서는 5~6개 JSON-LD 스키마 적용, AI 봇 허용 robots.txt 설정, noscript 폴백 구현을 포함하는 종합적인 SEO 점검清单 실행이 필요함

원문 읽기