Canonical 태그란 무엇인가?

clock icon

asked 5 months ago

message

1

eye

38

Canonical 태그는 HTML 문서의 <head> 섹션에 위치하는 특수한 태그로, 검색 엔진에게 중복된 콘텐츠 문제를 해결하는 데 사용됩니다. 여러 URL이 동일한 또는 매우 유사한 콘텐츠를 가지고 있을 때, 중복 콘텐츠가 아님을 설명하고, 원본으로 간주하라고 검색 엔진에 알려줍니다.

 

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>
}

1 Answers

위의 소스 코드는 React 프레임워크에서 App 컴포넌트를 정의하는 코드입니다. 이 코드는 HTML 문서의 섹션에 위치하는 태그를 사용하여 검색 엔진에게 웹 페이지의 주요 URL을 알려줍니다.

<link rel="canonical" href={canonicalUrl} /> 부분은 canonical 태그를 생성하는 역할을 합니다. 이 태그는 중복된 콘텐츠 문제를 해결하기 위해 사용되며, 여러 URL이 동일한 또는 매우 유사한 콘텐츠를 가질 때 해당 콘텐츠를 중복되지 않는 원본 콘텐츠로 간주하도록 검색 엔진에게 알려줍니다.

예를 들어, canonicalUrl 변수에 설정된 URL인 `https://kakao.gg${router.asPath}`는 현재 페이지의 주소를 의미합니다. 이 부분에서는 동적으로 페이지의 URL을 생성하여 canonical 태그로 사용합니다.

이렇게 canonical 태그를 사용하면 SEO(Search Engine Optimization)에 도움이 되고 중복된 콘텐츠로 인한 검색 엔진의 혼란을 최소화할 수 있습니다.

Write your answer here

Top Questions