Nuxt.js

[Nuxt] <head> 태그 관리와 SNS 미리보기 설정 방법

_doit 2024. 8. 22. 19:09
728x90
반응형

Nuxt.js는 <head> 태그 관리와 SNS 미리보기 설정을 위해 다양한 도구를 제공한다.

이번 글에서는 Nuxt의 기본 <head> 설정, 그리고 <head> 태그를 동적으로 관리할 수 있는 useHead와 SEO와 SNS 미리보기에 특화된 useSeoMeta의 차이와 활용 방법을 정리해보겠습니다:) 

 

Nuxt의 기본 <head> 설정

Nuxt.js는 기본적으로 모든 페이지에 공통적으로 적용될 <head> 태그의 기본값을 제공한다.

이 설정은 nuxt.config.ts 파일에서 정의할 수 있으며, 사이트 전체에 동일한 설정을 적용할 때 유용.

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

이 기본 설정을 통해 페이지의 인코딩 방식(charset)과 반응형 뷰포트 설정(viewport) 같은 사이트 전반에 걸쳐 동일하게 유지해야 하는 중요한 설정들을 관리할 수 있다.

 

<useHead> 설정

왜 useHead를 사용하는가?

기본 <head> 설정은 모든 페이지에 동일하게 적용되므로, 페이지마다 다른 설정이 필요한 경우에는 유연성이 부족할 수 있다. 예를 들어, 각 페이지마다 다른 제목이나 메타 태그가 필요할 때, useHead를 사용하면 개별 페이지나 컴포넌트에서 동적으로 <head> 태그를 설정할 수 있다.

<script setup lang="ts">
useHead({
  title: 'Dynamic Page Title',
  meta: [
    { name: 'description', content: 'This is a dynamic page description.' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://example.com/style.css' }
  ],
  script: [
    { src: 'https://example.com/script.js' }
  ]
});
</script>

useHead는 기본 설정을 보완하여, 특정 페이지나 컴포넌트에서 개별적으로 필요한 설정을 동적으로 적용할 수 있는 도구이다. 이로써 사이트의 유연성과 확장성을 높일 수 있다. 또한, SEO와 SNS 미리보기 태그도 설정할 수 있어 다목적 도구로 사용가능하다.

 

<useSeoMeta> 설정

왜 useSeoMeta를 사용하는가?

useSeoMeta는 SEO 최적화와 SNS 미리보기를 위한 메타 태그를 설정하는 데 특화된 도구이다. useSeoMeta는 useHead와 같은 기반에서 동작하지만, SEO와 관련된 다양한 메타 태그를 더욱 쉽게 관리할 수 있도록 설계되어 있으며, 특히 Open Graph 태그와 같은 SNS 공유 시 필요한 설정을 효율적으로 처리할 수 있다.

<script setup lang="ts">
useSeoMeta({
  title: 'SEO Optimized Title',
  description: 'This is a description for SEO.',
  ogTitle: 'My Amazing Site on Social Media',
  ogDescription: 'Check out this amazing site!',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
});
</script>

 

+) app.vue에서의 전역 설정

Nuxt.js 애플리케이션의 최상위 컴포넌트인 app.vue 파일에서도 전역 <head> 설정을 useSeoMeta를 통해 할 수 있습니다. 이곳에서 설정된 <head> 태그는 모든 페이지에 적용되며, nuxt.config.ts 파일과 마찬가지로 페이지 전역에서 기본값으로 작용한다. 

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
useSeoMeta({
  title: 'Default Site Title',
  description: 'Default site description.',
  ogTitle: 'Default Site Title',
  ogDescription: 'Default site description for social media.',
  ogImage: 'https://example.com/default-image.png',
  twitterCard: 'summary_large_image',
});
</script>

 

결론

Nuxt.js에서 <head> 태그를 관리하는 방법은 세 가지로 나뉜다. 기본 설정은 전체적인 사이트 설정을 담당하고, useHead는 페이지별로 동적인 설정을 가능하게 하며, useSeoMeta는 SEO와 SNS 미리보기를 위해 특화된 메타 태그 설정을 돕느다. 이 세 가지 도구를 상황에 맞게 유기적으로 활용하면, 웹사이트의 SEO 성능과 사용자 경험을 극대화할 수 있다.

 

따라서, SEO와 SNS 미리보기에 중점을 두고 작업할 때는 useSeoMeta를 사용하는 것이 더 효율적이며, 보다 다양한 <head> 태그 관리를 원한다면 useHead를 사용하는 것이 적합하다.

 

728x90
반응형