개발 slecs

채용공고별 SEO 메타 태그를 DB에서 동적으로 주입하도록 개선

목차

취업 정보 사이트의 각 채용공고마다 검색 엔진이 인식할 수 있는 동적 SEO 메타 태그를 DB에서 직접 가져오도록 구조를 개선했다.

배경: 메타 태그는 요청마다 달라져야 한다

SEO 메타 태그는 웹 애플리케이션에서 가장 중요한 요소 중 하나다. og:title, og:description, description 같은 태그가 정확하지 않으면 검색 결과나 SNS 공유 시 사용자에게 엉뚱한 정보가 보인다. 특히 채용공고처럼 각 페이지마다 서로 다른 정보를 다루는 서비스에서는 더욱 그렇다.

기존에는 Astro 레이아웃이나 설정에서 정적으로 메타 태그를 관리하거나, 부분적으로 props 로 전달받는 방식이었을 것 같다. 하지만 이렇게 하면:
- 채용공고가 수백 개, 수천 개로 늘어날 때 각각을 일일이 페이지화하기 어렵다
- DB의 공고 정보가 변경되어도 메타 태그는 구식 상태로 남을 수 있다
- 템플릿 엔진이나 정적 생성 시점과 데이터 최신성이 맞지 않을 수 있다

새 패턴: getSiteSeo() 로 데이터 레이어와 프레젠테이션 분리

이번 작업에서는 getSiteSeo() 라는 함수를 통해 DB에서 메타 정보를 직접 조회하는 방식으로 바꿨다. 변경된 파일들을 보면:

파일 역할 변경 의미
src/layouts/Layout.astro 페이지 레이아웃 getSiteSeo 호출 로직이 중앙에서 관리되는 곳
astro.config.mjs Astro 빌드 설정 새로운 데이터 페칭 로직 또는 환경 변수 지원
package.json 의존성 DB 연동이나 새로운 유틸 라이브러리 추가

이렇게 하면 몇 가지 이점이 생긴다:

  • 동적성: 공고 데이터가 DB에서 변경되는 즉시 메타 태그도 반영된다
  • 확장성: 새로운 채용공고를 추가할 때 별도의 SEO 설정이 필요 없다
  • 일관성: 모든 페이지가 동일한 getSiteSeo() 함수를 거치므로 형식과 로직이 일관된다

Layout.astro 에서 이 함수를 호출하면, 현재 페이지/라우트에 해당하는 DB 레코드를 찾아서 메타 정보를 생성한다. 마크업은 한 번 정의하고, 데이터만 동적으로 주입되는 구조가 된 셈이다.

팀 관점에서의 회고

이 작업이 흥미로운 이유는 아키텍처 결정에 있다.

Astro 는 서버사이드 렌더링과 정적 생성을 모두 지원하는데, 어느 방식을 택할지에 따라 getSiteSeo 의 구현이 달라진다. 예를 들어:
- 정적 생성 모드면 빌드 타임에 모든 공고의 메타를 미리 생성해야 하고
- SSR 모드면 요청 타임에 DB 조회가 가능하다

이런 트레이드오프를 고민했을 텐데, 아마도 데이터가 자주 변경되는 도메인이라면 SSR 가 나을 거고, 성능이 중요하면 ISR (증분 정적 재생성) 같은 하이브리드도 고려했을 것이다.

패키지 의존성이 업데이트된 것도 눈에 띈다. DB 래퍼, ORM, 또는 캐싱 라이브러리가 추가됐을 가능성이 있다. 팀원들이 유사한 작업을 할 때는 이 패턴을 따라 일관되게 진행할 수 있도록 문서나 코드 리뷰에서 강조할 필요가 있다.

내가 이 작업을 통해 배운 점은, 단순한 피처 추가도 아키텍처 관점에서 보면 여러 결정이 얽혀 있다는 것이다. 메타 태그 하나를 추가하는 것처럼 보이지만, 실제로는:
- 데이터 페칭 전략
- 캐싱 정책
- 에러 핸들링 (DB 조회 실패 시 fallback)
- 성능 영향 (빌드 시간, 런타임 응답 시간)

을 모두 고려해야 한다. 다음에 비슷한 리뷰를 할 때는 이런 큰 그림을 먼저 확인하고, 구현 디테일은 그 다음에 보려고 한다.


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

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

댓글 0

첫 댓글 달아줘.