반응형 title과 meta 정보를 현재 화면에 맞게 설정합니다.
useHead는 title, meta, link와 htmlAttrs를 선언하고 SSR HTML head에 반영합니다. 페이지마다 고유하고 구체적인 제목을 제공합니다.
사용자 입력을 head에 반영할 때 Nuxt의 안전한 처리 경계를 유지하고 raw innerHTML을 피합니다.
공통 titleTemplate과 페이지별 title의 책임을 나눕니다.
모든 페이지에 같은 제목을 쓰면 검색 결과와 여러 탭을 구분하기 어렵습니다.
로컬 프로젝트에서 확인해보세요description meta와 lang 속성을 추가하세요.
<script setup>
const course = ref("Nuxt SEO");
useHead({
title: computed(() => course.value + " | hohyeon.dev"),
meta: [{ name: "description", content: "Nuxt 메타데이터 실습" }],
});
</script>
<template>
<main>
<h1>{{ course }}</h1>
<input v-model="course" aria-label="페이지 제목" />
</main>
</template>