Next.js를 위한 사이트맵 자동 생성 도구: Next-sitemap 사용 가이드

프로젝트 폴더에서 npm 또는 yarn을 사용해 패키지를 설치합니다.

 npm install next-sitemap 

 

사용법

직접 사용에 앞서, root 폴더에 next-sitemap.config.js 이름의 설정 파일을 생성합니다.

1. SITE_URL 등록
   siteUrl: https://example.com 예시입니다. 
   
   
2. package.json script 수정
   dev, build, start 등 다양한 script가 존재할 수 있고, 그 밑에, postbuild를 생성해 아래 예시와 같이 입력해주시면 됩니다.

 

/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true, // (optional)
  // ...other options
}

"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap --config next-sitemap.config.js"
}

 

사용자화

Next-sitemap에서 사용 가능한 주요 옵션들은 아래와 같습니다. 필수적인 요소 이외, 추가할 수 있는 다양한 기능이 있습니다.

 

sitemapSize

• 유형: 사용자 설정
• 기본값: 5000
• 설명: 한 개의 sitemap 파일에 포함될 수 있는 URL의 최대 개수를 지정합니다. 이 설정은 대규모 프로젝트에서 여러 개의 sitemap 파일로 나누어 관리해야 할 때 유용합니다. 최대값으로 10,000을 넘기지 않는 것을 권장합니다.

exclude

• 유형: 사용자 설정 (배열)
• 설명: sitemap 생성 시 제외하고자 하는 URL 경로를 배열 형태로 명시합니다. 예를 들어, 비공개 페이지나 숨겨진 페이지를 제외하고자 할 때 사용합니다. 예시: ['/secret-page', '/hidden'].

extraPaths

• 유형: 사용자 설정 (배열)
• 설명: sitemap에 추가적으로 포함시키고 싶은 URL 경로를 배열 형태로 명시합니다. 이는 기본 페이지 크롤링으로는 포함되지 않는 특별한 페이지를 sitemap에 포함시키고자 할 때 사용됩니다. 예시: ['/extra-page', '/special'].

excludeIndex

• 유형: 사용자 설정 (불리언)
• 기본값: false
• 설명: true로 설정하면 모든 index 페이지가 sitemap에서 제외됩니다. 이는 특정 index 페이지를 검색 엔진 결과에서 제외시키고자 할 때 사용할 수 있습니다.

sourceDir

• 유형: 사용자 설정 (문자열)
• 기본값: next
• 설명: 페이지가 생성되는 디렉토리를 지정합니다. 대부분의 프로젝트에서는 이 기본값을 변경할 필요가 없습니다.

outDir

• 유형: 사용자 설정 (문자열)
• 기본값: public
• 설명: 생성된 sitemap 파일이 저장될 위치를 설정합니다. 대부분의 경우, 기본값이 가장 적합합니다.

robotsTxtOptions

• 유형: 사용자 설정 (객체)
• 설명: generateRobotsTxt 옵션이 true일 경우, 이 설정을 사용하여 robots.txt 파일에 대한 세부 설정을 할 수 있습니다. 이 객체 내에서는 policy, sitemap, host 등의 설정을 할 수 있으며, 사이트의 검색 엔진 크롤링 방식을 세밀하게 제어할 수 있습니다.

이러한 수정 및 보완을 통해 사용자는 자신의 Next.js 프로젝트의 sitemap을 보다 세밀하게 조정하고, 웹사이트의 검색 엔진 최적화(SEO)를 개선할 수 있습니다.

 

module.exports = {
  siteUrl: 'https://example.com',
  generateRobotsTxt: true,
  sitemapSize: 7000,
  exclude: ['/secret', '/private'],
  extraPaths: ['/extra', '/special'],
  excludeIndex: true,
  sourceDir: '.next',
  outDir: 'public',
  robotsTxtOptions: {
    additionalSitemaps: [
      'https://example.com/extra-sitemap.xml', // 추가 사이트맵
    ],
    policy: [
      { userAgent: '*', disallow: '/private' }, // 정책 생성
    ],
  }
}

 

