SEO 컨설팅팀에서 특정 페이지에 Canonical 태그를 적용해달라는 요청을 하였다. Canonical 태그에 대해 자세히 알지 못하였기 때문에, 이를 해결하기 위해 글을 작성하며 이에 대해 공부해보고자 한다.
canonical을 적용하지 않았을 때 발생할 수 있는 문제
해당 프로젝트가 Nuxt.js
로 되어 있어 head
태그 내용을 동적으로 관리할 수 있는 vue-meta
라이브러리를 사용하였다.
vue-meta
라이브러리 설치하기npm install vue-meta
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 }
]
}
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>
태그가 추가되어 있다. 이를 통해 검색 엔진은 해당 페이지를 본래의 페이지로 인식하고, 중복 콘텐츠 문제를 해결한다.
canonical은 검색 엔진 최적화 (SEO)에서 중요한 역할을 한다. canonical은 하나의 URL이 여러 개의 다른 URL로 표시될 때, 검색 엔진이 이를 인식하고 해당 페이지의 랭킹을 적절하게 할당하기 위해 사용된다.
예를 들어, 동일한 콘텐츠가 여러 개의 URL에 표시된 경우, 검색 엔진에서는 이를 중복 콘텐츠로 간주하고, 랭킹을 할당할 때 이를 고려한다. 이는 검색 엔진 랭킹에 악영향을 끼칠 수 있다.
이때, canonical을 사용하면 검색 엔진은 여러 개의 URL 중 어떤 것이 "본래의" 문서인지를 인식하게 된다. 따라서 중복 콘텐츠 문제가 해결된다.
프론트엔드에서 canonical을 사용할 때 몇 가지 주의할 점
이러한 주의사항을 지켜 canonical을 사용하면 중복 콘텐츠 문제를 효과적으로 해결할 수 있다.