development

SEO의 수호자, Canonical URL의 모든 것: 왜 반드시 절대 경로여야 할까?

들어가며

웹사이트를 운영하다 보면 의도치 않게 같은 콘텐츠가 여러 개의 주소(URL)를 가지게 되는 경우가 많습니다. httphttps, 끝에 붙는 슬래시(/) 유무, 혹은 마케팅용 추적 파라미터(?utm_source=...) 등이 대표적이죠.

검색 엔진 로봇에게 이 모든 주소는 서로 다른 페이지로 보일 수 있습니다. 이럴 때 **“이 페이지의 진짜 원본은 여기야!”**라고 등기부등본을 떼어주는 역할이 바로 **Canonical URL(대표 URL)**입니다.

1. Canonical URL이란 무엇인가?

Canonical URL은 HTML의 <head> 영역에 위치하며, 현재 페이지와 동일하거나 매우 유사한 콘텐츠를 가진 여러 페이지 중 검색 엔진이 색인(Index)해야 할 ‘표준’ 주소를 명시합니다.

Canonical URL 개념도: 여러 갈래의 주소를 하나의 대표 주소로 모아주는 과정

왜 반드시 써야 할까요?

  • 콘텐츠 점수 분산 방지: 여러 주소로 나뉜 백링크 점수를 하나의 주소로 몰아줍니다.
  • 중복 콘텐츠 페널티 회피: 구글은 동일 콘텐츠가 여러 주소에 있으면 ‘스팸’ 혹은 ‘품질 저하’로 판단하여 검색 순위를 낮출 수 있습니다.
  • 크롤링 효율 향상: 로봇이 쓸데없는 중복 페이지를 훑는 대신 진짜 중요한 페이지에 집중하게 만듭니다.

2. 절대 경로(Absolute URL)의 필수성

많은 개발자가 실수하는 부분 중 하나가 Canonical URL에 상대 경로(/blog/post)를 사용하는 것입니다. 하지만 Canonical URL은 반드시 https://를 포함한 절대 경로로 작성해야 합니다.

상대 경로와 절대 경로의 차이: 검색 엔진이 이해하는 방식

절대 경로가 필요한 이유

구글 서치콘솔은 http://domain.comhttps://domain.com을 완전히 다른 사이트로 봅니다. 상대 경로를 쓰면 검색 엔진이 어떤 프로토콜과 어떤 도메인을 ‘진짜’로 삼아야 할지 혼란을 겪게 되며, 결국 Canonical 설정이 무시될 수 있습니다.

3. Astro에서 똑똑하게 설정하기

Astro 프로젝트를 운영 중이라면 매번 주소를 수동으로 입력할 필요가 없습니다. astro.config.mjs에 정의된 site 속성을 활용하면 실수를 방지할 수 있습니다.

Astro 전용 Canonical URL 생성 로직

---
// Layout 컴포넌트나 SEO 컴포넌트 내부
const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
---

<link rel="canonical" href={canonicalURL} />

이렇게 설정하면 Astro.site에 등록된 내 도메인을 기반으로 현재 페이지의 경로가 결합되어 항상 완벽한 절대 경로를 만들어냅니다.

4. 설정 시 주의사항 (체크리스트)

  1. 일대일 매칭: 모든 페이지의 Canonical을 메인 페이지(https://.../)로 설정하지 마세요. 각 포스트는 각 포스트의 고유 주소를 가리켜야 합니다.
  2. 후행 슬래시(Trailing Slash) 통일: 주소 끝에 /를 붙일지 말지 한 가지 방식을 정하고 사이트 전체에 적용하세요. Astro 설정의 trailingSlash 옵션과 일치해야 합니다.
  3. 소문자 권장: URL의 경로는 대소문자를 구분할 수 있으므로, 항상 소문자로 통일하는 것이 SEO 관례입니다.

마치며

Canonical URL은 화려하진 않지만 SEO의 기초 공사와 같습니다. 특히 Astro와 같은 정적 사이트 생성기(SSG)를 사용할 때는 빌드 시점에 이 주소들이 정확히 박히는지 확인하는 과정이 꼭 필요합니다.

여러분의 소중한 기술 포스팅이 중복 콘텐츠라는 오해를 받지 않도록, 지금 바로 절대 경로 기반의 Canonical 설정을 점검해 보세요!


이 글이 마음에 드셨나요?

로딩 중...