turin.blog
← 목록으로

Next.js에서 sitemap.xml과 robots.txt를 직접 만들어본 이유

·2분 읽기

블로그를 만들고 배포까지 끝내면 검색 엔진이 알아서 잘 가져갈 것 같지만, 실제로는 사이트 구조를 알려주는 파일을 준비해두는 것이 좋습니다. 대표적인 파일이 sitemap.xml과 robots.txt입니다.

처음에는 이 두 파일이 그냥 SEO를 위한 부가 설정 정도라고 생각했습니다. 그런데 네이버 서치어드바이저나 구글 서치 콘솔에 사이트를 등록하다 보면 사이트맵 제출 단계가 거의 필수처럼 등장합니다.

sitemap.xml이 하는 일

sitemap.xml은 검색 엔진에게 “내 사이트에는 이런 페이지들이 있다”라고 알려주는 지도 같은 파일입니다.

블로그라면 보통 다음 URL들이 들어갑니다.

  • 메인 페이지
  • 글 상세 페이지
  • 카테고리 페이지가 있다면 카테고리 페이지
  • 태그 페이지가 있다면 태그 페이지

검색 엔진이 모든 링크를 직접 따라가며 찾을 수도 있지만, 사이트맵을 제출하면 수집할 페이지 목록을 더 명확하게 전달할 수 있습니다.

Next.js App Router에서 sitemap 만들기

Next.js App Router에서는 app/sitemap.ts 파일을 만들 수 있습니다.

import type { MetadataRoute } from "next";

export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://blog.example.com",
      lastModified: new Date(),
      changeFrequency: "daily",
      priority: 1,
    },
  ];
}

글 목록을 파일이나 데이터베이스에서 가져오는 구조라면 map을 사용해서 글 URL을 추가하면 됩니다.

const posts = getPosts();

return posts.map((post) => ({
  url: `https://blog.example.com/posts/${post.slug}`,
  lastModified: post.updatedAt,
  changeFrequency: "weekly",
  priority: 0.8,
}));

robots.txt가 하는 일

robots.txt는 검색 로봇에게 어떤 경로를 수집해도 되는지 알려주는 파일입니다.

예를 들어 관리자 페이지는 검색 결과에 나오면 안 됩니다.

User-agent: *
Allow: /
Disallow: /admin

Sitemap: https://blog.example.com/sitemap.xml

블로그처럼 공개 글이 중요한 사이트에서는 기본적으로 Allow: /를 두고, 숨겨야 하는 경로만 Disallow로 막는 방식이 편합니다.

Next.js에서 robots.txt 만들기

App Router에서는 app/robots.ts를 사용할 수 있습니다.

import type { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: "/admin",
    },
    sitemap: "https://blog.example.com/sitemap.xml",
  };
}

배포 후에는 브라우저에서 직접 확인합니다.

https://내도메인/sitemap.xml
https://내도메인/robots.txt

마무리

sitemap.xml과 robots.txt는 엄청 복잡한 기능은 아니지만, 블로그를 검색 엔진에 제대로 알리는 기본 설정입니다.

특히 개인 기술블로그를 운영한다면 글을 잘 쓰는 것만큼이나 검색 엔진이 글을 찾을 수 있게 만드는 것도 중요합니다. 배포 후에 이 두 파일을 확인하는 습관을 들이면 SEO 설정에서 놓치는 부분을 줄일 수 있습니다.