Next.js
검색 페이지의 canonical URL을 한 가지 규칙으로 고친 SEO 비교 글
쿼리 파라미터가 붙은 검색 결과가 색인되던 문제를 canonical과 noindex의 역할을 비교해 정리한 글
같은 페이지에 주소가 너무 많았다
검색 페이지가 /search?q=react, /search?q=react&page=1, /search?q=react&utm_source=newsletter로 열렸다. 처음에는 모든 페이지에 canonical만 달면 된다고 생각했지만 내부 검색 결과는 외부 검색 유입을 받을 콘텐츠가 아니었다.
canonical과 noindex는 대체재가 아니었다
canonical은 대표 URL을 제안하고 noindex는 검색 결과에 넣지 말라는 신호다. 내부 검색에는 noindex, follow가 맞았고, 공개 글의 추적 파라미터에는 원본 글 URL을 canonical로 지정했다.
import type { Metadata } from 'next'
export function generateMetadata(): Metadata {
return {
title: '검색',
robots: { index: false, follow: true },
}
}
공개 글의 canonical은 요청 헤더에서 호스트를 조합하지 않고 허용된 사이트 주소로 만들었다.
export const metadata = {
alternates: { canonical: 'https://blog.turin.my/posts/example' },
}
실제 HTML에서 확인하기
브라우저 화면이 아니라 배포 HTML의 태그를 확인했다.
curl -sS 'https://example.com/search?q=react' | tr '>' '>\n' | grep -E 'robots|canonical'
적용 기준
- 내부 검색, 필터, 정렬 결과:
noindex, follow - 추적 파라미터가 붙은 공개 콘텐츠: 원본으로 canonical
- 내용이 다른 페이지: 억지로 canonical을 합치지 않음
- 수정 후 실제 HTML과 Search Console 상태를 따로 확인
SEO는 태그를 많이 붙이는 일이 아니라 URL의 역할을 정하는 일이었다. 검색되어야 하는 페이지인지 먼저 결정하니 설정이 덜 헷갈렸다.