배경 이미지
728x90
반응형

SEO (검색 엔진 최적화) 는 단순히 <head> 태그만 관리하는 것이 아니라, 검색 엔진이 웹사이트를 더 잘 이해하고, 올바르게 인덱싱하며, 사용자가 검색할 때 더 쉽게 찾을 수 있도록 돕는 다양한 기술과 전략을 포괄하는 작업이다.

  • <head> 태그: 메타 태그와 구조화된 데이터 설정.
  • 크롤링 제어: robots.txt와 메타 로봇 태그로 크롤링을 제어.
  • 사이트맵(sitemap): 사이트맵을 생성하고 제출하여 검색 엔진이 사이트를 효과적으로 크롤링할 수 있게 돕습니다.
  • 구조화된 데이터: 리치 스니펫을 위한 구조화된 데이터 추가.
  • 성능 최적화 및 콘텐츠 관리: 검색 엔진 최적화의 핵심.

이 모든 작업이 조화를 이루어야 검색 엔진에서 좋은 순위를 유지하고, 웹사이트의 가시성을 높일 수 있다.

 

보통은 nuxt-seo 라이브러리를 대부분 활용함 

 

Sitemap 생성하기 

1. Nuxt Sitemap 모듈 설치

  • Nuxt.js에서는 사이트맵 생성을 쉽게 도와주는 @nuxtjs/sitemap 모듈을 제공한다.
npx nuxi@latest module add sitemap
  • Nuxt Sitemap 모듈은 설치된 상태에서, 별도의 sitemap 설정을 하지 않더라도 자동으로 기본적인 사이트맵을 생성한다. 이 경우, 기본적으로 프로젝트의 모든 정적 라우트가 사이트맵에 포함된다.

2. 사이트 구성 설정:

  • nuxt.config.ts에서 site.url 및 site.name을 설정. 이는 사이트의 기본 URL 및 사이트맵에 표시될 이름을 정의하는 것.
export default defineNuxtConfig({
  site: {
    url: 'https://example.com',
    name: 'My Awesome Website',
    description: 'Nuxt SEO is a collection of hand-crafted Nuxt Modules to help you rank higher in search engines.',
    tagline: 'All the boring SEO stuff for Nuxt done.'
  },
})

 

3. 동적 라우트 포함

  • 동적 라우트 (예: [query].vue)는 기본 설정만으로는 포함되지 않습니다. 동적 라우트를 포함하려면 별도로 routes 옵션을 설정해야 한다.
sitemap: {
  routes: async () => {
    // 동적 라우트 목록 생성 로직 추가
  }
}

 

4. 사이트맵 확인 

{도메인}/sitemap.xml 로 사이트맵을 확인할 수 있다.

 

크롤링 제어

1. @nuxtjs/robots 모듈 설치 

npx nuxi@latest module add robots

 

2. 기본 설정

export default defineNuxtConfig({
  modules: ['@nuxtjs/robots'],

  robots: {
    rules: [
      {
        UserAgent: '*',  // 모든 검색 엔진 크롤러에 적용
        Allow: '/',  // 모든 페이지를 크롤링 허용
      }
    ],
    sitemap: 'https://example.com/sitemap.xml'  // 사이트맵의 위치
  }
})

이 설정은 robots.txt 파일을 생성하여 모든 페이지가 크롤링될 수 있도록 한다.

 

3. 특정 페이지 크롤링 금지 

export default defineNuxtConfig({
  modules: ['@nuxtjs/robots'],

  robots: {
    rules: [
      {
        UserAgent: '*',
        Disallow: '/admin',  // /admin 경로 크롤링 금지
        Allow: '/',  // 나머지 모든 경로 크롤링 허용
      }
    ],
    sitemap: 'https://example.com/sitemap.xml'
  }
})

이 설정은 /admin 경로에 있는 모든 페이지를 크롤링하지 않도록 한다.

 

4. robots.txt 확인 

{도메인}/robots.txt  로 사이트맵을 확인할 수 있다.

참고로 개발 환경에서는 크롤링이 안됨

 



참고자료
https://nuxtseo.com/nuxt-seo/getting-started/what-is-nuxt-seo
https://github.com/harlan-zw/nuxt-seo

728x90
반응형

'Nuxt.js' 카테고리의 다른 글

[Nuxt] <head> 태그 관리와 SNS 미리보기 설정 방법  (0) 2024.08.22
728x90
반응형

Nuxt.js는 <head> 태그 관리와 SNS 미리보기 설정을 위해 다양한 도구를 제공한다.

