사이드프로젝트 slecs

Astro 블로그에 SEO 컴포넌트를 분리해 구조를 정리했다

목차

블로그에 표준 SEO 컴포넌트를 새로 만들고, BaseHead.astro에 붙여 넣었다.

왜 지금 SEO였나

블로그는 어차피 내가 읽는 글인데 SEO가 무슨 소용이냐 싶을 수도 있다. 근데 팀 내에서도 기술 블로그를 외부 공개로 전환하는 경우를 여럿 봤고, 그때마다 "처음부터 SEO를 심어뒀으면 좋았을 텐데"라는 회고가 나왔다. 이번에는 그 순서를 뒤집고 싶었다. 나중에 후회하는 것보다 초기 구조에 박아두는 게 훨씬 싸다.

Astro 기반 블로그라 이미 BaseHead.astro가 <head> 영역을 담당하고 있었는데, 거기다 meta 태그를 직접 인라인으로 때려 박기엔 관리가 지저분해질 것 같았다. 그래서 Seo.astro를 별도 컴포넌트로 분리해서 SEO 관련 마크업만 모아두는 구조로 갔다.

변경 구조 정리

파일 역할 이번 변경
BaseHead.astro <head> 전체 구성 Seo.astro 컴포넌트 import 및 props 전달
Seo.astro SEO 전용 컴포넌트 (신규) OG, twitter card, canonical 등 표준 메타 태그 담당
consts.ts 사이트 전역 상수 사이트 이름, URL 등 SEO 기본값 소스로 활용

consts.ts를 SEO 기본값의 소스로 잡은 게 핵심이다. 타이틀이 없는 페이지, description이 빠진 페이지에서 fallback으로 쓸 값들을 여기서 끌어오게 했다. 이렇게 하면 나중에 블로그 이름이 바뀌거나 도메인이 변경될 때 consts.ts 한 군데만 손보면 된다. 분산 관리의 반대, 중앙화다.

Seo.astro 구조 예시

---
interface Props {
  title?: string;
  description?: string;
  image?: string;
  canonicalUrl?: string;
}

const {
  title = SITE_TITLE,
  description = SITE_DESCRIPTION,
  image = '/og-default.png',
  canonicalUrl = Astro.url.href,
} = Astro.props;
---

<title>{title}</title>
<meta name="description" content={description} />
<link rel="canonical" href={canonicalUrl} />

<!-- OG -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:image" content={image} />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />

props 전부 optional로 뺀 게 포인트다. 모든 페이지마다 SEO 값을 강제하면 귀찮아서 결국 안 쓰게 된다. fallback을 consts.ts에서 충분히 잡아두고, 글마다 override가 필요한 것만 넘기는 방식이 현실적으로 더 잘 지켜진다.

컴포넌트 분리의 실질적 이유

BaseHead.astro가 길어지면 어디서 뭘 건드려야 할지 감이 안 잡힌다. 리뷰할 때도 마찬가지다. SEO 관련 변경인지, 폰트 로딩 변경인지, 스크립트 삽입 변경인지 파일 하나에 다 섞여 있으면 diff가 지저분해진다. 컴포넌트를 목적 단위로 쪼개두면 "이 PR은 SEO만 건드렸다"는 게 명확해진다.

작은 블로그 프로젝트지만 이 원칙은 대규모 코드베이스에서도 동일하게 적용된다. 팀원한테 리뷰 요청할 때 "이 파일은 이 역할만 한다"고 설명할 수 있어야 리뷰어의 인지 부하가 줄어든다. 결국 SEO 컴포넌트 분리도 그 연장선.

표준 SEO 적용이라는 커밋 하나지만, 구조적으로는 꽤 깔끔하게 정리됐다고 본다.

끝.

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

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

이어보기

댓글 0

첫 댓글 달아줘.