Nextjs[SEO] - Sitemap.xml 자동화 / Serverside Sitemap

오늘은 Nextjs에서 Sitemap.xml을 자동화할 수 있는 방법에 대해 알아보려해요!

 

일단 Sitemap의 역할이 무엇인지 알아야지 왜 Sitemap을 만들어야하는지 알겠죠?

 

Sitemap이란?

https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?hl=ko 

사이트맵이란 무엇인가요? | Google 검색 센터  |  문서  |  Google for Developers

구글 검색 센터에서 제공하는 사이트맵에 대한 정보에요.

그 중에 몇가지만 정리해보자면 다음과 같습니다.

1. 사이트 페이지가 제대로 링크되었다면 대개 Google에서 대부분의 사이트를 찾을 수 있습니다. 올바른 연결이란 사이트의 메뉴나 페이지에 배치한 링크와 같이 일부 탐색 형식을 통해 중요하다고 생각하는 모든 페이지에 도달할 수 있다는 것을 의미합니다. 그렇다 하더라도 사이트맵을 사용하면 크고 복잡한 사이트나 전문화된 파일의 크롤링을 개선할 수 있습니다.
2. 일반적으로 사이트 규모가 클수록 모든 페이지가 사이트에 있는 하나 이상의 다른 페이지에 연결되어 있는지 확인하기가 어렵습니다. 따라서 Googlebot이 새로운 페이지 중 일부를 발견하지 못할 가능성이 높습니다.
3. Googlebot 및 기타 웹 크롤러는 한 페이지에서 다른 페이지로 연결되는 링크를 따라 이동하여 웹을 크롤링합니다. 따라서 다른 사이트가 페이지에 링크되어 있지 않으면 Googlebot이 페이지를 찾지 못할 수도 있습니다.

즉, 사이트의 개수가 많다면 Googlebot이 제대로 찾을 수 없는 경우가 생기기때문에 사이트맵에 명시를 해주어 쉽게 찾을수 있도록 만들어주는거죠!

 

 

Sitemap Builder 구현

저는 이 사이트맵을 만드는 방법으로 next-sitemap library의 github를 참고하여 직접 구현해쓰려해요.

 

import { GetServerSidePropsContext } from 'next';

export class SitemapBuilder {
  // XML의 템플릿을 만드는 함수
  withXMLTemplate(content: string): string {
    return `<?xml version="1.0" encoding="UTF-8"?>\n<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n${content}</urlset>`;
  }
  // sitemapIndex로 만들어주는 함수
  buildSitemapIndexXml(allSitemaps: string[]) {
    return [
      '<?xml version="1.0" encoding="UTF-8"?>',
      '<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">',
      ...(allSitemaps?.map((x) => `<sitemap><loc>${x}</loc></sitemap>`) ?? []),
      '</sitemapindex>',
    ].join('\n');
  }
  // url sitemap을 만들어주는 함수
  buildSitemapXml(fields: string[]): string {
    const content = fields
      .map((url) => `<url><loc>${url}</loc></url>\n`)
      .join('');
    return this.withXMLTemplate(content);
  }
}

// nextjs serverside에서 xml로 response를 내려주는 함수
export const withXMLResponse = (
  ctx: GetServerSidePropsContext,
  content: string,
) => {
  if (ctx?.res) {
    const { res } = ctx;
    res.setHeader('Content-Type', 'text/xml');
    res.write(content);
    res.end();
  }
  return {
    props: {},
  };
};

 

먼저 위와 같은 SitemapBuilder 클래스와 withXMLResponse 함수를 먼저 만들어주세요!

 

./pages/sitemap/index.xml.tsx

import { SitemapBuilder, withXMLResponse } from '@/utils/class/sitemap';
import { GetServerSideProps, GetServerSidePropsContext } from 'next';

const sitemapList = [
  'https://exam-bomb-service.vercel.app/',
  'https://exam-bomb-service.vercel.app/start',
  'https://exam-bomb-service.vercel.app/chapter',
  'https://exam-bomb-service.vercel.app/user',
];

export const getServerSideProps: GetServerSideProps = async (
  ctx: GetServerSidePropsContext,
) => {
  const fields = new SitemapBuilder().buildSitemapXml(sitemapList);
  return withXMLResponse(ctx, fields);
};

export default function Sitemap() {}

그리고 다음과 같이 pages에서 serverside에서 제출하고자하는 sitemap url 리스트를 위와 같이 작성한 다음에 /sitemap/index.xml 에 들어가보시면 정상적으로 출력됨을 확인할 수 있어요.

 

위와 같은 내용은 sitemap의 url을 만들어주는 부분을 진행했지만, 다음엔 제목에 맞는 자동화 부분으로 sitemapIndex를 생성한 후에 DynamicRoute의 사이트맵을 자동화해보도록 할께요!

 

next-sitemap 라이브러리 소개

위의 SitemapBuillder를 만들게 한 라이브러리를 소개합니다!

Reference

-  https://github.com/iamvishnusankar/next-sitemap

GitHub - iamvishnusankar/next-sitemap: Sitemap generator for next.js. Generate sitemap(s) and robots.txt for all static/pre-rend