개발 slecs

동적 URL 페이지의 SEO 신호 정상화

목차

레이아웃 파일에 canonical 태그와 og:url 메타 정보를 추가했다. 사소해 보이지만 검색 엔진과 소셜 미디어 플랫폼이 우리 페이지를 올바르게 인식하도록 하는 핵심 신호다.

왜 canonical 태그가 필요했을까

동적으로 생성되는 페이지(예: /items/product/123, /items/product/456)들이 동일한 템플릿을 사용하면서, 검색 엔진 입장에서는 이들이 별개의 페이지인지 같은 페이지의 중복인지 판단하기 어려워진다. 특히 필터링이나 쿼리 파라미터가 많은 이커머스나 콘텐츠 사이트에선 더 심하다.

이 상황에서 canonical 태그를 명시하지 않으면:

문제 상황 검색 엔진의 해석
/items/product/123?utm=google
/items/product/123?utm=email		 같은 콘텐츠의 중복
중복 것으로 판단 → 페이지 랭킹 분산 PageRank가 여러 URL에 나뉨
검색 결과에 어느 URL이 노출될지 불확실 의도한 URL이 랭킹되지 않을 수 있음

우리는 각 동적 페이지에서 자기 자신을 가리키는 canonical 태그를 명시함으로써 "이게 정식 URL입니다"라고 검색 엔진에 명확히 전달하게 됐다.

// layout.tsx 에서의 동적 canonical 생성 패턴 (예시)
const pageUrl = new URL(pathname, process.env.NEXT_PUBLIC_SITE_URL).href;

return (
  <html>
    <head>
      <link rel="canonical" href={pageUrl} />
    </head>
    <body>{children}</body>
  </html>
);

og:url로 소셜 공유 정보도 정확히

og:url은 사용자가 우리 페이지를 페이스북, 링크드인, 메시저 같은 소셜 플랫폼에서 공유할 때 어느 URL을 기록할지를 지시한다. 이게 없거나 잘못되면:

  • 썸네일, 제목, 설명이 엉뚱한 페이지의 정보로 나타남
  • 같은 콘텐츠가 여러 URL로 분산되어 소셜 공유 통계가 쪼개짐
  • 사용자 입장에선 클릭했는데 다른 페이지가 열리는 경험

canonical 태그와 og:url을 함께 설정함으로써 검색 엔진과 소셜 플랫폼이 모두 같은 URL을 정식 주소로 인식하게 된다.

layout.tsx에서 처리하는 게 중요한 이유

root 레이아웃 파일은 모든 동적 페이지가 상속받는 곳이다. 여기서 현재 요청 URL을 동적으로 캡처해 메타 정보를 생성하면:

  • 개별 페이지마다 반복 코드를 쓸 필요가 없음
  • 변경사항이 일관되게 적용됨
  • URL 구조가 바뀌어도 한 곳만 수정하면 됨

만약 각 페이지 컴포넌트에서 일일이 설정했다면, 누군가는 빠뜨리고, 누군가는 다르게 구현했을 것이다.

회고: SEO는 팀 수준의 의사결정

개인적으로 재미있었던 부분은 이 작업이 단순 "버그 수정"이 아니라는 점이다. 검색 엔진 최적화는:

  • 기술 부채처럼 쌓인다 — 처음엔 몇 개 페이지라 괜찮지만, 수십 개, 수백 개가 되면 누적된 SEO 손실이 매출에 영향
  • 개인 기여로 측정하기 어렵다 — 이번 변경이 검색 순위를 5% 올린다고 해도, 몇 주 후 트래픽 그래프에 녹아들어 누가 뭘 한 건지 모호해짐
  • 조직 차원에서 우선순위 싸움이 된다 — "신기능" vs "SEO 기초 작업" 중 뭘 먼저 할지

우리 팀에서도 이 작업이 스프린트에 들어갔을 때 "지금 꼭 필요한가?"라는 질문이 있었다. 하지만 장기 관점에서 검색 트래픽의 기초를 다지는 일이 결국 반복되는 버그 수정보다 ROI가 크다고 판단했다.

다음

canonical 테그를 추가한 후엔 서치 콘솔에 사이트맵을 제출하고, 실제로 검색 엔진이 우리 페이지를 어떻게 크롤링하는지 모니터링할 차례다. og 태그들도 함께 점검해서 다른 부분도 보완하면 좋을 것 같다.

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

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

이어보기

댓글 0

첫 댓글 달아줘.