Ch 05. SEO 메타 태그와 Head 관리
검색 엔진과 SNS 공유 미리보기는 모두 <head> 영역의 태그를 읽습니다. Nuxt 3는 useHead와 useSeoMeta 두 Composable로 페이지별 head를 동적으로 제어할 수 있게 해 줍니다.
useHead — 모든 head 태그를 제어하기
useHead는 <title>, <meta>, <link>, <script> 등 head 안의 모든 요소를 설정할 수 있는 범용 Composable입니다.
// pages/blog/[slug].vueconst { data: post } = await useFetch(`/api/posts/${route.params.slug}`)useHead({ title: post.value?.title, meta: [ { name: 'description', content: post.value?.summary }, { property: 'og:title', content: post.value?.title }, { property: 'og:image', content: post.value?.thumbnail } ], link: [ { rel: 'canonical', href: `https://example.com/blog/${route.params.slug}` } ]})data가 Ref이면 useHead는 반응성을 자동으로 추적합니다. 데이터가 바뀌면 head도 함께 업데이트됩니다.
useSeoMeta — SEO 전용 단축어
Open Graph, Twitter Card, 기본 메타 태그를 한 번에 설정하려면 useSeoMeta가 편리합니다. 속성 이름이 직관적이고, TypeScript 자동 완성도 잘 됩니다.
useSeoMeta({ title: '실전 Nuxt.js', description: 'Nuxt 3로 풀스택 개발 배우기', ogTitle: '실전 Nuxt.js', ogDescription: 'Nuxt 3로 풀스택 개발 배우기', ogImage: 'https://example.com/og.png', ogUrl: 'https://example.com', twitterCard: 'summary_large_image', twitterTitle: '실전 Nuxt.js', twitterImage: 'https://example.com/og.png'})og:와 twitter: 접두어를 camelCase로 변환한 속성명을 씁니다. 예를 들어 og:image는 ogImage가 됩니다.
nuxt.config.ts에서 기본값 설정하기
모든 페이지에 공통으로 적용할 기본값은 nuxt.config.ts의 app.head에 정의합니다.
// nuxt.config.tsexport default defineNuxtConfig({ app: { head: { titleTemplate: '%s | 실전 Nuxt.js', meta: [ { name: 'author', content: '작성자' }, { property: 'og:site_name', content: '실전 Nuxt.js' } ], link: [ { rel: 'icon', type: 'image/png', href: '/favicon.png' } ] } }})titleTemplate의 %s 자리에 각 페이지에서 설정한 title 값이 들어갑니다. 예를 들어 페이지에서 title: '1장. 시작하기'로 설정하면 브라우저 탭에는 1장. 시작하기 | 실전 Nuxt.js로 표시됩니다.
페이지별로 고유한 타이틀과 설명을 설정하고 공통 템플릿으로 묶는 것이 SEO의 기본입니다. useSeoMeta로 시작해서 세밀한 제어가 필요할 때 useHead를 더하는 방식으로 활용하면 됩니다.