피드로 돌아가기
How I Built a Trilingual Astro Site for Indian Card Games (and What I Learned About i18n SEO)
Dev.toDev.to
Frontend

Astro 5와 hreflang 자동화로 구현한 Lighthouse 100점 다국어 SEO 사이트

How I Built a Trilingual Astro Site for Indian Card Games (and What I Learned About i18n SEO)

Clarence Yu2026년 6월 5일5분intermediate

AI 요약

Context

인도 내 4G 네트워크 환경의 불안정성과 3개 국어(영어, 힌디어, 벵골어) 대응 필요성에 따른 고성능 다국어 사이트 구축 필요. 113개 이상의 롱폼 콘텐츠를 관리하며 검색 엔진 최적화(SEO)와 초기 로딩 속도를 동시에 확보해야 하는 제약 조건 직면.

Technical Solution

  • Content-first 아키텍처 기반의 Astro 5 채택을 통한 Client-side JavaScript 0KB 달성 및 런타임 오버헤드 제거
  • Zod Schema를 활용한 MDX Frontmatter 검증으로 빌드 타임의 타입 안정성 및 데이터 정합성 확보
  • TranslationKey 기반의 Hreflang Triangulation 유틸리티 구현을 통한 다국어 페이지 간 상호 참조 그래프 자동 생성
  • 빌드 파이프라인 내 hreflang 클러스터 무결성 검사 로직을 통합하여 누락된 번역 페이지로 인한 SEO 손실 방지
  • Noto Sans Devanagari/Bengali 폰트의 글리프 서브셋팅(Subset)을 통한 폰트 페이로드 최적화
  • Schema.org의 MobileApplication 및 Review 마크업 적용으로 검색 결과 내 Rich Snippets 노출 유도

실천 포인트

- 다국어 사이트 설계 시 각 언어 페이지 간 상호 참조(Cross-referencing)가 완벽한지 검증하는 빌드 스크립트 도입 - 인도/동남아 등 네트워크 환경이 열악한 지역 타겟팅 시 폰트 서브셋팅 및 Zero-JS 전략 검토 - MDX 사용 시 Zod를 통해 콘텐츠 메타데이터의 스키마를 강제하여 휴먼 에러 방지

태그

#SSG#Astro#hreflang#SEO#i18n
원문 읽기