캐노니컬 태그 (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 |