[Next JS] 개인 사이트에 Sitemap 만들기

0. 사이트맵(Sitemap)이란?

사이트맵은 site + map 단어의 조합으로 깊게 해석할 필요 없이, 웹사이트 지도라고 생각해볼 수 있다. 구글 검색 센터에 따르면, '사이트에 있는 페이지, 동영상 및 기타 파일과 그 관계에 관한 정보를 제공하는 파일'이라고 한다. 

 

* 사이트맵 파일이 필요한 이유?

한 마디로 말하자면, SEO 최적화를 위함이다. 구글 및 네이버 같은 플랫폼들의 검색 엔진 크롤러가 웹사이트의 정보를 긁어 모을 때 아주 효율적으로 정보를 제공할 수 있도록 돕는다. 물론 이 파일이 없다고 검색 엔진에 노출되지 않지는 않지만, 최적화라는 말의 장점을 이뤄줄 수 있는 파일이라고 하겠다.

 

그렇기에 Sitemap.xml 파일은 검색 엔진이 웹 사이트를 크롤링할 때 사용하는 파일로, 사이트의 페이지 구조와 업데이트 된 내용을 검색 엔진에 알려준다는 것을 생각하면서, 본인은 Next.js로 개발된 웹 사이트에서도 sitemap.xml 파일을 생성하여 SEO를 향상시키려고 하기에, 이번 글에서는 Next.js 웹사이트에서 sitemap.xml 파일을 만드는 방법을 적어보려고 한다.

 

1.  사이트맵 파일 만들기

sitemap.xml을 만드는 방법은 2가지가 있다. 첫번째는 그냥 .xml 파일을 직접 만드는 방법, 두번째는 코드로 동적으로 만드는 방법이 있는데, 각자 장단점은 있다.

1-1) 정적으로 만들기

// app/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

 

먼저, 위의 태그들을 살펴본다.

 

<url>: 각 페이지의 정보를 포함하는 요소이다. 하나의 <url> 요소는 한 웹페이지를 나타낸다.

<loc>: 페이지의 URL을 나타내는 요소이다. 이 요소의 내용은 해당 페이지의 URL이다.

<lastmod>: 페이지의 마지막 수정일을 나타내는 요소이다. 일반적으로 ISO 형식(날짜 및 시간)으로 표시된다.

<changefreq>: 페이지의 변경 빈도를 나타내는 요소이다. 가능한 값으로는 "always", "hourly", "daily", "weekly", "monthly", "yearly", "never" 등이 있다.

<priority>: 페이지의 우선순위를 나타내는 요소이다. 값은 0에서 1 사이의 실수이며, 1에 가까울수록 페이지가 중요함을 나타낸다.

 

정적으로 만든 sitemap.xml 파일은 코드를 사용하지 않으니 만들기는 쉽긴 하지만, 관리를 아주 빡세게 해주어야 하는 단점이 있다. 예를 들어, 블로그 형식의 웹사이트는 글을 쓸 때마다 페이지가 추가되니 이를 고려하여 주기적으로 자주 관리해서 직접 편집하는 것이 쉽지 않다.

 

2-2. 코드를 이용해서 동적으로 sitemap.xml 만들기

// app/sitemap.js

export default async function sitemap() {
  const posts = await fetch('https://mywebsite.com/api/getPosts', {
  		headers:{
        	'Content-type':'appliction/json'
    });

  return [
    {
      url: 'https://mywebsite.com',
      lastModified: new Date(),
      priority: 1,
    },
    ...posts.map((post) => ({
      url: `https://mywebsite.com/post/${post.id}`,
      lastModified: new Date(),
    })),
  ];
}

 

이 코드와 함께 동적으로 관리해주면 배포할 때에 자동으로 코드를 실행시키면서 xml 파일을 생성해준다. 확인하는 방법은 https://웹사이트도메인/sitemap.xml을 주소창에 입력해주면 sitemap이 나오니 잘 생성되어 함께 배포되어 등록되었는지 확인해보도록 하자.

 

참고 : https://nextjs.org/docs/app/api-reference/file-conventions/metadata/sitemap

Metadata Files: sitemap.xml | Next.js