반응형
Nuxt 3에서 SEO 최적화 제대로 하기 🌐
구글에 잘 노출되는 블로그 만들기
Nuxt 3의 가장 큰 장점 중 하나는 SEO 친화적인 웹사이트를 손쉽게 만들 수 있다는 거예요.
Vue 단독 프로젝트는 클라이언트 사이드 렌더링(CSR)이라 검색엔진 최적화가 어렵지만,
Nuxt 3는 SSR(서버 사이드 렌더링) 및 SSG(정적 사이트 생성)을 기본 지원해
검색 엔진이 페이지 내용을 잘 읽을 수 있도록 해줍니다.
✅ 기본 개념 정리
- SSR (Server Side Rendering)
서버에서 HTML을 먼저 렌더링 → 검색엔진이 바로 인식 가능 - SSG (Static Site Generation)
미리 렌더된 HTML을 배포 → 속도 빠르고 SEO 우수
🧠 useHead()로 메타태그 설정하기
Nuxt 3에서 SEO의 핵심은 useHead()입니다.
페이지마다 title, description, og:image 같은 메타태그를 설정할 수 있어요.
<script setup>
useHead({
title: 'Nuxt 3 SEO 최적화 방법',
meta: [
{ name: 'description', content: 'Nuxt 3에서 SEO를 최적화하는 방법을 소개합니다.' },
{ property: 'og:title', content: 'Nuxt 3 SEO 최적화 방법' },
{ property: 'og:description', content: 'Nuxt 3로 검색엔진에 잘 노출되는 블로그 만들기' },
{ property: 'og:image', content: 'https://yourdomain.com/og-image.png' },
{ name: 'twitter:card', content: 'summary_large_image' },
]
})
</script>이렇게 설정하면 해당 페이지 HTML의 <head>에 자동으로 태그가 삽입됩니다.
🧾 definePageMeta()로 기본 설정하기
각 페이지의 라우트 수준에서 메타 정보를 설정할 수도 있어요.
<script setup>
definePageMeta({
title: 'Nuxt SEO - 블로그',
layout: 'default',
description: 'Nuxt 3로 만든 블로그 페이지입니다.',
})
</script>
definePageMeta는 Nuxt 내부에서만 활용되는 메타 정보예요. 실제<head>태그에 반영되지는 않지만, 레이아웃/미들웨어 등과 함께 관리하기 좋아요.
🖼 og:image에 쓸 이미지 최적화
- 1200x630 사이즈의
.png또는.jpg추천 https://풀 경로 사용 (상대 경로 안 됨!)- Cloudflare, Vercel 이미지 URL 잘 작동함
🗺️ sitemap.xml 생성 (검색엔진 인덱싱을 위해)
sitemap을 자동 생성하려면 모듈 설치:
npm install @nuxtjs/sitemapnuxt.config.ts에 설정 추가:
export default defineNuxtConfig({
modules: ['@nuxtjs/sitemap'],
sitemap: {
hostname: 'https://yourdomain.com',
routes: [
'/',
'/about',
'/blog',
],
}
})배포 후 /sitemap.xml 경로로 확인할 수 있어요.
🤖 robots.txt 설정
npm install @nuxtjs/robotsnuxt.config.ts에 추가:
export default defineNuxtConfig({
modules: ['@nuxtjs/robots'],
robots: {
UserAgent: '*',
Disallow: '',
Sitemap: 'https://yourdomain.com/sitemap.xml',
}
})📌 Nuxt SEO 정리 체크리스트
-
useHead()로 title, description, og 태그 설정 - 각 페이지 별로 메타태그 커스터마이징
- sitemap.xml, robots.txt 자동 생성
- SSR or SSG 설정 확인 (
ssr: true) - URL 구조는 의미 있게 만들기 (
/blog/seo-guide등)
✍️ 마무리
Nuxt 3는 설정만 잘 하면 Vue보다 훨씬 SEO 친화적인 구조를 쉽게 만들 수 있어요.
특히 useHead()로 구성된 메타 태그는 검색 순위에 큰 영향을 줄 수 있습니다.
👉 다음 글에서는 Nuxt 3의 데이터 패칭 시스템,useFetch, useAsyncData, 그리고 API 연동에 대해 알아볼게요!
반응형
댓글