검색엔진 최적화에 대해서는 이 글에서 간략하게 공부했습니다.
넉스트를 이용하여 개발할 때 검색 엔진 최적화를 위해 어떤 작업을 해주어야 할지 공부해 보도록 하겠습니다.
Basic
인프런 짐코딩 강의 교안을 통해 공부한 내용입니다.
Nuxt는 기본적으로 아래 기본값을 제공하며, 필요한 경우 재정의가 가능합니다.
// nuxt.config.ts
export default defineNuxtConfig({
app: {
head: {
charset: 'utf-8',
viewport: 'width=device-width, initial-scale=1',
}
}
})head에 title과 meta를 아래와 같이 지정할 수 있습니다.
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
app: {
head: {
title: 'Vue & Nuxt 강의',
meta: [{ name: 'description', content: '짐코딩 Vue & Nuxt 강의입니다.' }],
},
},그러나 위의 방식을 이용하면 head 내에 반응형 데이터를 제공할 수 없어, useHead 컴포저블 함수를 사용하는 것이 권장됩니다.
app.vue
<template>
<NuxtLayout>
<NuxtPage />
</NuxtLayout>
</template>
<script setup lang="ts">
const title = ref('Vue & Nuxt Mastery Class');
const description = ref(
'짐코딩과 함께 Vue3 기초부터 실전, 활용! 그리고 Nuxt Framework 까지 함께 배워봐요!',
);
useHead({
title,
meta: [{ name: 'description', content: description }],
});
</script>useHead를 이용하여 head 정보를 설정하는 것의 장점/단점
Nuxt는 기본적으로 SSR로 동작하기 때문에 useHead를 이용해 head 정보를 서버에서 세팅하고, 클라이언트에 내려주기 때문에 검색 엔진 최적화에 도움이 됩니다. 하지만 클라이언트 단에서 동적으로 head의 내용을 바꾸는 것은 검색 엔진 최적화에 좋지 않습니다.
useHead를 이용하는 것이 더 낫다는 의미는, 동적으로 값을 계속 바꿀 수 있다는 점에서 좋다기 보다는 SSR을 통해 페이지를 구성할 때 원하는 값을 손쉽게 세팅할 수 있다는 점에서 나은 것입니다.
useSeoMeta
useHead는 HTML의 head 태그에 들어갈 모든 메타 데이터를 정의하는 데 사용할 수 있는 유연한 함수입니다. useHead를 이용해 페이지의 title, meta 태그, link, script 등의 다양한 head 요소들을 설정할 수 있습니다.
useSeoMeta는 SEO에 특화된 메타 데이터를 쉽게 정의할 수 있도록 도와주는 함수입니다. 반면, useSeoMeta는 SEO에 특화된 컴포저블이기 때문에 head의 다른 요소들을 설정하는데는 제한적입니다.
useSeoMeta는 useHead에 비해 SEO 목적 최적화되어 있으며, XSS 같은 공격으로부터 보호할 수 있도록 Nuxt에서 인코딩 및 데이터 처리가 신경 써서 설계되어 있습니다.
Advanced
인프런 짐코딩 강의 교안을 통해 공부한 내용입니다.
Components
Basic 단계에서 useHead, useSeoMeta를 이용해서 head 태그 정보를 세팅하는 방법을 배웠습니다. Nuxt는 Component를 이용하여 head 태그 정보를 세팅하는 방법도 제공합니다.
// 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>위 코드처럼 컴포넌트를 이용해 head 태그 데이터를 세팅할 수 있습니다. 다만, Title, Base, NoScript, Style, Meta, Link, Body, Html과 같이 첫 글자를 대문자로 써야 하는 것에 주의해야 합니다.
