useHead·useSeoMeta로 타이틀과 Open Graph 설정, 동적 메타.

SEO 와 메타 태그

검색 노출과 SNS 공유 미리보기는 <head> 의 메타 태그에 달려 있습니다. SSR을 기본으로 하는 Nuxt는 서버에서 이 태그들을 채워 보내므로 SEO에 유리합니다. 이번 레슨에서는 useHead, useSeoMeta 로 타이틀과 Open Graph를 설정하고, 데이터에 따라 동적으로 바꾸는 법을 익힙니다.

학습 목표

useHead 로 <head> 의 태그를 제어한다.
useSeoMeta 로 SEO·소셜 메타를 타입 안전하게 작성한다.
데이터에 따라 타이틀·설명을 동적으로 바꾼다.
definePageMeta 와 메타의 차이를 안다.

useHead 기본

useHead 는 타이틀, 메타, 링크, 스크립트 등 <head> 전체를 제어합니다.

<script setup>
useHead({
  title: '일감 목록',
  meta: [
    { name: 'description', content: '오늘의 할 일을 관리하세요.' },
  ],
  link: [
    { rel: 'icon', href: '/favicon.ico' },
  ],
});
</script>

타이틀 템플릿

페이지마다 사이트 이름을 붙이고 싶다면 app.vue 나 레이아웃에서 titleTemplate 을 정합니다.

// app.vue
useHead({
  titleTemplate: (title) => (title ? `${title} | dev.syw.kr` : 'dev.syw.kr'),
});

useSeoMeta

SEO·소셜 태그는 이름이 까다롭습니다(og:title, twitter:card 등). useSeoMeta 는 이를 카멜케이스 속성 으로 받아 오타를 막고 타입 힌트를 줍니다.

<script setup>
useSeoMeta({
  title: '일감 목록',
  description: '오늘의 할 일을 관리하세요.',
  ogTitle: '일감 목록 | dev.syw.kr',
  ogDescription: '간편한 할 일 관리',
  ogImage: 'https://dev.syw.kr/og/tasks.png',
  twitterCard: 'summary_large_image',
});
</script>

💡 TIP — 일반적인 SEO에는 useSeoMeta 를, 파비콘·외부 스크립트 같은 비메타 태그에는 useHead 를 쓰면 역할이 깔끔하게 나뉩니다.

동적 메타 태그

상세 페이지처럼 데이터에 따라 메타가 달라질 때는 반응형 값(또는 함수) 을 넘깁니다. 데이터가 바뀌면 태그도 자동 갱신됩니다.

<script setup>
const route = useRoute();
const { data: task } = await useFetch(`/api/tasks/${route.params.id}`);

useSeoMeta({
  // getter로 넘기면 task가 채워질 때 반영됨
  title: () => task.value?.title ?? '일감',
  description: () => task.value?.summary ?? '',
  ogTitle: () => `${task.value?.title} | dev.syw.kr`,
});
</script>

⚠️ 주의 — title: task.value?.title 처럼 값을 즉시 평가하면 SSR 시점의 한 번만 반영됩니다. 동적으로 갱신하려면 함수(getter) 나 computed 를 넘기세요.

Open Graph 핵심 태그

SNS 공유 미리보기를 위한 대표 태그입니다.

태그	역할
`ogTitle`	공유 시 제목
`ogDescription`	공유 시 설명
`ogImage`	미리보기 이미지(절대 URL 권장)
`ogUrl`	정규 URL
`twitterCard`	트위터 카드 형식

definePageMeta 와의 차이

이름이 비슷하지만 역할이 다릅니다.

useHead / useSeoMeta → HTML <head> 태그 를 설정(SEO·소셜).
definePageMeta → 라우트 수준 메타데이터(레이아웃, 미들웨어, name 등). <head> 와 무관합니다.

<script setup>
definePageMeta({
  layout: 'admin',
  middleware: 'auth',
});

useSeoMeta({ title: '관리자' });
</script>

요약

useHead 로 타이틀·메타·링크 등 <head> 전체를 제어합니다.
useSeoMeta 는 SEO·Open Graph 태그를 타입 안전하게 작성합니다.
동적 메타는 값이 아니라 함수(getter) 로 넘겨 자동 갱신되게 합니다.
definePageMeta 는 라우트 메타데이터로, <head> 설정과 다릅니다.

연습문제

app.vue 에 titleTemplate 을 설정해 모든 페이지 제목 뒤에 | dev.syw.kr 이 붙게 해보세요.
일감 목록 페이지에 useSeoMeta 로 description과 ogImage를 설정해 보세요.
상세 페이지에서 task.value?.title 을 getter로 넘겨 타이틀이 데이터에 따라 바뀌게 해보세요.
definePageMeta 로 레이아웃을, useSeoMeta 로 제목을 동시에 설정해 둘의 역할 차이를 확인해 보세요.

힌트 — 동적 메타는 함수로 넘기고, <head> 가 아닌 라우트 설정은 definePageMeta 라는 점을 기억하세요.

💡 연습문제 풀이

불러오는 중…

SEO 와 메타 태그

학습 목표

useHead 기본

타이틀 템플릿

useSeoMeta

동적 메타 태그

Open Graph 핵심 태그

definePageMeta 와의 차이

요약

연습문제

함께 보면 좋은 자료

📑 치트시트

🛠 자주 나는 에러

✅ 복습 퀴즈

댓글 0