Nuxt에서 SEO 최적화하는 방법

작성자:

1. 도입

Nuxt를 사용하는 이유 중 하나는 바로 SEO 때문이다.

하지만 단순히 Nuxt를 쓴다고 해서 자동으로 SEO가 잘 되는 것은 아니다.

이 글에서는 Nuxt에서 SEO를 제대로 적용하는 방법을 정리해보겠다.

2. Nuxt가 SEO에 유리한 이유

Nuxt.js는 기본적으로 SSR(Server-Side Rendering)을 지원한다.

👉 핵심 포인트:

  • CSR: 자바스크립트 실행 후 콘텐츠 생성 (SEO 불리)
  • SSR: 서버에서 HTML 완성 → 검색엔진 바로 읽음 (SEO 유리)

👉 즉, Nuxt는 검색엔진이 크롤링하기 좋은 구조를 기본적으로 제공한다.

3. meta 태그 설정

SEO의 핵심은 meta 정보다.

Nuxt에서는 useHead()를 사용한다.

useHead({
  title: 'Nuxt SEO 최적화 방법',
  meta: [
    { name: 'description', content: 'Nuxt에서 SEO 최적화하는 방법을 설명합니다.' },
    { name: 'keywords', content: 'Nuxt, SEO, SSR, Vue' }
  ]
})

👉 중요한 이유

  • title: 검색 결과 제목
  • description: 클릭률(CTR)에 영향
  • keywords: 요즘 영향 적지만 참고용

4. 동적 페이지 SEO 처리

예를 들어 게시글 상세 페이지라면:

useHead({
  title: post.title,
  meta: [
    { name: 'description', content: post.summary }
  ]
})

👉 포인트

  • 모든 페이지마다 다른 meta 필요
  • 자동 생성되게 만들어야 SEO 강력해짐


5. Open Graph (SNS 공유 최적화)

useHead({
  meta: [
    { property: 'og:title', content: 'Nuxt SEO 글' },
    { property: 'og:description', content: 'SEO 최적화 방법' },
    { property: 'og:image', content: '/thumbnail.jpg' }
  ]
})

👉 효과

  • 카톡 / 페이스북 공유 시 미리보기 생성됨
  • 클릭률 증가

6. sitemap & robots 설정

sitemap: 검색엔진에 사이트 구조 알려줌

👉 추천 모듈

  • @nuxtjs/sitemap

robots.txt

크롤링 허용/차단 설정

User-agent: *
Allow: /

7. 페이지 속도 최적화

SEO에서 속도는 매우 중요하다.

👉 방법

  • 이미지 최적화 (용량 줄이기)
  • lazy loading 적용
  • 불필요한 JS 제거

👉 측정 도구

8. SSR vs SSG 전략 선택

Nuxt는 다양한 렌더링 방식을 지원한다.

  • SSR → 실시간 데이터 (뉴스, 쇼핑몰)
  • SSG → 정적 페이지 (블로그, 회사 소개)

👉 SEO 관점

둘 다 좋지만 상황에 맞게 선택해야 한다.

9. SEO 체크리스트 (실무용)

  • title 설정했는가?
  • description 있는가?
  • 페이지별 meta 다른가?
  • 이미지 alt 넣었는가?
  • sitemap 있는가?
  • robots 설정했는가?
  • 로딩 속도 빠른가?

10. 결론

Nuxt는 SEO에 유리한 구조를 제공하지만

결국 중요한 것은 meta 설정 + 구조 설계 + 속도 최적화다.

이 세 가지만 잘 해도 검색 노출은 확실히 달라진다.

댓글 남기기