React SPA의 AEO 최적화로 AI 가독성 점수 27점에서 85점으로 개선

My Portfolio Site Was Invisible to AI. Here's What Fixed It.

Kaustubh Jogle2026년 6월 28일5분intermediate

AI 요약

Context

Client-side Rendering 기반 React SPA 아키텍처로 인한 AI Crawler의 JavaScript 실행 불가 문제 발생. 결과적으로 index.html의 빈 div만 인식되어 AI 엔진에 사이트 콘텐츠가 노출되지 않는 가시성 결여 상태 분석.

AI Crawler 대상 콘텐츠 제공을 위한 블록 내 Semantic HTML 구현을 통한 텍스트 가독성 확보
JSON-LD Structured Data(Person, WebSite, FAQPage Schema) 도입을 통한 데이터의 구조적 의미 정의
Canonical URL 설정 및 robots.txt 내 AI Bot(GPTBot, ClaudeBot 등) 명시적 허용을 통한 인덱싱 경로 최적화
단순 아이콘 링크를 텍스트 기반 하이퍼링크로 전환하여 콘텐츠 간의 맥락적 연결성 및 권위 부여
llms.txt 파일 생성을 통한 AI 전용 사이트 설명서 제공으로 기계 학습 효율성 증대

AEO 종합 점수: 27/100 → 85+/100 상승
세부 항목 개선: Understandable(5→25), Trustworthy(0→10), Findable(11→25), Quotable(11→25)

실천 포인트

1. Client-side SPA 설계 시 <noscript> Fallback을 통한 텍스트 콘텐츠 확보 검토

2. 검색 엔진 및 AI 분석을 위한 JSON-LD 스키마 적용 필수화

3. 단순 UI 요소 중심의 링크를 의미론적 텍스트 링크로 교체하여 내부 연결성 강화

4. robots.txt 및 llms.txt를 통한 AI Bot 접근 제어 및 가이드 제공

태그