728x90
반응형
이번에 nuxt3를 도입하기로 결정한 가장 큰 이유는 SEO 문제를 해결하기 위해서이다
nuxt3 공식문서에 SEO를 설정하기 위한 3가지 방법을 제시하고 있다.
1. App Head
nuxt.config.ts 파일에 아래와 같이 설정을 하면 전역으로 설정이 가능하다
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-16',
viewport: 'width=500, initial-scale=1',
title: 'My App',
meta: [
// <meta name="description" content="My amazing site">
{ name: 'description', content: 'My amazing site.' }
],
}
}
})공통된 항목은 nuxt.config.ts 파일에 설정 한뒤 각 페이지마다 동적으로 변경되는 meta 데이터를 수정해서 쓰면 될 것 같다
2. Composable: useHead
두번째 방법은 각 페이지에 설정 할수 있는 useHead 컴포저블 방식이다
각 페이지 별로 설정할 수도 있고 app.vue 에 설정하면 전역으로 설정이 된다
<script setup lang="ts">
useHead({
title: 'My App',
meta: [
{ name: 'description', content: 'My amazing site.' }
],
bodyAttrs: {
class: 'test'
},
script: [ { children: 'console.log(\'Hello world\')' } ]
})
</script>SEO 설정에 필요한 페이지에 각각 위에 코드처럼 설정해서 사용 할 수 있다
3. Components
마지막 3번째 방법은 컴포넌트 방식이다
nuxt3는 <Title>,<Base>,<NoScript>,<Style>,<Meta>,<Link>,<Body>,<Html>,<Head> 이런 태그들을 제공해 주기 때문에 template 내에 직접 작성을 할 수도 있다
<script setup>
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>위에 코드처럼 template 안에서 직접 컨트롤을 할 수도 있다
각 상황에 맞는 방법을 활용하여 SEO 최적화를 진행하면 될 것 같다
728x90
반응형
'프로그래밍 > Vue' 카테고리의 다른 글
| [Nuxt3] eCharts 적용 (+ 에러) (0) | 2022.12.29 |
|---|---|
| [Nuxt3] 5. 간단한 TODO 앱 만들어보기 (0) | 2022.11.21 |
| [Nuxt3] 3. Style 적용하기 (0) | 2022.11.21 |
| [Nuxt3] 2. Eslint + prettier + Typescript 설정 (0) | 2022.11.17 |
| [Nuxt3] 1. 프로젝트 생성 및 설정 (2) | 2022.11.17 |
