피드로 돌아가기
Reciprocal hreflang in Astro, only when both languages exist
Dev.toDev.to
Frontend

Reciprocal hreflang 조건부 렌더링을 통한 SEO 404 오류 원천 차단

Reciprocal hreflang in Astro, only when both languages exist

Aulvem2026년 6월 6일4분intermediate

AI 요약

Context

Astro 5 i18n 라우팅의 기본 기능 내 hreflang 자동 생성 부재로 인한 수동 구현 필요성 대두. 모든 언어에 대해 일괄적으로 alternate 링크를 생성할 경우 일부 언어에만 존재하는 페이지에서 404 오류 및 Google의 Reciprocal mismatch 경고가 발생하는 구조적 한계 존재.

Technical Solution

  • Content Collections 데이터를 기반으로 실제 존재하는 언어셋을 식별하는 blogAvailableLangs 헬퍼 함수 설계
  • draft: true 상태의 문서를 필터링하여 빌드 결과물과 실제 서빙 페이지 간의 불일치 제거
  • entrySlug를 통한 언어 접두사 제거로 언어 간 공통 식별자를 추출하여 교차 검증 수행
  • Seo.astro 컴포넌트에 availableLangs Prop을 도입하여 실제 존재하는 언어에 대해서만 <link rel="alternate">를 조건부 렌더링하는 구조 채택
  • 단일 언어 페이지에서도 Google 권장 사항 준수를 위해 x-default를 유일한 가용 언어로 할당하는 폴백 로직 구현
  • 페이지네이션 경로의 경우 언어별 포스트 수 차이에 따른 페이지 존재 여부를 Math.ceil 기반으로 계산하여 적용

실천 포인트

- 다국어 사이트 설계 시 단순 URL 매핑이 아닌 실제 콘텐츠 존재 여부를 기반으로 한 Metadata 렌더링 검토 - 빌드 타임에 결정되는 Static Site의 경우 Draft 상태의 콘텐츠가 SEO 태그에 반영되지 않도록 필터링 로직 필수 적용 - i18n 경로 처리 시 언어 접두사(Prefix) 제거 및 공통 Slug 추출을 통한 데이터 일관성 확보 - Google SEO 가이드라인에 따른 x-default 속성의 명시적 선언 여부 확인

태그

#Content Collections#Astro#hreflang#SEO#i18n
원문 읽기