Nuxt3에서는 useHead를 활용해 각 페이지별로 메타 태그를 설정할 수 있습니다. 하지만 클라이언트 사이드 렌더링(CSR) 환경에서는 검색 엔진이 이 태그를 제대로 읽지 못할 수도 있습니다. 이 글에서는 Nuxt3에서 메타 태그를 설정하는 방법과 SSR을 활용한 SEO 최적화 방법을 살펴보겠습니다.

메타태그 설정

아래와 같이 useHead를 사용하여 기본적인 메타 태그를 설정할 수 있습니다.

app.vue에서 기본 설정

useHead({
  title: 'MODE TESTㅣ테스트',
  meta: [
    { name: 'description', content: 'default description입니다' },
    { name: 'keywords', content: 'default keywords, nuxt' },
  ],
});

특정 페이지(subpage.vue)에서 메타태그 설정

useHead({
  title: 'MODE TESTㅣSSR',
  meta: [
    { name: 'description', content: '🚀🚀 SSR MODE 🚀🚀' },
    { name: 'keywords', content: '⭐,🔮,🎉,🚀,📋' },
  ],
});

개발자 도구에서 확인하면 메타 태그가 정상적으로 출력됩니다.

실제 검색 엔진이 잘 읽을 수 있을까?

SEO 테스트 사이트인 seomator를 활용하여 메타 태그가 정상적으로 읽히는지 확인해 보았습니다.

결과는..!

CSR 환경에서 SEO Check 결과

..??????
어디갔지...?
🤔

CSR vs SSR 차이점

CSR (Client Side Rendering)

CSR 방식에서는 브라우저가 최초에 최소한의 HTML을 받아오고, 이후 JavaScript가 실행되면서 동적으로 페이지를 구성합니다. 따라서 SEO 크롤러가 JavaScript 실행을 기다리지 않으면 메타 태그를 읽지 못할 수 있습니다.

SSR (Server Side Rendering)

SSR 방식에서는 서버에서 HTML을 완전히 렌더링한 후 브라우저로 전송합니다. 따라서 검색 엔진 크롤러가 페이지의 메타 태그를 정상적으로 읽을 수 있습니다

SSR이 필요한 이유

1. 검색 엔진 최적화(SEO) 🚀

• SSR을 사용하면 크롤러가 HTML을 완전히 렌더링된 상태로 가져오기 때문에 검색 노출이 유리합니다.
• SNS 공유 시 OG(Open Graph) 태그 적용이 용이합니다.

2. 빠른 페이지 렌더링 ⚡

• SSR을 사용하면 초기 로딩 속도가 빨라지므로 사용자 경험(UX)이 개선됩니다.

SSR 단점

브라우저 전용 객체(window, document 등) 사용 불가 ❌

• SSR 환경에서는 JavaScript가 서버(Node.js)에서 실행되므로 beforeCreate나 created 훅에서 window 또는 document 객체를 사용할 수 없습니다.

SSR 환경에서 SEO 최적화하기

Nuxt.js에서 SSR 설정

Nuxt3는 기본적으로 SSR을 지원하지만, 명확하게 설정하는 것이 가독성 및 협업에 유리할 수 있습니다.

nuxt.config.ts파일에서 ssr:true 설정

export default defineNuxtConfig({
	ssr: true,
})

✅ SSR 환경에서 SEO Check 결과

이제 SEO Checker에서도 내가 설정한 메타 태그를 정상적으로 읽을 수 있습니다! 🚀

도움받은 글
캡틴판교 블로그