캐노니컬 태그 (Canonical tag) 란

2024. 6. 11. 22:18개인노트-개인공부

# 캐노니컬 태그 (Canonical tag)

  • Canonical 태그는 웹 개발 및 SEO(Search Engine Optimization)에서 중요한 역할을 하는 HTML 요소입니다.
  • 사이트 내 URL 주소는 다르지만 동일한 내용의 중복된 페이지가 있을 때 페이지에 코드를 삽입하여 검색엔진에 대표가 되는 URL 주소를 알려주는 역할을 하는 태그입니다.
  • Canonical 태그를 사용하면 이러한 페이지들을 하나의 주 URL로 통합하여 SEO 점수를 집중시킬 수 있습니다.
  • 실제로 구글에서는 별도의 섹션으로 가이드를 제공하고 있을 정도로 구글에서도 중요하게 생각하는 태그입니다.

 

## 필요 이유

https://www.mysite.com/shop
https://www.mysite.com/shop?ct=1
https://www.mysite.com/shop?utm_campaign=event
  • 예를들어 위 url같은 동일한 페이지지만 파라미터 값이 있거나 데이터 분석을 위한 추적코드를 삽입한 경우가 있다고 가정할 때 실질적으로는 동일한 페이지로 연결되지만 URL은 다를 수 있습니다. 하지만 검색엔진이 볼 때는 아래 URL는 콘텐츠가 유사한 다른 페이지로 인식하며 이 페이지들을 동일한 페이지의 중복 버전으로 간주하게 됩니다.
  • 만약 이런 중복 페이지의 경우 캐노니컬(Canonical) 태그를 적용하지 않을 경우 검색엔진은 자기 마음대로 원본 URL을 판단하여 적용하며 중복되는 다른 페이지들은 덜 크롤링을 하게됩니다.
  • 또한 똑같은 내용이 여러개의 페이지를 가질 경우 중요도가 분산되며 검색엔진에게 패널티도 받을 수 있습니다.

 

## 사용 방법

  • html의 head에 삽입합니다.
<link rel="canonical" href="URL">

예시 1 : 

<link rel="canonical" href="https://www.example.com/original-page">
  • 이 태그는 해당 페이지의 원본 버전이 "https://www.example.com/original-page"임을 검색 엔진에 알립니다.

 

## 사례

1. 동일한 콘텐츠가 여러 URL에서 접근 가능한 경우

  • 예를 들어, 동일한 콘텐츠가 다음과 같은 URL에서 접근 가능하다면
https://www.example.com/page
https://example.com/page
https://www.example.com/page?ref=homepage

 

  • 이 경우, 아래처럼 canonical 태그를 사용하여 주 URL을 지정합니다.
<link rel="canonical" href="https://www.example.com/page">

 

2. 모바일 및 데스크탑 버전 페이지

  • 모바일 페이지와 데스크탑 페이지가 별도로 존재하는 경우
https://m.example.com/page
https://www.example.com/page

 

  • 데스크탑 페이지가 원본이라면 모바일 페이지에 canonical 태그를 추가합니다.
<link rel="canonical" href="https://www.example.com/page">

 

3. 다양한 제품 페이지

  • 비슷한 제품을 제공하는 여러 페이지가 있는 경우,
https://www.example.com/product?color=red
https://www.example.com/product?color=blue

 

  • 주 제품 페이지를 원본으로 지정합니다.
<link rel="canonical" href="https://www.example.com/product">

 

## 주의사항

  • 같은 페이지에 여러 canonical 태그를 포함하지 않도록 합니다.
  • 캐노니컬(canonical)태그 적용 시 상대 경로가 아닌 절대 경로로 적용해야 합니다.
  • 순환 참조가 되지 않게 합니다.
    • 페이지 A가 캐노니컬 태그를 이용해 페이지 B를 표준 url로 지정하고, 페이지 B가 캐노니컬 태그를 이용해 페이지 A를 표준 url로 지정하는 경우 무한 순환이 발생할 수 있습니다. 무한 순환이 발생하는 경우, 의도한 표준 url이 무엇인지 파악할 수 없으므로 A와 B의 캐노니컬 태그는 모두 무시되고 다른 요인들에 의해 표준 url이 결정됩니다.

 

## 정리

  • Canonical 태그는 웹 페이지의 중복 콘텐츠 문제를 해결하고 SEO 효율성을 높이는 데 중요한 도구입니다. 적절하게 사용하면 검색 엔진이 올바른 페이지를 인덱싱하고 순위를 매기도록 유도할 수 있습니다.

'개인노트-개인공부' 카테고리의 다른 글

form 사용 유용한 팁  (1) 2024.05.28
html 문서 로드와 이벤트  (1) 2024.05.12
JavaScript - 함수 (복습)  (1) 2024.03.10
Javascript - this  (1) 2024.02.04
Node vs Element  (2) 2024.01.28