Nuxt.js

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

_doit 2024. 8. 23. 19:04
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
반응형