Gatsby-plugin-sitemap으로 동적 sitemap 생성하기 + robots.txt 작성하기
목차 펼치기
머리말
머리말
크롤러에게 내 사이트에 어떤 페이지들이 있는 지 알려주고, 크롤링을 허용해주기 위해서는 sitemap과 robots.txt 설정이 필수적이다. 배포 시 노션의 데이터를 토대로 동적으로 게시글들에 대한 sitemap이 생성되도록 하기 위한 작업이며, 여러 삽질 끝에 적용되었다.
Sitemap 생성
Sitemap 생성
Plugin Install
Plugin Install
주로 사용하는 플러그인을 찾아보니,
gatsby-plugin-sitemap
과
gatsby-plugin-advanced-sitemap
두 개가 존재했다. npm trends로 찾아보니
gatsby-plugin-sitemap
을 약 7배 정도 더 많이 사용하고 있었다.
적용을 위해 삽질을 하다보니 의도치 않게 두 개를 다 사용해보게 되었고, 나는
gatsby-plugin-sitemap
을 통해 최종 구현하였다.
yarn을 통해 플러그인 설치해주면 된다.
Plugin Config
Plugin Config
설치한 다음
gatsby-config.ts
파일에 설정을 해주면 끝인데, 가장 기본적인 설정을 사용하려면 이렇게 플러그인만 추가해주면 된다.
이후 build하면
sitemap-index.xml
파일과
sitemap-[index].xml
파일이 생성된다. 1개의 sitemap 파일에는 최대 45,000개의 URL만 표시가 가능하기 때문이다.
sitemap-index.xml
파일 안을 보면 이렇게 처리되어있다.
추후 Google Console에 Sitemap을 제출하거나
robots.txt
를 설정하거나 할 때는
sitemap-index.xml
을 제출하면 된다.
Custom Setting
Custom Setting
이렇게만 설정해놓고 빌드를하면 게시글에 대한 sitemap이 동적으로 처리되지 않는다. 공식 문서를 참조해도 설정이 어려웠는데, 구글링을 통해 Joseph Norton이라는 분이 작성한 글에서 또 많은 도움을 얻었다. 상세한 설명과 예시를 통해 공식 문서의 부족한 부분을 이해하고, 해당 예시를 내게 맞게 바꾸기 위해 또 공식 문서의 도움을 받았다. Thank you, Joseph !
최종적으로 적용한 코드는 위와 같다.
query
이 파라미터를 통해 노션의 정보를 가져오는데, 내 URL이 담긴
title
파라미터를 가지고 왔다. 다른 세부 파라미터에 URL을 지정했다면 코드가 더 복잡해졌을텐데, 노션 DB에서
title
컬럼을 URL로 사용한 덕분에 설정 및 개발적으로 유리했다.
resolveSiteUrl
별도의
query
로 데이터를 가져오기 때문에,
site.siteMetadata.siteUrl
을 사용할 게 아니면
resolveSiteUrl
함수를 사용하라고 한다. 기본이 될 내 사이트의 도메인을 반환하는 함수를 설정해주면된다.
resolvePages
query
의 결과를 받아 페이지 객체 배열을 반환하는 설정이다. 이를 통해 노션의 페이지를 동적으로 Sitemap에 설정할 수 있다.
allNotion
이라는 이름으로 받아온
query
의 결과 데이터를 정제하여 반환해주는데, 가장 중요한 건
path 라는 속성은 필수로 존재해야한다.이 부분에서 삽질을 오래했다. 맞게 설정해준 것 같은데, build를 하면 자꾸 에러가 발생했다.
공식문서와 다른 적용기를 참고해서 수정을 거듭하며 십수번의 build 실패에 멘탈이 미궁에 빠졌을 즈음,
node_modules
에서 이 플러그인의 코드를 뜯어보기 시작했다. 찬찬히 코드와 공식문서를 비교하다보니
path
의 존 재가 의뭉스레 다가왔고, 이를 따로 지정해주니 성공적으로 build가 되었다.
다 해결하고보니 공식문서에서 눈에 보이는 게 있다.
filterPages
속성의 설명 중
page
의 description으로 “contains the path key
{ path }
" 라는 내용이 있다.
공식문서에도 답이 있다는 걸 알았지만 윗 단에서 조금 더 설명을 해주었다면 좋았을텐데 라는 억울한 생각을 조금 했다.
serializer
sitemap 생성에 사용될 항목을 반환하는 함수로,
url
,
changefreq
,
priority
를 가진 객체를 반환해주면 된다. url은 기본 도메인에 대한 상대경로를 입력하면 된다.
resolveSiteUrl
에서 설정한 값과 결합하여 sitemap 항목이 생성된다.
changefreq
는 크롤러에게 얼마나 자주 갱신될 건지를 알려주는 정보인데, 실제 크롤러가 이 설정대로 행동하지는 않는다.
priority
는 해당 사이트에서 이 페이지의 우선순위인데 높다고 하여 크롤링에 영향을 미치진 않는다.
robots.txt 설정
robots.txt 설정
모든 페이지에 대한 크롤링을 허용해주고,
robots.txt
에 색인 파일에 대한 링크를 설정해준다. 이제 앞으로 크롤링 봇은
sitemap-index.xml
을 바라보게 된다.
Sitemap 크롤링에 대하여
Sitemap 크롤링에 대하여
Sitemap을 왜 설정해야 하는지, 크롤링에 어떤 영향을 미치는지, 구글이 제공하는 기본 가이드라인은 어떤지에 대해 위 두 링크를 참조했다. 내 사이트를 구축하며 Sitemap을 고려하고 설정해 본 적은 처음이라 깊게 알고 있지는 않았는데 이번 기회를 통해 이런 문서도 다 보고 재미있었다. 동적으로 생성된 sitemap을 봤을 때는 너무 좋았다. 어서 크롤링 봇이 색인을 생성해줘서 구글에 검색하면 내 글이 나왔으면 좋겠다 !