이번 글에서는 Nuxt의 기본 <head> 설정, 그리고 <head> 태그를 동적으로 관리할 수 있는 useHead와 SEO와 SNS 미리보기에 특화된 useSeoMeta의 차이와 활용 방법을 정리해보겠습니다:) 

 

Nuxt의 기본 <head> 설정

Nuxt.js는 기본적으로 모든 페이지에 공통적으로 적용될 <head> 태그의 기본값을 제공한다.

이 설정은 nuxt.config.ts 파일에서 정의할 수 있으며, 사이트 전체에 동일한 설정을 적용할 때 유용.

export default defineNuxtConfig({
  app: {
    head: {
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',
    }
  }
})

이 기본 설정을 통해 페이지의 인코딩 방식(charset)과 반응형 뷰포트 설정(viewport) 같은 사이트 전반에 걸쳐 동일하게 유지해야 하는 중요한 설정들을 관리할 수 있다.

 

<useHead> 설정

왜 useHead를 사용하는가?

기본 <head> 설정은 모든 페이지에 동일하게 적용되므로, 페이지마다 다른 설정이 필요한 경우에는 유연성이 부족할 수 있다. 예를 들어, 각 페이지마다 다른 제목이나 메타 태그가 필요할 때, useHead를 사용하면 개별 페이지나 컴포넌트에서 동적으로 <head> 태그를 설정할 수 있다.

<script setup lang="ts">
useHead({
  title: 'Dynamic Page Title',
  meta: [
    { name: 'description', content: 'This is a dynamic page description.' }
  ],
  link: [
    { rel: 'stylesheet', href: 'https://example.com/style.css' }
  ],
  script: [
    { src: 'https://example.com/script.js' }
  ]
});
</script>

useHead는 기본 설정을 보완하여, 특정 페이지나 컴포넌트에서 개별적으로 필요한 설정을 동적으로 적용할 수 있는 도구이다. 이로써 사이트의 유연성과 확장성을 높일 수 있다. 또한, SEO와 SNS 미리보기 태그도 설정할 수 있어 다목적 도구로 사용가능하다.

 

<useSeoMeta> 설정

왜 useSeoMeta를 사용하는가?

useSeoMeta는 SEO 최적화와 SNS 미리보기를 위한 메타 태그를 설정하는 데 특화된 도구이다. useSeoMeta는 useHead와 같은 기반에서 동작하지만, SEO와 관련된 다양한 메타 태그를 더욱 쉽게 관리할 수 있도록 설계되어 있으며, 특히 Open Graph 태그와 같은 SNS 공유 시 필요한 설정을 효율적으로 처리할 수 있다.

<script setup lang="ts">
useSeoMeta({
  title: 'SEO Optimized Title',
  description: 'This is a description for SEO.',
  ogTitle: 'My Amazing Site on Social Media',
  ogDescription: 'Check out this amazing site!',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
});
</script>

 

+) app.vue에서의 전역 설정

Nuxt.js 애플리케이션의 최상위 컴포넌트인 app.vue 파일에서도 전역 <head> 설정을 useSeoMeta를 통해 할 수 있습니다. 이곳에서 설정된 <head> 태그는 모든 페이지에 적용되며, nuxt.config.ts 파일과 마찬가지로 페이지 전역에서 기본값으로 작용한다. 

<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>

<script setup lang="ts">
useSeoMeta({
  title: 'Default Site Title',
  description: 'Default site description.',
  ogTitle: 'Default Site Title',
  ogDescription: 'Default site description for social media.',
  ogImage: 'https://example.com/default-image.png',
  twitterCard: 'summary_large_image',
});
</script>

 

결론

Nuxt.js에서 <head> 태그를 관리하는 방법은 세 가지로 나뉜다. 기본 설정은 전체적인 사이트 설정을 담당하고, useHead는 페이지별로 동적인 설정을 가능하게 하며, useSeoMeta는 SEO와 SNS 미리보기를 위해 특화된 메타 태그 설정을 돕느다. 이 세 가지 도구를 상황에 맞게 유기적으로 활용하면, 웹사이트의 SEO 성능과 사용자 경험을 극대화할 수 있다.

 

따라서, SEO와 SNS 미리보기에 중점을 두고 작업할 때는 useSeoMeta를 사용하는 것이 더 효율적이며, 보다 다양한 <head> 태그 관리를 원한다면 useHead를 사용하는 것이 적합하다.

 

728x90
반응형

'Nuxt.js' 카테고리의 다른 글

[Nuxt] SEO(검색 엔진 최적화)  (0) 2024.08.23

+ Recent posts

티스토리툴바