SEO 최적화를 위한 next-sitemap.config.js 설정 가이드

이 설정은 SEO 운영을 원활하게 하고, 다국어 사이트 최적화를 위해 설계되었습니다. MDX 파일 확장자를 포함하여 사이트맵이 업데이트될 수 있도록 특별한 함수를 적용하는 방법을 포함합니다. siteUrl은 반드시 사용자의 도메인으로 변경해야 하며, 다국어 서비스를 제공하지 않는 경우 alternateRefs 설정은 필요 없습니다. 마찬가지로, 페이지에 MDX 파일이 아닌 다른 형식의 파일만 있다면 additionalPaths 설정 역시 불필요할 수 있습니다. 개인 프로젝트의 요구사항에 맞게 설정을 조정하여 우수한 SEO 성과를 달성할 수 있습니다. robotsTxtOptions는 사이트의 크롤링을 제어하기 위해 추가되었으며, 전체적인 허용 정책을 세분화하지 않고 일관되게 사용할 수 있습니다.

구성 항목

• changefreq

  • 유형: 설정 예시
  • 설명: 사이트맵 내 각 URL의 변경 빈도를 'daily'로 설정하여 검색 엔진이 매일 해당 페이지를 재크롤링하도록 합니다.

• priority

  • 유형: 설정 예시
  • 설명: 사이트맵 내 각 URL의 우선 순위를 0.7로 설정하여 검색 엔진에게 페이지의 상대적 중요성을 알립니다.

• sitemapSize

  • 유형: 설정 예시
  • 설명: 단일 sitemap 파일에 포함될 수 있는 URL의 최대 개수를 5000으로 설정하여 큰 사이트의 경우 여러 개의 sitemap 파일로 관리할 수 있도록 합니다.

• exclude

  • 유형: 설정 예시
  • 설명: 제외하고자 하는 URL 경로를 지정하는 배열입니다. 배열이 비어 있으면 모든 경로가 사이트맵에 포함됩니다.

• alternateRefs

  • 유형: 설정 예시
  • 설명: 다국어 사이트를 위한 대체 링크를 설정합니다. 예를 들어, 홈페이지가 한국어, 영어, 일본어 버전으로 제공될 경우 이를 설정합니다.

• additionalPaths

  • 유형: 설정 예시
  • 설명: 추가적으로 포함할 경로를 불러오는 비동기 함수를 설정합니다. 이를 통해 /pages 내의 모든 MDX 파일을 찾아 사이트맵에 자동으로 추가할 수 있습니다.

module.exports = {
  siteUrl: 'http://example.com',
  changefreq: 'daily',
  priority: 0.7,
  sitemapSize: 5000,
  generateRobotsTxt: true,
  exclude: [],
  alternateRefs: [
    {
      href: 'https://example.com/kr',
      hreflang: 'ko',
    },
    {
      href: 'https://example.com/en',
      hreflang: 'en',
    },
    {
      href: 'https://example.com/jp',
      hreflang: 'ja',
    },
  ],
  transform: async (config, path) => {
    return {
      loc: path,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }
  },
  additionalPaths: async (config) => {
  const allMdxFiles = findAllMdxFiles('./pages')
    return allMdxFiles.map((file) => ({
      loc: `${config.siteUrl}/${file}`,
      changefreq: config.changefreq,
      priority: config.priority,
      lastmod: config.autoLastmod ? new Date().toISOString() : undefined,
      alternateRefs: config.alternateRefs ?? [],
    }))
  },
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '\*',
        allow: '/',
      },
      {
        userAgent: 'Googlebot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Bingbot',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yeti',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoo! Slurp',
        allow: '/',
        disallow: [],
      },
      {
        userAgent: 'Yahoobot', // Japan Yahoo
        allow: '/',
        disallow: [],
      },
    ],
    additionalSitemaps: ['https://example/sitemap-0.xml'],
  },
}