8. SEO 와 Meta

기본적으로 Nuxt는 필요한 경우 재정의할 수 있는 기본값을 제공한다.

// nuxt.config.ts

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

nuxt.config.ts 에 app.head 속성을 제공하면 전체 앱의 헤드를 맞춤설정할 수 있다.

이 메서드를 사용하면 반응형 데이터를 제공할 수 없다. app.vue 에서 useHead() 를 사용하는 것을 권장한다.

보다 쉽게 구성할 수 있는 바로가기: charset 및 viewport. Types 에 아래 나열된 키 중 하나를 제공할 수도 있다 .

useHead

컴포저블 함수 useHead() 를 사용하면 Unhead 에서 제공하는 프로그래밍 방식 및 반응형 방식으로 헤드 태그를 관리할 수 있다 .

모든 컴포저블과 마찬가지로 컴포넌트 setup 및 수명 주기 후크에만 사용할 수 있습니다.

<!--
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 컴포저블을 살펴보자.

useSeoMeta

useSeoMeta 컴포저블 을 사용하면 사이트의 SEO 메타 태그를 TypeScript가 완전히 지원되는 플랫 개체로 정의할 수 있다.

이렇게 하면 오타와 property 대신 name 을 사용하는 등의 일반적인 실수를 방지하는 데 도움이 된다.

<!--
app.vue
-->

<script setup lang="ts">
useSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

힌트) 자세한 내용은 Docs > API > Composables > Use Seoo Meta

컴포넌트

Nuxt는 컴포넌트 템플릿 내의 메타데이터와 직접 상호 작용할 수 있도록 <Title>, <Base>, <NoScript>, <Style>, <Meta>, <Link>, <Body>, <Html> 및 <Head> 구성 요소를 제공한다.

이러한 구성 요소 이름은 기본 HTML 요소와 일치하므로 템플릿에서 대문자로 표시하는 것이 매우 중요하다.

<Head> <Body>는 (미적인 이유로) 중첩된 메타 태그를 허용할 수 있지만 최종 HTML에서 중첩된 메타 태그가 렌더링되는 위치에는 영향을 미치지 않는다 .

<!--
app.vue
-->

<script setup lang="ts">
const title = ref('Hello World')
</script>

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="title" />
      <Style type="text/css" children="body { background-color: green; }" />
    </Head>

    <h1>{{ title }}</h1>
  </div>
</template>

Types

다음은 useHead, app.head 및 컴포넌트에서 사용되는 비반응형 타입이다.

interface MetaObject {
  title?: string
  titleTemplate?: string | ((title?: string) => string)
  templateParams?: Record<string, string | Record<string, string>>
  base?: Base
  link?: Link[]
  meta?: Meta[]
  style?: Style[]
  script?: Script[]
  noscript?: Noscript[];
  htmlAttrs?: HtmlAttributes;
  bodyAttrs?: BodyAttributes;
}

자세한 타입 @unhead/schema를 참조.

특징(Features)

Reactivity

reactive 은 computed, getter 및 reactive 과 같은 모든 속성에서 지원됩니다.
getter( () => value )를 사용하는 것이 (computed(() => value) ) 를 사용하는 것 보다 좋다.

<!--
useHead
-->
<script setup lang="ts">
const description = ref('My amazing site.')

useHead({
  meta: [
    { name: 'description', content: description }
  ],
})
</script>


<!--
useSeoMeta
-->
<script setup lang="ts">
const description = ref('My amazing site.')

useSeoMeta({
  description
})
</script>


<!--
Components
-->
<script setup lang="ts">
const description = ref('My amazing site.')
</script>

<template>
  <div>
    <Meta name="description" :content="description" />
  </div>
</template>

타이틀 템플릿

titleTemplate옵션을 사용하여 사이트 제목을 사용자 정의하기 위한 동적 템플릿을 제공 할 수 있습니다. 예를 들어 모든 페이지의 제목에 사이트 이름을 추가할 수 있다.
titleTemplate 는 %s 으로 대체되는 문자열이거나 함수일 수 있다.

