title 템플릿 단일 소스

브라우저 탭, SEO 검색 결과, OG 공유 카드 — 같은 페이지의 "제목" 이 세 자리에서 다르게 보이는 사고가 자주 일어납니다. 원인은 단순합니다. 제목 템플릿 이 하나의 소스에서만 합성되지 않고, 페이지마다 자기 제목에 사이트명을 박는 패턴을 같이 쓰기 때문.

1. 중복 사고

[루트 레이아웃]   title.template: "%s | SITE"
        │
        ▼
[자식 페이지 A]   title: "약국 찾기 | SITE"   ← 사이트명 박음
        │
        ▼ (자동 합성)
브라우저 탭 → "약국 찾기 | SITE | SITE"

같은 페이지 N 개가 N 회 중복 을 만듭니다. SEO 검색결과의 제목 잘림, OG 카드의 어색함, 브라우저 탭의 시각적 잡음. 38 개 페이지에서 동시에 발생한 사례를 기준으로 정리합니다.

2. 단일 소스 원칙

[루트 레이아웃]   title.template: "%s | SITE"
                    │
                    ▼ (자동 합성)
[자식 페이지]     title: "약국 찾기"          ← 사이트명 0 회
[자식 페이지]     title: "마이페이지"
[자식 페이지]     title: "이벤트 리더보드"

자식은 자기 제목만 적습니다. 사이트명은 루트가 한 번 박습니다. 합성이 "1+1 = 2" 가 아니라 "1*1 = 1" 이 되도록.

3. SEO 헬퍼도 같은 함정에 빠진다

페이지마다 <title> 을 직접 적지 않고 generateSeoMetadata({title: "약국"}) 같은 헬퍼 함수 를 쓰는 코드베이스가 흔합니다. 이때 헬퍼 안에서 return { title: \${input} | SITE` }` 를 박으면 같은 사고가 한 자리에서 반복됩니다.

자리	안 박아야 할 자리
루트 layout	template 만 정의
자식 page.tsx 의 metadata.title	사이트명 X
SEO 헬퍼 함수	사이트명 X (입력 그대로 반환)
동적 OG 이미지 생성기	사이트명 X

루트가 유일한 사이트명 박기 자리. 다른 자리는 모두 "자기 콘텐츠만" 책임집니다.

4. 적용 전 / 적용 후

측면	박는 자리 N 개	단일 소스
브라우저 탭	"약국 | SITE | SITE"	"약국 | SITE"
사이트명 리브랜딩	N 곳 수정	루트 한 줄
자식 page.tsx 작성 비용	매번 사이트명 박기	자기 제목만
SEO 검색결과	제목 잘림 (글자수 초과)	깔끔
OG 카드 공유	어색한 중복	깔끔

5. 자신의 프로젝트에 적용하려면

• grep -rn "| SITE" src/ 로 자식 페이지가 사이트명을 박는 자리를 모두 찾는다.
• 일괄 sed 로 | SITE 후미를 제거. 빠진 trailing space 도 정리.
• SEO 헬퍼 함수 안의 사이트명 박기도 같은 sed.
• 루트 layout title.template 이 단일 소스인지 코드 리뷰.
• 회귀 가드 — SITE \| SITE 같은 이중 사이트명 이 빌드 산출물에 나타나면 fail 하는 검증 스크립트.

브라우저 탭의 "사이트명 | 사이트명" 은 작은 사고처럼 보이지만 N 페이지에서 동시에 발생 — 한 번 정리하면 다시 발생하지 않도록 자리를 잡아야 합니다.