[javascript] Nuxt.js에서의 동적 메타 태그 설정 방법은?

19 Dec 2023

javascript

Nuxt.js에서의 동적 메타 태그 설정

Nuxt.js는 페이지의 메타 태그를 동적으로 설정할 수 있습니다. 이를 통해 각 페이지의 제목, 설명, 키워드 등을 동적으로 변환하여 SEO를 최적화할 수 있습니다.

1. 페이지 컴포넌트에서 메타 태그 설정

우선, 페이지 컴포넌트에서 head 속성을 사용하여 메타 태그를 동적으로 설정할 수 있습니다. 예를 들어, 아래와 같이 페이지 컴포넌트에서 메타 태그를 설정할 수 있습니다.

export default {
  head() {
    return {
      title: '페이지 제목',
      meta: [
        { hid: 'description', name: 'description', content: '페이지 설명' },
        { name: 'keywords', content: '키워드1, 키워드2' }
      ]
    }
  }
}

2. 동적인 메타 데이터 사용

또한, 각 페이지에서 동적인 메타 데이터를 사용하여 메타 태그를 설정할 수 있습니다. 예를 들어, 데이터베이스에서 가져온 정보를 이용하여 메타 태그를 동적으로 설정할 수 있습니다.

export default {
  async asyncData({ params }) {
    const article = await fetchArticle(params.id);
    return { 
      title: article.title,
      description: article.description,
      keywords: article.keywords.join(', ')
    }
  },
  head() {
    return {
      title: this.title,
      meta: [
        { hid: 'description', name: 'description', content: this.description },
        { name: 'keywords', content: this.keywords }
      ]
    }
  }
}

3. 플러그인 사용

또 다른 방법으로는 Nuxt.js 플러그인을 사용하여 메타 태그를 동적으로 설정할 수 있습니다. 이를 통해 일괄적으로 메타 태그를 관리하고 수정할 수 있습니다.

이와 같이 Nuxt.js에서 동적으로 메타 태그를 설정할 수 있습니다. 이를 통해 각 페이지의 SEO를 개선할 수 있으며, 사용자에게 더욱 풍부한 경험을 제공할 수 있습니다.

참고 문헌: Nuxt.js 공식 문서