인프런 커뮤니티 질문&답변

안녕하세요, 동그리님!

제가 작성한 강의에서는 gatsby-plugin-sitemap 라이브러리의 버전이 2.12.0 이었습니다.

그런데 확인해보니까 이번에 버전이 v4로 업데이트되면서 동작 방식이 아예 변경됐습니다.

우선, gatsby-plugin-sitemap 라이브러리가 업데이트되면서 기본적으로 sitemap이 생성되는 디렉토리가 public/sitemap/ 으로 변경되었습니다.

만약 단순히 public 디렉토리에 생성하고 싶다면 아래와 같이 output options을 추가해주시면 됩니다.

module.exports = {
  siteMetadata: { ... },
  plugins: [
    ...,
    {
      resolve: 'gatsby-plugin-sitemap',
      options: {
        output: '/',
      },
    },
    ...
  ],
};

아래는 gatsby-plugin-sitemap 라이브러리에서 사용되는 코드의 일부분인데요, 해당 부분에 의해서 기본적으로 생성되는 사이트맵의 파일명이 sitemap-index.xml입니다.

import * as React from "react"
import { withPrefix as fallbackWithPrefix, withAssetPrefix } from "gatsby"
import { withoutTrailingSlash } from "./internals"

// TODO: Remove for v3 - Fix janky path/asset prefixing
const withPrefix = withAssetPrefix || fallbackWithPrefix

exports.onRenderBody = ({ setHeadComponents }, pluginOptions) => {
  const { output, createLinkInHead } = pluginOptions

  if (!createLinkInHead) {
    return
  }

  setHeadComponents([
    <link
      key={`gatsby-plugin-sitemap`}
      rel="sitemap"
      type="application/xml"
      href={withPrefix(withoutTrailingSlash(output) + `/sitemap-index.xml`)}
    />,
  ])
}

그리고, 몇몇 웹 마스터 도구에서는 특정 개수(대략 5만) 이상의 URL이 담긴 사이트맵을 인식하지 못한다는 문제가 발생한다고 합니다.

그래서 이 문제를 해결하기 위해 단위 개수(entryLimit 옵션을 통해 설정 가능하고 기본값은 45000입니다)만큼 URL을 나눠, 그만큼의 사이트맵을 생성한 후 sitemap-index.xml 파일에 모두 해당 사이트맵을 반영하기 때문에 sitemap-index.xml 파일에는 sitemap-0.xml, sitemap-1.xml 등의 사이트맵 주소밖에 존재하지 않습니다.

이런 이유로 인해 URL의 개수가 적더라도 sitemap-0.xml 파일이 생성되어 블로그의 URL이 모두 해당 파일에 저장됩니다.

안녕하세요 동그리님 :)

우선 sitemap.xml 파일은 public 디렉토리 안에 생성되어야 하는데 파일이 존재하는 디렉토리 위치와 파일명이 모두 다르네요??

이 부분 확인을 위해 gatsby-config.js 코드를 전부 올려주실 수 있나요??

아니면 yarn run gatsby clean 커맨드 입력을 통해 cache, public 디렉토리를 모두 삭제하신 후, 다시 빌드를 해보시는 것도 좋을 것 같습니다.

그리고 정상적으로 public/sitemap.xml 파일이 생성된다면 그 때 다시 웹 마스터 도구에 sitemap 등록을 해보시는 것을 권장드립니다.

그리고 해당 예제에서 사용하는 플러그인은 ** 혹은 __로 볼드체를 작성할 수 있습니다!

strong 태그로 변환해주기 때문에 해당 태그의 font-weight 속성을 더 굵게 조정하시면 될 것 같아요.

안녕하세요!

gatsby clean를 하고 다시 build를 했는데 마찬가지로 아래와 같이 sitemap 폴더에 두 개로 나뉘어 생성됩니다. ㅜㅜ

위 댓글에 gatsby-config 파일을 올렸습니다. 혹시 봐주실 수 있을까요?

부탁드립니다. ㅜㅜㅜ 구글링해도 잘 안나오네요 ㅠㅠ

module.exports = {
  siteMetadata: {
    title: 'DevWhkang Blog',
    description: '안녕하세요 주니어 개발자 강원형 블로그입니다.',
    author: 'DevWhkang',
    siteUrl: 'https://devwhkang.gatsbyjs.io',
  },
  plugins: [
    {
      resolve: 'gatsby-plugin-robots-txt',
      options: {
        host: 'https://devwhkang.gatsbyjs.io',
        sitemap: 'https://devwhkang.gatsbyjs.io/sitemap/sitemap-index.xml',
        policy: [{ userAgent: '*', allow: '/' }],
      },
    },
    {
      resolve: 'gatsby-plugin-canonical-urls',
      options: {
        siteUrl: 'https://devwhkang.gatsbyjs.io',
        stripQueryString: true,
      },
    },
    'gatsby-plugin-sitemap',
    {
      resolve: 'gatsby-plugin-typescript',
      options: {
        isTSX: true,
        allExtensions: true,
      },
    },
    `gatsby-plugin-emotion`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `contents`,
        path: `${__dirname}/contents`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/static`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-smartypants',
            options: {
              dashes: 'oldschool',
            },
          },
          {
            resolve: 'gatsby-remark-prismjs',
            options: {
              classPrefix: 'language-',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              maxWidth: 768,
              quality: 100,
              withWebp: true,
              loading: 'lazy',
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {},
          },
          {
            resolve: 'gatsby-remark-external-links',
            options: {
              target: '_blank',
              rel: 'nofollow',
            },
          },
        ],
      },
    },
  ],
};