(완전한 제어를 위해) 기능을 사용하려는 경우 nuxt.config 에서 설정할 수 없으며 대신 app.vue 파일 내에서 설정하는 것이 좋다. 파일 내에서 설정하면사이트의 모든 페이지에 적용된다.

<!--
useHead
-->

<script setup lang="ts">
useHead({
  titleTemplate: (titleChunk) => {
    return titleChunk ? `${titleChunk} - Site Title` : 'Site Title';
  }
})
</script>

이제 사이트의 다른 페이지에서 제목을 useHead 를 사용하여 '내 페이지' 로 설정하면 제목이 브라우저 탭에 '내 페이지 - 사이트 제목'으로 표시된다. 사이트 제목에 null 을 기본값으로 전달할 수도 있다.

Body 태그

해당 태그의 tagPosition: 'bodyClose' 옵션을 사용하여 <body> 태그 끝에 추가할 수 있습니다.
예를 들어:

<script setup lang="ts">
useHead({
  script: [
    {
      src: 'https://third-party-script.com',
      // valid options are: 'head' | 'bodyClose' | 'bodyOpen'
      tagPosition: 'bodyClose'
    }
  ]
})
</script>

definePageMeta 사용 예

pages/ 디렉터리 내에서 definePageMeta를 useHead 와 함께 사용하여 현재 경로를 기반으로 메타데이터를 설정할 수 있다.

예를 들어, 먼저 현재 페이지 제목을 설정할 수 있습니다(이 제목은 빌드 시 매크로를 통해 추출되므로 동적으로 설정할 수 없다).

<!--
pages/some-page.vue
-->

<script setup lang="ts">
definePageMeta({
  title: 'Some Page'
})
</script>

그런 다음 레이아웃 파일에서 이전에 설정한 경로의 메타데이터를 사용할 수 있다.

<!--
layouts/default.vue
-->

<script setup lang="ts">
const route = useRoute()

useHead({
  meta: [{ property: 'og:title', content: `App Name - ${route.meta.title}` }]
})
</script>

힌트) 자세한 내용은 Docs > Examples > Features > Meta Tags

힌트) 자세한 내용은 Docs > Guide > Directory Structure > Pages > #page Metadata

동적 제목

아래 예에서는 %s 플레이스홀더 있는 문자열 또는 function 으로 titleTemplate 을 지정할 수 있다. Nuxt 앱의 각 경로에 대해 페이지 제목을 동적으로 설정하는데 더 큰 유연성을 제공한다.

<!--
app.vue
-->


<script setup lang="ts">
useHead({
  // as a string,
  // where `%s` is replaced with the title
  titleTemplate: '%s - Site Title',
  // ... or as a function
  titleTemplate: (productCategory) => {
    return productCategory
      ? `${productCategory} - Site Title`
      : 'Site Title'
  }
})
</script>

nuxt.config 는 페이지 제목을 설정하는 방법으로도 사용된다. 그러나 nuxt.config 는 페이지 제목이 동적이게 하지는 않는다. 따라서 동적 제목을 추가하기 위해 app.vue 파일에서 titleTemplate 사용하는 것이 좋습니다 . 그런 다음 이는 Nuxt 앱의 모든 경로에 적용된다.

외부 CSS

아래 예에서는 useHead 컴포저블 link 속성 이나 <Link> 컴포넌트를 사용하여 Google Fonts를 활성화하는 방법을 보여준다.

<!--
useHead
-->

<script setup lang="ts">
useHead({
  link: [
    {
      rel: 'preconnect',
      href: 'https://fonts.googleapis.com'
    },
    {
      rel: 'stylesheet',
      href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',
      crossorigin: ''
    }
  ]
})
</script>


<!--
Components
-->
<template>
  <div>
    <Link rel="preconnect" href="https://fonts.googleapis.com" />
    <Link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" crossorigin="" />
  </div>
</template>

'Nuxt 공식문서 번역 > 개요' 카테고리의 다른 글

10. 데이터 가져오기(Data fetching) (0)	2023.12.11
9. Transitions (0)	2023.12.11
7. 라우팅 (0)	2023.12.10
6. Styling (1)	2023.12.10
5. Assets (1)	2023.12.10