Canonical 태그란 무엇인가?
KUKJIN LEE • 1년 전 작성
Canonical 태그는 HTML 문서의 <head> 섹션에 위치하는 태그로, 검색 엔진에 중복 콘텐츠 문제를 해결하도록 돕습니다. 이 태그는 여러 URL이 동일하거나 유사한 콘텐츠를 가질 때 사용되어, 검색 엔진에 어떤 URL을 원본으로 간주해야 하는지 알립니다. 이를 통해 중복 콘텐츠로 인한 문제를 방지하고, SEO 성능을 향상시킬 수 있습니다.
사용법:
<head>태그 안에 Canonical 태그를 넣어, 중복되는 콘텐츠를 가진 개별 URL이 모두 원본임을 명시합니다.- 원본 URL을 지정하여
<head>섹션에 넣습니다.
예를 들어, 특정 기술 블로그에서는 모든 페이지에 대해 원본 페이지의 URL을 Canonical 태그로 지정하여, 검색 엔진이 모든 페이지를 원본으로 인식하도록 설정할 수 있습니다. 이 방식은 SEO 최적화에 중요한 역할을 하며, 웹사이트의 가시성과 검색 엔진에서의 순위를 개선하는 데 도움이 됩니다.
const App = ({ Component, pageProps: { session, ...pageProps } }) => {
const canonicalUrl = `https://kakao.gg${router.asPath}`
<Head>
<title>{`${pageProps.title || ''} KAKAO.GG IT Tech Blog`}</title>
<meta
name="description"
content={
truncatedDescription ||
'KAKAO.GG IT Tech Blog에서는 최신 IT 소식, 프로그래밍, 웹 개발, 인공지능 등 다양한 기술 주제를 다룹니다. 각종 팁, 튜토리얼, 인터뷰를 통해 여러분의 기술 역량을 향상시켜 보세요.'
}
/>
<link rel="canonical" href={canonicalUrl} />
</Head>
}
주의 사항
보다 심화적인 내용은 별도로 다루겠지만, 정확한 URL 사용이 현재 내용에서는 가장 중요합니다.
-
정확한 URL 사용: Canonical 태그에 지정된 URL은 접근 가능하고 정확한 페이지를 가리켜야 합니다.
-
중복 제거: 한 페이지에 여러 canonical 태그를 사용하지 마세요. 이는 혼란을 일으킬 수 있습니다.
-
자기 참조: 페이지에 중복이 없는 경우에도 자기 참조하는 canonical 태그를 추가하는 것이 좋습니다.
-
크로스 도메인 사용 주의: 다른 도메인으로의 canonical 태그는 주의해서 사용해야 합니다. 이는 콘텐츠 소유권이 다를 수 있기 때문입니다.
-
검색 엔진 지침 준수: 각 검색 엔진의 canonical 태그 사용에 대한 지침을 확인하고 준수하세요.
예시
웹사이트에 https://kakao.gg/1, https://kakao.gg/2와 같이 여러 매개변수를 가진 URL이 있고, 이 모든 URL의 기본 페이지로 https://kakao.gg/post로 설정하려고 합니다.
이렇게 하면, 검색 엔진은 1,2와 같은 매개변수를 가진 페이지들을 색이화 할 때, https://kakao.gg/post를 기본 페이지로 간주하고, 중복 콘텐츠 문제를 방지 해 SEO 성능을 향상시킵니다.
<Head>
<link rel="canonical" href="https://www.kakao.gg/post" />
</Head>