[Nuxt] <head> 태그 관리와 SNS 미리보기 설정 방법
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를 사용하는 것이 적합하다.
