canonical이란?

곽향훈·2023년 5월 24일
1

Trouble Shooting

목록 보기
9/10

Issue

SEO 컨설팅팀에서 특정 페이지에 Canonical 태그를 적용해달라는 요청을 하였다. Canonical 태그에 대해 자세히 알지 못하였기 때문에, 이를 해결하기 위해 글을 작성하며 이에 대해 공부해보고자 한다.


Problem

canonical을 적용하지 않았을 때 발생할 수 있는 문제

  • 검색 엔진 최적화(SEO) 문제
    • 검색 엔진은 동일한 콘텐츠가 여러 페이지에 중복해서 나타나면 이를 중복 콘텐츠로 간주하고 패널티를 부여할 수 있다. 따라서 canonical을 사용하여 중복 콘텐츠 문제를 해결할 수 있다.
  • 페이지 랭크 문제
    • 검색 엔진은 동일한 콘텐츠가 여러 페이지에 나타나면 페이지 랭크를 분산시키게 된다. 이는 검색 결과에서 상위 랭크를 얻기 어렵게 만들 수 있다.
  • 사용자 경험 문제
    • 중복 콘텐츠로 인해 사용자는 동일한 콘텐츠를 여러 번 보게 된다. 이는 사용자의 경험을 저하시킬 수 있다.

Solution

해당 프로젝트가 Nuxt.js로 되어 있어 head 태그 내용을 동적으로 관리할 수 있는 vue-meta 라이브러리를 사용하였다.


  1. vue-meta 라이브러리 설치하기
npm install vue-meta
  1. nuxt.config.js 파일에 vue-meta 설정 추가하기
// nuxt.config.js

module.exports = {
  head: {
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' }
    ],
    // vue-meta 설정 추가
    __dangerouslyDisableSanitizers: ['script'],
    script: [
      {
        src: 'https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID',
        async: true
      },
      {
        innerHTML: `
          window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', 'GA_MEASUREMENT_ID');
        `
      }
    ],
  },
  // vue-meta 설정 추가
  plugins: [
    { src: '~/plugins/vue-meta', ssr: true }
  ]
}
  1. vue-meta 라이브러리에서 제공하는 $meta() 함수를 이용하여 canonical 태그 추가하기
// plugins/vue-meta.js

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta)

export default ({ app }) => {
  app.head.meta.push({
    key: 'canonical',
    hid: 'canonical',
    property: 'canonical',
    content: 'https://www.maimovie.com/'
  })
}

위 예제에서는 https://www.maimovie.com/이 본래의 URL이며, canonical 속성을 가진 <meta> 태그가 추가되어 있다. 이를 통해 검색 엔진은 해당 페이지를 본래의 페이지로 인식하고, 중복 콘텐츠 문제를 해결한다.


What I Learn

canonical은 검색 엔진 최적화 (SEO)에서 중요한 역할을 한다. canonical은 하나의 URL이 여러 개의 다른 URL로 표시될 때, 검색 엔진이 이를 인식하고 해당 페이지의 랭킹을 적절하게 할당하기 위해 사용된다.

예를 들어, 동일한 콘텐츠가 여러 개의 URL에 표시된 경우, 검색 엔진에서는 이를 중복 콘텐츠로 간주하고, 랭킹을 할당할 때 이를 고려한다. 이는 검색 엔진 랭킹에 악영향을 끼칠 수 있다.

이때, canonical을 사용하면 검색 엔진은 여러 개의 URL 중 어떤 것이 "본래의" 문서인지를 인식하게 된다. 따라서 중복 콘텐츠 문제가 해결된다.


프론트엔드에서 canonical을 사용할 때 몇 가지 주의할 점

  • 올바른 URL 지정
    • canonical 태그에 지정하는 URL은 오리지널 콘텐츠가 위치한 URL이어야 한다. 잘못된 URL을 지정하면 오히려 검색 엔진에서 패널티를 받을 수 있다.
  • 동일한 콘텐츠에만 사용
    • canonical 태그는 중복 콘텐츠 문제를 해결하기 위한 것이므로, 동일한 콘텐츠가 여러 페이지에 나타날 때에만 사용해야 한다. 다른 콘텐츠에 대해서는 사용하면 안 된다.
  • 모든 페이지에 적용
    • 중복 콘텐츠가 발생할 수 있는 모든 페이지에 canonical 태그를 적용해야 한다. 이를 놓치면 중복 콘텐츠 문제가 여전히 발생할 수 있다.
  • 다른 메타 태그와 충돌하지 않도록 설정
    • canonical 태그는 다른 메타 태그와 충돌하지 않도록 설정해야 한다. 예를 들어, noindex 태그와 함께 사용하면 검색 엔진은 콘텐츠를 인덱싱하지 않지만, canonical 태그는 인덱싱을 허용하는 것으로 인식할 수 있다.
  • 대소문자 구분
    • URL의 대소문자는 구분되므로, canonical 태그에 지정하는 URL도 정확하게 대소문자를 구분하여 지정해야 한다.

이러한 주의사항을 지켜 canonical을 사용하면 중복 콘텐츠 문제를 효과적으로 해결할 수 있다.

0개의 댓글