Next.js를 위한 사이트맵 생성기 만들기

사이트맵 생성부터 검색엔진 색인 요청까지

이번 글에서는 Volla 브릿지 페이지를 **Vue.js**에서 **Next.js**로 옮기면서 했던 SEO 작업과, Next.js용 동적 사이트맵 생성기를 어떻게 만들었는지 정리합니다.

1. Next.js 폴더 구조에 맞춘 사이트맵 생성 스크립트 작성

Next.js는 pages 디렉터리의 폴더와 파일 이름을 기반으로 URL을 자동 생성합니다. 따라서 pages 안의 폴더·파일 이름을 순회하되 Next.js의 특수 파일(_document.js, _app.js 등)은 제외하고 XML을 생성하는 스크립트를 **globby**를 사용해 작성합니다.

루트에 scripts 폴더를 만들고 sitemap-common.js를 작성합니다.

이 스크립트를 실행하면 다음과 같은 XML 파일이 생성됩니다 (예시).

2. 외부 API용 사이트맵 생성 스크립트 작성

위 예시처럼 정적 페이지의 사이트맵은 비교적 간단합니다. 그러나 동적 페이지(예: userId가 포함된 페이지)의 경우 다른 방식의 스크립트가 필요합니다. 예시에서는 JSONPlaceholder API를 사용했습니다.

sitemap-posts.js를 작성했습니다.

이 스크립트를 실행하면 다음과 같은 XML 파일이 생성됩니다 (예시).

3. 위에서 만든 사이트맵을 모두 gzip으로 압축하는 스크립트

**gzip(.gz)**으로 압축한 사이트맵은 XML 사이트맵과 동일하게 동작하면서 크기가 훨씬 작습니다. **zlib**를 사용해 위에서 만든 모든 XML 파일을 gzip 포맷으로 압축합니다.

이 스크립트는 1, 2단계에서 만든 모든 XML 파일을 .gz로 압축합니다.

4. 위에서 만든 사이트맵 파일들을 위한 사이트맵 인덱스 생성 스크립트

검색엔진(Google Search Console, 네이버 서치 어드바이저 등)에 여러 개의 사이트맵을 제출하려면 사이트맵 인덱스 파일이 필요합니다.

저는 /seller/[_id], /product/[_id], /video/[_id] 같은 동적 URL 패턴별로 사이트맵을 별도로 만들었습니다. Google Search Console 등에 제출할 때는 단일 사이트맵을 제출해야 하므로 다음과 같이 사이트맵 인덱스를 생성하는 스크립트를 작성했습니다.

이 스크립트를 실행하면 다음과 같은 XML 파일이 생성됩니다 (예시).

5. master 배포 시마다 사이트맵을 새로 만드는 bash 스크립트와 GitHub Actions에서 Google Search Console에 핑을 보내는 스크립트

# yarn sitemap
$ cd public
$ rm -rf sitemap
$ mkdir sitemap
$ cd ..
$ cd scripts
$ node ./sitemap-common.js
$ node ./sitemap-posts.js
$ node ./sitemap.js

Google Search Console에서 페이지 재색인을 요청하려면 스크립트 마지막에 다음 한 줄을 추가합니다.

$ curl http://google.com/ping?sitemap=http://website.com/sitemap.xml

XML 사이트맵을 생성하고, gzip으로 압축하고, 사용하지 않는 XML 파일을 자동으로 제거하는 bash 스크립트를 작성했습니다.

이후 master 배포 시마다 위 스크립트가 **GitHub Actions**에서 실행되도록 워크플로 파일을 수정했습니다.

# Create a sitemap and submit it to Google.
- run: yarn sitemap
  name: ping sitemap

마치며

Next.js를 위한 사이트맵 생성에 대한 짧은 튜토리얼이 도움이 되었기를 바랍니다. 연락은 LinkedIn이나 ghsspower@gmail.com으로 부탁드립니다. 감사합니다!