Astro SEO 메타데이터를 DB 연동으로 전환해 비개발자도 관리

최근 Astro 프로젝트에서 정적 SEO 메타데이터를 DB-driven 패턴으로 전환하는 작업을 했다. 커밋은 작아 보이지만, 이 변경이 팀의 SEO 관리 방식과 배포 파이프라인에 영향을 주는 꽤 중요한 리팩터링이었다.

왜 정적에서 DB-driven으로?

Astro는 정적 사이트 생성기다. 빌드 타임에 모든 것을 결정하고 HTML을 뿌려낸다. 초기에는 SEO 메타 정보(og:title, meta description, canonical URL 등)도 하드코딩되어 있었고, 변경할 때마다 빌드를 다시 돌려야 했다.

문제는 비즈니스 측 SEO 최적화 요청이 점점 많아졌다는 것. 페이지 제목이나 설명을 A/B 테스트하고 싶거나, 다국어 지원을 확대할 때마다 코드 커밋 → 빌드 → 배포를 거쳐야 했다. 또한 여러 페이지가 같은 메타 구조를 사용하면서 중복도 심했다.

그래서 getSiteSeo 함수라는 표층 패턴을 도입했다. 함수 이름만 봐도 "사이트 SEO 정보를 조회한다"는 의도가 명확하고, 내부적으로 DB나 설정 시스템에서 가져오도록 추상화할 수 있다.

astro.config.mjs와 Base.astro의 역할 변화

astro.config.mjs는 빌드 설정 파일이다. 여기서는 getSiteSeo를 "전역 설정이나 헬퍼"로 등록하거나, 빌드 시점에 필요한 SEO 데이터 초기화 로직을 추가했을 가능성이 높다.

src/layouts/Base.astro는 모든 페이지가 상속하는 공통 레이아웃. 여기가 핵심이다. 기존에는 각 페이지에서 개별적으로 메타 태그를 렌더링했다면, 이제 Base.astro에서 getSiteSeo를 호출해서 메타 데이터를 한 곳에서 관리하게 된 것이다.

<!-- Base.astro 개선 전 (하드코딩) -->
<meta property="og:title" content={pageTitle} />
<meta name="description" content={pageDesc} />

<!-- 개선 후 (DB-driven) -->
{(() => {
  const seoMeta = getSiteSeo(page.slug);
  return (
    <>
      <meta property="og:title" content={seoMeta.title} />
      <meta name="description" content={seoMeta.description} />
      {/* ... 기타 메타 */}
    </>
  );
})()}

이렇게 하면 모든 페이지가 자동으로 동일한 SEO 패턴을 따르게 된다.

팀 관점: 패턴화의 가치

이런 작은 리팩터링이 중요한 이유는, 기술적 일관성을 확보하면서 비개발자도 SEO를 관리할 수 있게 된다는 점이다.

• 마케팅팀이 직접 수정 가능: DB 대시보드에서 제목/설명을 변경하면 다음 요청부터 반영된다 (물론 캐싱 전략에 따라 다르지만).
• 코드 리뷰 줄이기: 단순 문구 수정으로 인한 커밋을 줄일 수 있다.
• 버그 감소: 하드코딩된 메타를 놓치는 실수가 줄어든다.
• A/B 테스트 쉬움: 같은 페이지에 여러 버전의 메타를 즉시 테스트할 수 있다.

다만 주의할 점도 있다:

• 캐싱 전략: DB 조회가 매번 발생하면 빌드 시간이 길어진다. 보통 요청 시점에 캐싱하거나, ISR(Incremental Static Regeneration) 같은 패턴을 고려해야 한다.
• 폴백 처리: DB에 데이터가 없으면 어떻게 할지 명확히 해야 한다.
• 테스트: 정적이 아니게 되면서 테스트도 복잡해진다. 목(mock) 데이터로 일관성 있게 테스트해야 한다.

이런 식으로 사소해 보이는 "패턴화"가 팀의 개발 속도와 운영 방식을 바꿔간다. 단순히 코드만 깔끔해지는 게 아니라, 비개발자와의 협업 구조 자체가 개선되는 것이다.

🛒 이 글과 어울리는 추천 상품

• 모니터 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 사무의자 쿠팡에서 보기 →

*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.