홈페이지 SEO title, 하드코딩에서 DB 관리로
목차
홈 페이지의 메타 title을 하드코딩된 값에서 CMS 데이터베이스(cms_site.meta.seo.title)로 가져오도록 변경했다. BaseHead.astro와 Base.astro 두 컴포넌트를 수정했고, 이제 홈 타이틀도 나머지 SEO 메타데이터처럼 관리자가 운영 도구에서 자유롭게 수정할 수 있다.
왜 하드코딩이 문제였나
초창기에는 페이지 제목이 자주 바뀌지 않으니까 소스 코드에 박아놓는 게 편했다. 그런데 시간이 지나면서 SEO 최적화를 본격적으로 하거나, 시즌별·캠페인별로 홈 페이지 제목을 조정해야 하는 상황이 생겼다. 그럴 때마다 개발자를 호출해서 배포를 하는 건 너무 비효율적이었다.
특히 CMS 시스템에서 사이트 메타데이터(og:title, description, keywords 등)를 한곳에서 관리하고 있었는데, title만 뻔히 따로 놀고 있는 꼴이 됐다. "어? 여기서 수정하면 DB에는 반영되는데 브라우저에는 왜 안 나와?" 이런 혼란을 겪게 되는 거다.
배선 과정
BaseHead.astro는 메타 태그를 렌더링하는 컴포넌트이고, Base.astro는 그것을 감싸는 레이아웃이다. 원래 BaseHead에서 title을 props로 받거나, 아니면 하드코딩된 fallback을 쓰고 있었다. 이제 cms_site.meta.seo.title 값을 직접 이 컴포넌트 단계에서 접근하도록 꼬아준 것이다.
구체적으로는:
- BaseHead.astro: 메타 title 태그를 생성할 때, CMS 데이터에서 제공된 title 값을 우선 사용. 없으면 기본값으로 fallback
- Base.astro: 레이아웃이 BaseHead에 데이터를 전달할 때, DB에서 가져온 값을 명시적으로 props로 넘기도록 수정
Astro 구조상 <head> 영역의 타이틀은 SEO 크롤러가 가장 먼저 읽는 부분이니까, 여기서 정확한 값을 보낼 수 있게 된 건 중요하다.
이 변경이 주는 영향
| 관점 | 변경 전 | 변경 후 |
|---|---|---|
| 타이틀 수정 | 코드 변경 → 테스트 → 배포 필요 | CMS 대시보드에서 즉시 수정 |
| 데이터 출처 | 코드(BaseHead.astro) | DB(cms_site.meta.seo.title) |
| 메타정보 일관성 | 불일치 가능성 | 모든 메타 정보가 같은 소스 |
| 운영팀 자율성 | 제한적 | 확대됨 |
운영팀이나 콘텐츠팀이 개발자 호출 없이 CMS 대시보드에서 타이틀을 직접 수정할 수 있게 됐다. 배포 없이 즉시 반영되기 때문에, SEO 최적화를 위한 A/B 테스트나 계절별 텍스트 조정도 훨씬 빠르게 돌릴 수 있다.
일반적인 패턴
이런 식의 "하드코딩 → DB 참조" 전환은 프론트엔드 프로젝트에서 꽤 자주 나타나는 패턴이다:
- 페이지 타이틀, 메타 설명 → CMS 또는 설정 DB
- 헤더/푸터 네비게이션 → 동적 메뉴 테이블
- 배너 이미지, 홍보 텍스트 → 콘텐츠 관리 시스템
- 에러 메시지, 공지 알림 → 언어 리소스 또는 공지 테이블
한 번 이 패턴이 정착되면, 새로운 메타데이터가 필요할 때마다 "코드 추가 → 테스트 → 배포" 사이클을 도는 게 아니라, DB 스키마에 컬럼 추가하고 CMS UI 폼에 필드만 추가하면 된다. 확장성 관점에서 훨씬 낫다.
회고
이번 건 작은 수정으로 보이지만, 팀 내에서 "운영팀이 뭘 마음대로 할 수 있는가" 하는 경계선이 조금 더 앞으로 나아간 거다. 개발자가 관여해야 하는 영역이 줄어들고, 비개발자도 자신의 권한 범위 내에서 빠르게 대응할 수 있는 구조가 된 것.
초기 설계 때 "어차피 안 바뀔 것 같으니 하드코딩해도 괜찮지 않을까?" 이런 생각을 하기 쉬운데, 3개월, 6개월 지나보면 단순해 보였던 값들도 자주 변한다는 걸 배웠다. 특히 SEO나 마케팅 영역의 텍스트는 더욱 그렇다.
🛒 이 글과 어울리는 추천 상품
*위 링크는 쿠팡파트너스 활동의 일환이며, 일정액의 수수료를 제공받을 수 있습니다.
댓글 0
첫 댓글 달아줘.