페이지 검색 노출성 개선한 메타 태그 추가

검색 엔진과 소셜 미디어 플랫폼이 우리 페이지를 올바르게 인식하도록 canonical 과 og:url 메타 태그를 추가했다. 작은 변경이지만 SEO 전략 전체에서 생각보다 중요한 부분이었다.

왜 이런 작업이 필요했나

페이지 URL이 여러 형태로 접근될 수 있는 상황을 생각해보자. 예를 들어 도메인이 example.com/post/123 이면서 동시에 example.com/posts/123 , example.com/blog/123 으로도 접근 가능하다면? 검색 엔진은 같은 콘텐츠가 여러 URL에 존재한다고 판단해서 페이지 가치를 분산시킨다. 검색 순위가 나뉘고, 최악의 경우 중복 콘텐츠로 페널티를 받을 수도 있다. 이게 canonical 태그가 필요한 이유다.

소셜 미디어에서 공유할 때도 마찬가지다. 똑같은 페이지인데 URL이 달라지면, 각 플랫폼(페이스북, 트위터 등)에서 메타 정보를 크롤링할 때 혼란이 생긴다. og:url 은 "이 페이지의 정확한 URL은 이것이다"라고 명시해서 소셜 미디어의 프리뷰 카드가 제대로 생성되도록 돕는다.

Next.js 루트 레이아웃에서의 구현

src/app/layout.tsx 는 모든 페이지의 부모 레이아웃이다. 여기서 메타 태그를 설정하면 일괄 적용할 수 있다. Next.js 의 Metadata API 를 쓰면 깔끔하다:

// 기본 구조 (실제 구현과 다를 수 있음)
export const metadata: Metadata = {
  alternates: {
    canonical: `${baseUrl}${pathname}`,
  },
  openGraph: {
    url: `${baseUrl}${pathname}`,
    // ... 나머지 og 태그들
  },
};

경로마다 URL 을 동적으로 구성해야 한다면 generateMetadata 함수를 쓰기도 한다. 루트 레이아웃이므로 base URL 을 환경변수에서 읽고, 각 페이지 라우트에서 pathname 을 받아서 합치는 방식으로 처리하는 게 일반적이다.

팀과의 협력, 우선순위 판단

사실 이 작업은 마케팅이나 성장 팀에서 요청한 것이었다. "검색 엔진 최적화를 위해서" 같은 명확한 요청은 개발팀 입장에서 우선순위를 매기기 쉽다. 버그 수정처럼 긴급하지는 않지만, 검색 가시성은 장기적으로 트래픽에 영향을 주기 때문에 스프린트 틈에 처리하기 좋은 작업이다.

코드 변경량도 적고 (layout.tsx 만 건드림), 리스크도 낮다. 메타 태그는 렌더링 로직에 영향을 주지 않는다. 유일한 고려사항은 base URL 을 잘못 설정했을 때 canonical 이 잘못된 주소를 가리키는 건데, 이건 배포 환경별로 URL 을 명확히 관리하는 것으로 방지할 수 있다.

다른 고민들

프로토콜(http vs https)이나 www 유무도 신경써야 한다. 검색 엔진은 https://example.com 과 https://www.example.com 을 다른 페이지로 본다. 서비스의 URL 정책(www 사용 여부, 항상 https 등)을 팀과 먼저 정하고, canonical 에 그 정책을 반영해야 한다.

또한 URL 파라미터(쿼리스트링)를 어떻게 처리할지도 생각해볼 포인트다. ?utm_source=social 같은 추적 파라미터가 있는 URL도 같은 콘텐츠지만, canonical 은 파라미터 없는 기본 URL 을 가리키는 게 맞다.

이번 작업으로 검색 노출성이 즉각 올라가지는 않겠지만, 검색 엔진이 우리 페이지를 올바르게 색인하고, 사용자가 소셜에서 공유할 때 예쁜 카드가 나타나는 기초를 다진 셈이다. SEO 는 지루하지만 중요한 작업. 끝.

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

• 모니터 쿠팡에서 보기 →
• 기계식키보드 쿠팡에서 보기 →
• 외장SSD 쿠팡에서 보기 →

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