GatsbyJS에서 Sitemap(사이트맵) 생성 및 SEO 최적화하기

GatsbyJS에서 Sitemap(사이트맵) 생성 및 SEO 최적화하기

Sitemap(사이트맵)은 검색 엔진이 웹사이트의 모든 페이지를 쉽게 크롤링할 수 있도록 돕는 필수적인 SEO 요소입니다.
이번 글에서는 Gatsby에서 자동으로 Sitemap을 생성하고 SEO를 최적화하는 방법을 설명하겠습니다. 🚀

---

1. Sitemap이 중요한 이유

✅ 사이트맵(Sitemap)의 역할과 필요성

역할 설명

검색 엔진 크롤링 최적화	Google, Bing 등 검색 엔진이 사이트 구조를 쉽게 파악
새로운 페이지 색인(Indexing) 속도 향상	새로운 글이나 페이지가 더 빠르게 검색에 반영됨
SEO 점수 개선	사이트 구조를 명확하게 제공하여 검색 순위 향상
페이지 누락 방지	내부 링크가 부족한 페이지도 검색 엔진에 등록 가능

🚀 Gatsby에서는 gatsby-plugin-sitemap을 사용하여 자동으로 사이트맵을 생성할 수 있습니다.

---

2. gatsby-plugin-sitemap 플러그인 설치

✅ Sitemap 플러그인 설치

npm install gatsby-plugin-sitemap

---

3. gatsby-config.js에서 Sitemap 설정

반응형

📌 gatsby-config.js 수정하여 Sitemap 추가

module.exports = {
  siteMetadata: {
    siteUrl: "https://example.com", // 필수: Sitemap 생성에 필요
  },
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        query: `
          {
            site {
              siteMetadata {
                siteUrl
              }
            }
            allSitePage {
              nodes {
                path
              }
            }
          }
        `,
        resolvePages: ({ allSitePage }) => allSitePage.nodes,
        serialize: ({ path }) => ({ url: path }),
      },
    },
  ],
};

✅ 설명

• siteMetadata.siteUrl을 설정하여 절대 경로(Absolute URL)로 사이트맵을 생성
• allSitePage를 사용하여 Gatsby에서 자동으로 생성된 모든 페이지를 포함
• /sitemap.xml 파일을 생성하여 검색 엔진이 크롤링할 수 있도록 제공

🚀 이제 /sitemap.xml 경로에서 자동 생성된 Sitemap을 확인할 수 있습니다!

---

4. Sitemap 확인 및 배포

✅ 로컬 개발 환경에서 Sitemap 확인

gatsby develop

• http://localhost:8000/sitemap.xml에 접속하여 Sitemap이 정상적으로 생성되었는지 확인

---

✅ 배포 후 Sitemap 확인

Gatsby를 Vercel, Netlify 등에 배포한 후

https://yourdomain.com/sitemap.xml

• 브라우저에서 해당 URL을 열어 Sitemap이 올바르게 표시되는지 확인

🚀 이제 검색 엔진이 웹사이트의 모든 페이지를 쉽게 크롤링할 수 있습니다!

---

5. Google Search Console에 Sitemap 제출하기

Google이 사이트맵을 빠르게 크롤링하도록 Google Search Console에 등록할 수 있습니다.

✅ Google Search Console에서 Sitemap 제출하는 방법

1. Google Search Console 접속
2. "속성 추가" > 웹사이트 URL 입력
3. 좌측 메뉴에서 "Sitemaps" 클릭
4. https://yourdomain.com/sitemap.xml 입력 후 "제출"

🚀 이제 Google이 사이트를 빠르게 크롤링하고 색인할 수 있습니다!

---

6. robots.txt에 Sitemap 경로 추가하기

검색 엔진이 Sitemap을 빠르게 찾을 수 있도록 robots.txt 파일에 Sitemap 경로를 추가해야 합니다.

✅ gatsby-plugin-robots-txt 설치

npm install gatsby-plugin-robots-txt

---

✅ gatsby-config.js에 robots.txt 설정 추가

module.exports = {
  siteMetadata: {
    siteUrl: "https://example.com",
  },
  plugins: [
    {
      resolve: "gatsby-plugin-robots-txt",
      options: {
        policy: [{ userAgent: "*", allow: "/" }],
        sitemap: "https://example.com/sitemap.xml",
      },
    },
  ],
};

🚀 이제 https://example.com/robots.txt에서 Sitemap이 포함된 설정을 확인할 수 있습니다.

---

7. Sitemap을 Bing, Yandex에도 제출하기

Google뿐만 아니라 Bing, Yandex 등의 검색 엔진에도 Sitemap을 제출하면 트래픽을 증가시킬 수 있습니다.

✅ Bing Webmaster Tools에서 Sitemap 제출하기

1. Bing Webmaster Tools 접속
2. 사이트 추가 > https://yourdomain.com 입력
3. "Sitemap" 메뉴에서 https://yourdomain.com/sitemap.xml 제출

✅ Yandex Webmaster Tools에서 Sitemap 제출하기

1. Yandex Webmaster 접속
2. 사이트 등록 후 Sitemap 제출

🚀 이제 여러 검색 엔진이 사이트를 빠르게 크롤링할 수 있습니다!

---

8. 추가 SEO 최적화 (Lastmod & Priority 설정)

사이트맵의 품질을 높이려면 Lastmod(최종 수정 날짜)와 Priority(페이지 우선순위)를 추가할 수 있습니다.

📌 gatsby-config.js에서 Sitemap 개선

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-sitemap`,
      options: {
        serialize: ({ site, allSitePage }) => {
          return allSitePage.nodes.map(node => ({
            url: `${site.siteMetadata.siteUrl}${node.path}`,
            lastmod: new Date().toISOString(),
            priority: node.path === "/" ? 1.0 : 0.8,
          }));
        },
      },
    },
  ],
};

✅ 설명

• lastmod → 페이지가 마지막으로 수정된 날짜를 추가하여 검색 엔진이 최신 상태를 유지하도록 함
• priority → 홈("/") 페이지는 1.0(최고 우선순위), 나머지는 0.8로 설정

🚀 이제 Sitemap이 SEO 친화적으로 최적화되었습니다!

---

9. 결론

이번 글에서는 GatsbyJS에서 자동으로 Sitemap을 생성하고 SEO를 강화하는 방법을 배웠습니다.
✔ gatsby-plugin-sitemap을 활용하여 자동으로 Sitemap 생성
✔ Google Search Console에 Sitemap을 제출하여 검색 엔진 최적화
✔ robots.txt에 Sitemap 경로 추가하여 크롤링 속도 향상
✔ Bing, Yandex 등 다양한 검색 엔진에도 등록하여 SEO 강화
✔ Lastmod(최종 수정 날짜)와 Priority(우선순위) 설정하여 검색 품질 향상

🚀 다음 글에서는 GatsbyJS에서 Open Graph 및 Twitter Card를 설정하여 SNS 미리보기를 최적화하는 방법을 다루겠습니다!

---

 

💡 Did you know?
Google은 사이트맵을 분석하여 검색 결과 순위를 결정하는 데 중요한 역할을 합니다. 사이트맵 최적화는 필수! 🚀