Headless Browser 검증과 Static Generation을 통한 SEO 및 오디오 재생률 최적화

I built an SEO-first internet radio site — and learned why `curl` can't validate audio streams

niks172026년 6월 13일4분intermediate

AI 요약

Context

기존 라디오 서비스들이 채택한 JS 기반 SPA 구조로 인한 검색 엔진 인덱싱 지연 및 가시성 확보의 한계 발생. 단순 HTTP 상태 코드 기반의 스트림 검증 방식이 실제 브라우저 재생 가능 여부를 보장하지 못하는 기술적 괴리 존재.

Node.js 스크립트를 통한 500개 이상의 정적 HTML 페이지 생성으로 검색 엔진 크롤링 효율 극대화
Supabase RLS(Row Level Security) 설정을 통한 서버리스 백엔드 구현 및 API 보안 체계 구축
Headless Browser 기반의 canplay 이벤트 리스너를 활용하여 코덱 호환성 및 실제 재생 가능 여부를 검증하는 Validation 로직 도입
Icecast 루트 마운트 경로의 특이성 해결을 위해 URL 끝단 세미콜론(;) 처리를 포함한 정밀한 엔드포인트 검증 수행
CORS 헤더 부재 시 발생하는 Web Audio API 오류 해결을 위해 crossOrigin 설정이 서로 다른 두 개의 Audio Element를 활용한 Fallback 전략 설계
8초에서 14초로 Timeout 임계값을 확장하여 버퍼링 지연으로 인한 False Negative 발생률 감소

실천 포인트

미디어 재생이 핵심 기능인 서비스는 HTTP 200 응답이 아닌 실제 브라우저 런타임의 Media Event를 통해 데이터 유효성을 검증해야 함

태그