Nextjs[SEO] - Serverside Sitemap xml 생성 자동화

지난 시간엔 serverside를 통해서 정적인 xml로 sitemap을 생성하는 과정을 나타냈어요!

 

오늘은 동적인 xml을 생성하여 페이지에 들어올 때, 항상 최신 sitemap이 생성되도록 만드는 과정을 해보도록 할게요!

 

sitemap에 대해 지난 시간보다 좀 더 알아본 후에 진행하려합니다.

 

sitemap xml 태그 방법

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
	<url>
        <loc>https://exam-bomb-service.vercel.app/</loc>
	</url>
</urlset>

<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    <sitemap>
        <loc>https://zippoom.com/sitemap/sub/index.xml</loc>
        <lastmod>2023-03-17T09:00:23.523Z</lastmod>
    </sitemap>
</sitemapindex>

위의 첫번째 케이스는 urlset 태그로 url 자체를 알려주는 방식과, 두번째 케이스처럼 <sitemap> 태그를 통해 해당 xml에 또다른 sitemap이 존재함을 알려주는 방식이 있어요!

 

두가지 방법 중에 저는 첫번째 방법을 통해 구분하지않고 모두 하나의 xml파일에 넣을 예정입니다!

 

sitemap url xml 태그 종류

태그 종류는 하단 sitemap reference에서 참조했어요.

 

필수로 존재해야하는 태그

1. <urlset> : 파일을 캡슐화하고 현재 프로토콜 표준을 참조

2. <url> : 각 URL 항목의 상위 태그, 나머지 태그는 이 태그의 하위

3. <loc> : 페이지의 URL, 이 URL은 프로토콜(예: http)로 시작하고 웹 서버에서 요구하는 경우 후행 슬래시로 끝나야 합니다. 이 값은 2,048자 미만이어야 합니다.

Optional 태그

4. <lastmod> : 마지막 수정일자

5. <changefreq> : 얼마나 자주 수정하는지

6. <priority> : 사이트내 url의 우선순위 설정

 

하지만 저는..  optional 태그들은 모두 사용하지 않고, 필수로 존재해야하는 태그만 구현하기로 했답니다!

(악용사례가 있어서 필요성이 없다는...?ㅎㅎ)

반응형

Serverside sitemap xml 생성

먼저 하단의 저의 페이지는 /question/test/[questionId] url로 접근할 수 있어요.

하지만 문제수가 많기때문에 모든 페이지를 sitemap을 통해 색인할 수 있도록 도와주려고 작업을 진행했습니다.

 

import prisma from '@/backend/lib/prisma';
import { GetServerSideProps, GetServerSidePropsContext } from 'next';

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


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

export const getServerSideProps: GetServerSideProps = async (
  ctx: GetServerSidePropsContext,
) => {
  // Question 데이터 db 조회
  const questions = await prisma.question.findMany({
    select: { questionId: true },
  });
  // Question 데이터 url로 변경
  const questionUrls = questions.map(
    ({ questionId }) =>
      `https://exam-bomb-service.vercel.app/question/test/${questionId}`,
  );
  const fields = new SitemapBuilder().buildSitemapXml([
    ...sitemapList,
    ...questionUrls,
  ]);
  return withXMLResponse(ctx, fields);
};

export default function Sitemap() {}

 

자, 과연 정상적으로 xml이 생성되었는지 확인해볼까요?

 

정상적으로 xml에 url들이 생성됨을 확인할 수 있어요.

 

이렇게  Serverside를 통해서 실시간으로 등록한 문제도 sitemap에 넣어줄 수 있다는 점에서 자동화했다고 소개를 했습니다.

 

코드 관련은 이전 글인 아래에서 확인해주시면 감사하겠습니다!

https://youngari.tistory.com/entry/NextjsSEO-Sitemapxml-%EC%9E%90%EB%8F%99%ED%99%94-Serverside-Sitemap

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

 

모든 질문과 조언은 저에게 도움이 되니 환영이에요!!

 

[reference] 

https://www.sitemaps.org/protocol.html