next-sitemap (한국어)

해당 게시글의 설명 중 hreflang Korea, Japan이 kr, jp가 ko, ja로 변경됐습니다. 2023년 11월 12일

Next-sitemap은 Next.js 프로젝트의 사이트맵 생성을 간편하게 도와주는 패키지입니다. 사이트맵 생성을 자동화하여 SEO(검색 엔진 최적화)에 도움을 줍니다. 문서를 참고해 직접 정리한 내용입니다.


Installation

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

Installation

npm install next-sitemap 

Usage

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

  • Name
    SITE_URL 등록
    Type
    사용법
    Description

    siteUrl: https://example.com 예시입니다. 반드시 본인의 Url을 등록합시다!

  • Name
    package.json script 수정
    Type
    사용법
    Description

    dev, build, start 등 다양한 script가 존재할 수 있고, 그 밑에, postbuild를 생성해 아래 예시와 같이 입력해주면 됩니다.

next-sitemap.config.js

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

package.json

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

Customization

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

설명

  • Name
    sitemapSize
    Type
    사용자화
    Description

    기본값은 5000입니다. 한 개의 sitemap 파일에 포함될 URL의 최대 개수를 지정합니다. 이 옵션은 큰 프로젝트에서 여러 sitemap 파일로 분할해야 할 때 유용합니다. 10,000이상은 권장하지 않습니다.

  • Name
    exclude(array)
    Type
    사용자화
    Description

    사이트맵 생성 시 제외하고 싶은 URL 경로를 배열 형태로 추가합니다. 예: [/secret-page,'hidden']

  • Name
    extraPaths(array)
    Type
    사용자화
    Description

    sitemap에 추가로 포함시키고 싶은 URL 경로를 배열 형태로 추가합니다. 예: [/extra-page', '/special']

  • Name
    excludelndex(boolean)
    Type
    사용자화
    Description

    기본값은 false입니다. true로 설정하면 모든 index 페이지가 사이트맵에서 제외됩니다.

  • Name
    sourceDir(string)
    Type
    사용자화
    Description

    기본값은 next입니다. 페이지들이 생성되는 디렉토리를 설정합니다. 대부분의 경우 기본 값을 변경할 필요는 없습니다.

  • Name
    outDir(string)
    Type
    사용자화
    Description

    기본값은 public입니다. 생성된 사이트맵 파일 저장 위치를 설정합니다. 대부분의 상황에서 기 본값이 적합합니다.

  • Name
    robotsTxtOptions(object)
    Type
    사용자화
    Description

    generateRobots Txt 옵션이 true일 때 사용되며, 객체 안에 policy, sitemap, host 등에 대한 상세 설정이 가능합니다.

next-sitemap.config.js

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 코드는 불필요합니다. 또한 pages에 mdx가 아닌 경우, additionalPaths 또한 작성이 필요없습니다. 개인 프로젝트 요구사항에 맞춰 optional을 적절하게 사용하면 훌륭한 SEO 운영이 가능합니다. robotsTxtOptions경우, 향후 제어를 위해 추가했습니다. 전체 허용을 할 경우 세분화 대신 통일해서 사용해도 됩니다.

  • Name
    changefreq
    Type
    예시
    Description

    사이트맵 내 각 URL의 변경 빈도를 'daily'로 설정합니다.

  • Name
    priority
    Type
    예시
    Description

    사이트맵 내 각 URL의 우선 순위를 0.7로 설정합니다.

  • Name
    sitemapSize
    Type
    예시
    Description

    한 개의 sitemap 파일에 포함될 URL 최대 개수를 5000으로 설정합니다.

  • Name
    exclude
    Type
    예시
    Description

    제외할 URL 경로를 지정하는 배열이 비어 있어 모든 경로가 포함됩니다.

  • Name
    alternateRefs
    Type
    예시
    Description

    다국어 사이트에 대한 대체 링크를 설정합니다. 홈페이지의 한국어, 영어, 일본어 버전이 있습니다.

  • Name
    additionalPaths
    Type
    예시
    Description

    추가적으로 포함할 경로를 불러오는 비동기 함수를 설정합니다. '/pages'에서 모든 MDX 파일을 찾아 sitemap에 추가합니다.

next-sitemap.config.js

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'],
  },
}