tailwind-nextjs-starter-blog 에서 sitemap 수정하고 검색엔진에 제출하기

sitemap 수정하기

sitemap(사이트맵)이란?

사이트맵(sitemap)이란 사이트에 있는 페이지 및 기타 파일들에 관한 정보를 제공하는 파일이다. 단어 그대로 사이트(site)의 지도(map)이라고 생각해도 좋다.

내 블로그 사이트맵을 보면 각각의 <url> 마다 페이지 주소를 담고 있는 <loc>를 가지고 있고 <lastmod>를 가지고 있는 url도 있다. 이 외에도 <changefreq>, <priority> 등이 있지만 크롤러의 수집 빈도나 우선순위에 영향은 따로 없는 것으로 알고 있다.

사이트맵 만들기

사이트맵은 단순히 위 이미지와 같은 형태를 띄도록 xml 파일을 만들어주면 된다.¹ 이 말은 sitemap.xml 이라는 파일을 만들어 일일이 텍스트로 입력해주어도 된다는 얘기다. 그리고 파일명 자체도 꼭 sitemap일 필요도 없는 것 같다.

하지만 직접 만든다면 포스팅을 할 때마다 같이 업데이트를 해주어야 하고, 개수가 많으면 실수로 오타가 입력될 수도 있으니 추천하지 않는다.

사이트맵 만들기라고 인터넷에 검색해보면 사이트들이 나오는데 이를 통해서 파일을 다운받아서 외부에서 접속 가능한 public 경로에 넣어줘도 되고 티스토리 같은 사이트에서 블로그를 이용한다면 자체적으로 사이트맵을 생성하는 기능이 제공되는 것으로 알고 있다.

나는 처음 블로그를 시작하면서 템플릿이 아닌 자체 개발을 하다가 sitemap 도 배포시 자동 생성되도록 스크립트 파일을 만들었는데, 지금 이용하는 tailwind-nextjs-starter-blog 스타터 템플릿에서는 이미 해당 기능을 하는 스크립트 파일(generate-sitemap.js)이 있어서 편하게 사용 중이다.

tailwind-nextjs-starter-blog 에서 sitemap 수정하기

generate-sitemap.js 파일에서 sitemap 의 <url>...</url> 부분을 보면 아래와 같이 <loc></loc> 정보만을 담고 있다. 나는 포스팅 파일에는 lastmod를 추가하고 싶었다.

<url>
    <loc>
        ${siteMetadata.siteUrl}${route}
    </loc>
</url>

위 이미지의 노란색 박스 부분이 lastmod를 추가한 부분이다. fm은 frontmatter인데 각각의 포스팅 파일(md/mdx)의 정보, 소개 정도로만 알아두어도 무방할 것 같다.

tailwind-nextjs-starter-blog 에서는 아래 field를 사용할 수 있다고 한다.

title (required)
date (required)
tags (required, can be empty array)
lastmod (optional)
draft (optional)
summary (optional)
images (optional, if none provided defaults to socialBanner in siteMetadata config)
authors (optional list which should correspond to the file names in `data/authors`. Uses `default` if none is specified)
layout (optional list which should correspond to the file names in `data/layouts`)
canonicalUrl (optional, canonical url for the post for SEO)

다시 코드로 돌아가보면 fm(frontmatter)이 있는 page가 md/mdx 파일이었고 단순히 lastmod 값이 있으면 lastmod 값을, lastmod 값이 없으면 date 값을, date 값도 없다면 default 로 '2022-06-01' (임의 블로그 시작 날짜) 가 입력 되도록 했다.² lastmod 외에도 이와 같은 방식으로 추가 데이터를 입력하면 된다.

분할

sitemap 은 용량이 최대 50MB 로 사이트가 커지면 불필요한 정보를 담지 않도록 하거나 분할을 한다고 한다. 내 블로그도 아직은 규모가 크지 않지만 tags 에서 생성되는 url 이 너무 많은 것 같아서 분할을 고민중이다.

sitemap.xml 제출하기

네이버나 구글에 개인 웹사이트 사이트맵을 제출하기 위해서는 우선 사이트 소유확인을 통한 등록 작업이 필요한데, 이 부분은 생략하고 오늘은 사이트맵 제출만을 보도록 하자.

참고로 사이트맵에 외부에서 접근이 불가능하다면 제출할 수 없다. 간단히 확인하기 위해서는 https://cheesepaninim.vercel.app/sitemap.xml 과 같이 본인의 사이트맵 주소를 브라우저의 URL 입력창에 넣어서 보이는지 확인하면 된다.

Naver에 사이트맵 제출하기

네이버 서치어드바이저에 접속해서 사이트맵을 제출할 사이트를 클릭한다. 그 다음으로 사이트 관리탭에서 요청 > 사이트맵 제출을 클릭한다. 사이트맵 URL 입력이라고 된 부분에 sitemap.xml 을 적고 확인을 누른다. (각자의 사이트에 존재하는 sitemap 이름을 적으면 된다.) 제출은 바로 되지만 수집은 시간이 조금 걸렸던 것으로 기억한다.

Google에 사이트맵 제출하기

구글도 네이버와 같이 간단히 사이트맵 제출이 가능하다.

구글 서치 콘솔에 접속해서 사이트맵을 제출할 사이트를 선택한다. 그 다음으로 좌측 목록에서 색인 > Sitemaps를 클릭한다. 새 사이트맵 추가 부분에 sitemap.xml 을 적고 확인을 누른다.

마무리

처음엔 이런것까지 해야되나 조금 번거롭고 귀찮을 수도 있는데, 한 번만 해두면되는 작업이니 바로바로 해두면 좋은 것 같다. 개인적으로는 tags 관련 url이 너무 많은 것이 보기가 싫어서 조만간 sitemap 분리 작업을 할 예정이다.