강력한 head config, composables, components를 사용하여 Nuxt 앱의 SEO를 향상시켜보세요.

Default

기본적으로 Nuxt는 <head>에 대해 기본값을 제공하며, 필요한 경우에는 이를 재정의할 수 있습니다.

**// nuxt.config.ts**
export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

nuxt.config.ts에서 app.head 속성을 사용하면 전체 페이지의 head 값을 원하는 값으로 변경할 수 있습니다.

<aside> ⚠️ 이 방법을 사용하면 반응형 데이터를 제공할 수 없습니다. app.vue에서 useHead()를 사용하는 것을 권장합니다.

</aside>

설정을 간단하게 만들기 위한 단축키가 있습니다. charset과 viewport 그리고 Types에 나열된 키들 중 아무거나 사용할 수도 있습니다.

실습

useHead

useHead 컴포저블 함수를 사용하면 Unhead 기반의 프로그래밍적이고 반응적인 방식으로 head 태그를 관리할 수 있습니다.

다른 모든 컴포저블과 마찬가지로 컴포넌트 setup function 및 lifecycle hooks에서만 사용할 수 있습니다.

<aside> 💡 Unhead은 성능과 개발자 경험을 위해 구축된 어떤 프레임워크에나 사용할 수 있는 문서 헤드(Head) 관리자입니다.

</aside>

**// app.vue**
<script setup lang="ts">
useHead({
  title: 'My App',
  meta: [
    { name: 'description', content: 'My amazing site.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\\'Hello world\\')' } ]
})
</script>

useHead와 useHeadSafe 컴포저블을 살펴보는 것을 추천합니다.

실습