결과 화면

https://heejae0811.github.io/nuxt3-todo/

 

오늘의 할 일

오늘의 할 일은 무엇인가요?

heejae0811.github.io

 

버전

node v.20.8.1

nuxt v.3.8.1

vue v.3.3.8

 

1. nuxt.config.ts

head 태그 아래에 추가하고 싶은 메타태그를 작성한다. (title, meta, link가 HTML 태그로 변환된다.)

name, content, property 등 작성한 값들이 메타태그 속성으로 들어가기 때문에 다른 메타태그를 추가하고 싶다면 속성에 맞는 값들을 입력한다.

 

메타태그 이미지와 파비콘 이미지 경로는 절대 경로를 사용한다.

깃허브 페이지를 통해 빌드된 파일을 배포하고 있기 때문에 메타태그 이미지는 assets 폴더가 아닌 public 폴더에 넣는다.

export default defineNuxtConfig({
  app: {
    head: {
      title: 'ToDo List',
      meta: [
        { name: 'description', content: '오늘의 할 일은 무엇인가요?' },
        { property: 'og:title', content: '오늘의 할 일' },
        { property: 'og:description', content: '오늘의 할 일은 무엇인가요?' },
        { property: 'og:image', content: 'https://heejae0811.github.io/nuxt3-todo/meta.jpg' }
      ],
      link: [
        { rel: 'icon', type: 'image/x-icon', href: 'https://heejae0811.github.io/nuxt3-todo/favicon.ico' }
      ]
    },
  },
  
  ...
})

 

2. 페이지 별 메타태그 설정하기

nuxt.config.ts에 정의한 메타태그는 모든 페이지에서 공통으로 적용된다.

 

각 페이지 별로 메타태그를 다르게 설정하고 싶으면 아래 링크를 참고한다.

https://jae-study.tistory.com/129

 

[Nuxt3] #16 Nuxt 3 SEO (메타태그 설정하기)

SEO & metas with Nuxt 3 — Course part 16 https://www.youtube.com/watch?v=PpyXtoM5HWQ&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=16 유튜브 강의를 참고하고 있습니다. 공통 메타태그 설정하기 nuxt.config.ts 모든 페이지에서

jae-study.tistory.com

저작자표시 비영리 변경금지

'Vue, Nuxt > Nuxt 3 ToDo 만들기' 카테고리의 다른 글

[Nuxt3] #7 ToDo List 만들기 - Nest.js + PSQL 상세페이지 만들기 (useFetch())  (1) 2023.12.26
[Nuxt3] #6 ToDo List 만들기 - Nest.js + PSQL 연결하기 (useFetch())  (1) 2023.12.22
[Nuxt3] #4 ToDo List 만들기 - 깃허브 페이지 배포하기  (0) 2023.11.30
[Nuxt3] #3 ToDo List 만들기 - 등록순/최신순 정렬하기  (0) 2023.11.30
[Nuxt3] #2 ToDo List 만들기 - Pinia store로 ToDo 추가, 삭제하기  (0) 2023.11.29

SEO & metas with Nuxt 3 — Course part 16

https://www.youtube.com/watch?v=PpyXtoM5HWQ&list=PL8HkCX2C5h0XT3xWYn71TlsAAo0kizmVc&index=16

 

유튜브 강의를 참고하고 있습니다.

 

공통 메타태그 설정하기

  • nuxt.config.ts

모든 페이지에서 동일한 title과 description이 적용된다.

export default defineNuxtConfig({
  app: {
    head: {
      title: 'Nuxt course on Youtube',
      meta: [
        { name: 'description', content: 'This is a repository for a course about Nuxt 3 for youtube.' }
      ]
    }
  },
  ...
})

 

페이지 별 메타태그 설정하기

1. useHead()

useHead() 컴포져블을 사용하면 unhead에서 제공하는 프로그래밍 방식 및 반응형 방식으로 <head> 태그를 관리할 수 있다.

'~~' 따음표를 이용한 텍스트 또는 변수로 SEO 설정이 가능하다.

 

  • pages/index.vue
<script setup lang="ts">
const route = useRoute()

useHead({
  title: `타이틀: ${route.name}`,
  meta: [
    { name: 'description', content: 'This is an index page.' }
  ],
  bodyAttrs: {
    class: 'test'
  },
  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
})
</script>

<template>
  <h1>인덱스 페이지</h1>
</template>

 

2. useSeoMeta()

useSeoMeta() 컴포져블을 사용하면 타입스크립트가 완전히 지원하는 SEO 메타 태그 객체를 정의할 수 있다.

'~~' 따음표를 이용한 텍스트 또는 변수로 SEO 설정이 가능하다.

 

  • pages/auth/index.vue
<script setup lang="ts">
const route = useRoute()

useSeoMeta({
  title: route.name,
  ogTitle: 'Login Page',
  description: 'This is a login page.',
  ogDescription: 'This is a login page.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})
</script>

<template>
  <div>로그인 페이지</div>
</template>

 

3. <Head> 태그

Nuxt는 <Head>, <Title>, <Style>, <Meta>, <Link> 등의 태그를 제공하기 때문에 HTML 영역에 직접적으로 메타태그를 설정할 수 있다.

 

  • pages/auth/index.vue
<script setup lang="ts">
const description = ref('This is dynamic description.')
</script>

<template>
  <Head>
    <Title>Login Page</Title>
    <Meta name="description" :content="description"/>
    <Style type="text/css" children="body { background-color: gray !important; }" />
  </Head>

  <div>{{ description }}</div>
</template>

저작자표시 비영리 변경금지

'Vue, Nuxt > Nuxt 3 기초' 카테고리의 다른 글

[Nuxt3] #15 Nuxt 3 useAsycnData, useLazyAsyncData (useFetch, useAsyncData, $fetch 비교)  (0) 2023.11.24
[Nuxt3] #14 Nuxt 3 useFetch, useLazyFetch  (0) 2023.11.24
[Nuxt3] #13 Nuxt 3 렌더링 모드 (Universal Mode와 CSR/SSR/SSG, SPA/MPA)  (1) 2023.11.23
[Nuxt3] #12 Nuxt 3 Nitro 서버  (1) 2023.11.22
[Nuxt3] #11 Nuxt 3 Server (API 연결, HTTP 메서드)  (0) 2023.11.22

+ Recent posts

티스토리툴바