SEO 메타 태그를 DB 기반으로 전환해 동적 주입 실현
목차
SEO 메타 태그 관리를 하드코딩에서 DB 기반으로 옮겼다. Astro 설정 레이어와 레이아웃 컴포넌트에 공통 패키지를 연결해서, 페이지별로 필요한 메타 데이터를 동적으로 주입하는 시스템을 만들었다.
왜 SEO 메타를 DB에서 관리해야 했는가
Open Graph, Twitter Card, 구조화된 데이터(Schema)를 담은 메타 태그는 검색 엔진과 SNS 크롤러가 페이지를 이해하는 첫 번째 손잡이다. 문제는 페이지마다, 때론 같은 페이지도 실시간 데이터에 따라 다른 메타 값이 필요하다는 점이다.
예를 들어 상품 페이지라면 제품명, 가격, 이미지, 설명이 DB에 있는데, 메타 태그에 반영하려면 페이지 템플릿과 DB 레이어를 연동해야 한다. 수동으로 각 페이지에 메타 조합을 하드코딩하면 유지보수가 악몽이다. 데이터가 변경될 때마다 코드를 수정해야 하고, 새로운 페이지 타입을 추가할 때마다 반복된다.
더 큰 문제는 폴백(fallback)의 부재다. 만약 특정 페이지가 메타를 명시하지 않으면? 혹은 동적 데이터가 일시적으로 못 왔으면? 검색 결과에는 깨진 내용이나 제너릭한 기본값이 보이고, 사용자 경험도 떨어진다.
해결책: DB-driven 폴백 아키텍처
공통 패키지(@hedvion/common/seo_db.mjs)를 통해 SEO 메타를 관리하는 레이어를 만들었다. 핵심은 두 군데 변경이다:
| 파일 | 역할 | 변경 의미 |
|---|---|---|
| astro.config.mjs | 사이트 전역 설정 | SEO DB 폴백 엔진을 Astro 런타임에 통합 |
| src/layouts/Base.astro | 모든 페이지가 상속하는 레이아웃 | 각 페이지별 메타 생성 로직을 이 레이아웃에서 처리 |
Astro의 설정 단계에서 SEO 데이터 소스를 등록하면, 빌드 타임과 런타임 모두에서 메타 데이터를 일관되게 제공할 수 있다. Base 레이아웃은 모든 페이지가 거쳐가는 관문이므로, 여기서 <head> 섹션을 동적으로 구성하기 최적의 지점이다.
// 의사코드: DB에서 메타를 얻고, 없으면 폴백
async function getPageMeta(pageContext) {
const dbMeta = await seoDb.fetch(pageContext.id);
return dbMeta || {
title: defaultTitle,
description: defaultDescription,
image: defaultImage,
};
}
이렇게 하면 콘텐츠 변경 시 코드 수정이 불필요하다. DB에서 값을 수정하면 다음 빌드/배포 또는 CDN 재검증 시 자동으로 반영된다.
팀 관점에서의 의사결정
이 작업이 들어온 배경엔 두 가지 압박이 있었다.
첫째, 콘텐츠팀과 개발팀의 느슨한 연결. SEO 메타를 수정하려면 개발자에게 요청해야 했다. 작은 변경도 코드 리뷰 → 배포 사이클을 거쳐야 했다. 이건 병목이고, 확장 불가능한 구조다.
둘째, 다양한 페이지 타입의 메타 요구사항. 상품, 기사, 카테고리, 프로필 페이지 각각 메타 전략이 다르다. 각 타입별로 템플릿을 하나하나 수정하는 대신, DB 스키마를 설계해서 한 번에 관리하는 게 낫다고 봤다.
공통 패키지를 쓴 건 재사용성과 버전 관리를 고려한 결정이었다. 만약 이 로직을 이 프로젝트에만 박아놓으면, 다른 팀/프로젝트에서 같은 문제를 다시 풀어야 한다. 공통 패키지로 분리하면 한 곳에서 버그 수정, 개선하면 모든 곳에 자동 반영된다.
배운 점과 주의사항
SEO 메타 시스템을 만들면서 깨달은 몇 가지:
- 레이아웃 레이어를 "필터"처럼 쓰기: Base 레이아웃은 단순 마크업 감싸기 이상의 역할을 할 수 있다. 데이터 변환, 폴백 로직, 보안 필터까지 여기서 처리하면 일관성 있다.
- 폴백의 계층화가 중요: 페이지별 메타 → 카테고리 기본값 → 사이트 기본값 이렇게 우선순위를 명확히 해야 부분 장애가 전체를 깨뜨리지 않는다.
- 빌드 타임 vs. 런타임: Astro는 정적 생성 가능하지만, SEO 데이터가 실시간 변하는 서비스라면 런타임 폴백을 고려해야 한다. 우리는 CDN 캐싱 + 주기적 갱신으로 균형을 맞췄다.
코드 리뷰할 때도 "이 메타는 정말 필요한가?", "폴백이 충분한가?", "성능에 영향은?" 같은 질문을 던졌다. 작은 기능이지만 SEO는 비즈니스에 직결되니까.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.