Canonical URL | Notion

*✅ Canonical URL이란? *표준

중복된 컨텐츠가 여러 URL에서 제공되는 경우, 검색 엔진에게 선호하는 정규 URL을 지정하는 방법.

<head>
	<link rel="canonical" href="정규_URL">
</head>

검색 엔진에게 ‘이 url이 이 컨텐츠의 대표 URL입니다’ 하고 알려주는 기능.

✅ Why?

SEO 검색엔진최적화
- 검색 순위 강화: 중복 컨텐츠로 인해 검색 순위 분산되는 것을 방지.
- 효율적인 크롤링: 검색 엔진이 불필요하게 중복 페이지를 크롤링하지 않도록 함.
  - 사이트 맵과 함께 사용. XML sitemap이 canonical URL만 포함시켜 크롤링 효율성 높임.
UX 개선: 트래픽이 정규 URL로 통합, UX 분석이 쉬워짐
- 트래픽 통합: Canonical URL을 사용하면 여러 URL에서 제공되는 동일한 컨텐츠가 검색엔진에 의해 하나의 정규 URL로 통합됨.
- UX 분석: Google Analytics, Mixpanel등의 웹사이트 분석 도구에서 트래픽 데이터가 분산되지 않으며 하나의 URL로 집계 가능.
- 명확한 의사결정이 가능해짐: 통합된 트래픽 데이터로 사용자 선호도와 문제를 빠르게 파악 가능, 페이지의 이탈율이 높다면 페이지 디자인, 로딩 속도 개선등에 나설 수 있음.
- 사용자 경험 일관성: 검색 엔진이 정규 URL을 우선적으로 노출. 일관된 URL로 접근하여 혼란을 줄임.

✅ When?

동일한 컨텐츠가 여러 URL에서 제공될 때
제품 페이지에 쿼리파라미터가 추가되는 경우
www, 비 www URL 또는 HTTP, HTTPS가 혼재된 경우
- https://example.com 과 https://www.example.com 같이 동일한 컨텐츠인 경우.
(반응형 적용되지 않은 경우) 모바일/데스크탑 버전의 페이지가 별도로 존재할때
- 모바일 기기와 데스크톱 화면 크기, 성능, UI 요구사항에 따라 별도의 URL로 페이지를 제공할 때 https://example.com (desktop) 와 https://m.example.com (mobile) 모바일 페이지에 canonical URL을 추가할 수 있다.
- 추가 설정을 통해 모바일 페이지임을 검색엔진에게 알릴 수 있다.
```
//Mobile Page: canonical Tag
<head>
  <link rel="canonical" href="<https://example.com>" />
</head>
```
```
//[Optional] Desktop Page, mobile임을 알림
<head>
	<link
		rel="alternate"
		media="only screen and (max-width: 640px)"
		href="<https://m.example.com>"
	/>
</head>
```

✅ NEXT.js 에서 사용하기

import Head from 'next/head/';

export default function ProductPage() {
  return (
    <>
      <Head>
        <link rel="canonical" href="<https://example.com/product/shirt>" />
      </Head>
      <h1>Content Page</h1>
    </>
  );
}