검색 순위와 소셜 공유에 혼동 주던 도메인 메타태그 통일

운영 도메인이 growthebutton.com 으로 정해졌는데, 콘텐츠의 canonical 태그와 og:url이 여전히 구 도메인이나 불명확한 주소를 가리키고 있던 상황이었다. layout.tsx 에서 이 메타태그들을 통일하는 작업을 했다.

SEO와 소셜 공유가 꼬이는 방식

canonical 태그와 og:url 은 겉으로는 작은 메타데이터지만, 검색 엔진과 소셜 플랫폼에 엄청난 신호를 보낸다. canonical 은 "이 콘텐츠의 정식 주소가 이것"이라고 검색 엔진에 알려주는 것이고, og:url 은 페이지가 소셜 미디어에 공유될 때 어느 URL을 대표 주소로 인식할지를 결정한다.

이 둘이 통일되지 않으면:
- 검색 엔진 혼동: 같은 콘텐츠가 여러 도메인에 존재하는 것으로 보이고, 구글이 크레딧(순위)을 어디에 줄지 판단하기 어려워진다. 그 결과 순위 분산이나 저평가가 생긴다.
- 소셜 프리뷰 문제: 팀원이나 고객이 페이지를 카톡·페북·슬랙에 공유할 때 og:image, og:title, og:description 이 제대로 미리보기되지만, 링크 자체는 이상한 도메인으로 걸리거나 클릭 시 404로 간다.
- 신뢰도 손상: 특히 서비스 전환기에 도메인이 섞여 있으면 "이 회사 사이트가 관리가 잘 안 되는 건가?" 하는 인상을 준다.

layout.tsx 에서 메타 경로 통일

Next.js 에서 layout.tsx 는 모든 페이지의 부모가 되는 루트 레이아웃이다. 여기서 Metadata export 나 meta 태그를 정의하면 하위 페이지들이 자동으로 상속한다. 이번 작업에서는 여기에 명시적으로 canonical 과 og:url 을 추가해서 운영 도메인(growthebutton.com)을 가리키게 했다.

layout.tsx 의 meta 배열에 추가된 형태는:

// canonical: 검색 엔진에 정식 URL 알림
{ rel: 'canonical', href: 'https://growthebutton.com' },

// og:url: 소셜 공유 시 대표 URL
{ property: 'og:url', content: 'https://growthebutton.com' }

동적 경로(라우트 파라미터)가 있다면 pathname 변수를 활용해서 페이지별로 동적으로 구성할 수도 있다. 예를 들어 /blog/[id] 같은 구조라면 canonical 과 og:url 에 그 id 를 포함시켜야 검색 엔진이 각 포스트를 독립적인 콘텐츠로 인식한다.

회고: 메타 태그 체계의 필요성

이런 작업이 미처 안 된 이유는 아마도:
- 개발 단계에서는 localhost 도메인으로 테스트하고, 메타 태그 검증이 스테이징·프로덕션 배포 후 ad-hoc 하게 이루어짐
- SEO 체크리스트가 반복 배포 때마다 명확하지 않았음 (canonical, og:title, og:image, og:type, robots 등)
- 도메인 전환이 있었을 때 메타 데이터까지는 일괄 마이그레이션 대상으로 생각하지 못함

앞으로 같은 실수를 줄이려면:
- 도메인/배포 환경이 바뀔 때마다 메타 태그 검증을 자동화 테스트 또는 배포 체크리스트에 넣기
- layout.tsx 같은 루트 메타 파일과 동적 페이지별 메타 생성 로직을 한 곳에서 관리하기
- 소셜 공유 테스트도 개발 프로세스에 포함시키기 (페이스북 셰어 디버거, 카톡 미리보기 등)

이번 수정으로 검색 엔진과 소셜 플랫폼이 같은 도메인을 기준으로 콘텐츠를 인식하게 되어, SEO 신뢰도가 높아지고 팀원들의 공유도 깔끔해졌다.

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

• 노트북 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →
• 커피머신 쿠팡에서 보기 →

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