Next.js App Router에서 SEO 향상을 위한 robots.txt 및 sitemap.xml 적용하기

LEE GYUHO·2025년 3월 11일

app router next.js robots.txt seo sitemap.xml

Next.js App Router에서 SEO 향상을 위한 robots.txt 및 sitemap.xml 적용하기

SEO(검색 엔진 최적화)는 웹사이트의 검색 노출을 개선하는 중요한 요소입니다. Next.js의 App Router를 사용하여 robots.txt와 sitemap.xml을 설정하는 방법을 소개하고, 이를 통해 검색 엔진 크롤러가 사이트를 효과적으로 탐색하도록 만드는 방법을 설명하겠습니다.

1. robots.txt란?

robots.txt는 웹사이트에 대한 검색 엔진 크롤러의 접근을 제어하는 파일입니다. 특정 페이지나 디렉토리에 대한 크롤러의 접근을 허용하거나 차단하는 역할을 합니다.

import type { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || process.env.NEXT_PUBLIC_HOST;

  return {
    rules: {
      userAgent: '*', // 모든 크롤러 허용
      allow: '/', // 전체 사이트 접근 허용
      disallow: '/private/', // /private/ 경로 크롤러 차단
    },
    sitemap: `${baseUrl}/sitemap.xml`, // 사이트맵 경로 설정
  };
}

코드 설명

userAgent: '*' → 모든 검색 엔진 크롤러에 대한 규칙 적용
allow: '/' → 사이트의 모든 페이지를 크롤러가 접근할 수 있도록 허용
disallow: '/private/' → /private/ 경로는 검색 엔진이 크롤링하지 않도록 차단
sitemap → 사이트맵의 위치를 검색 엔진에 알려줌

이렇게 설정하면 불필요한 페이지 크롤링을 방지하여 검색 결과의 품질을 높이고, 사이트맵을 통해 검색 엔진이 효율적으로 페이지를 탐색하도록 도울 수 있습니다.

2. sitemap.xml이란?

robots.txt가 검색 엔진의 접근을 제어하는 역할을 한다면, sitemap.xml은 검색 엔진이 사이트의 페이지 구조를 쉽게 이해하고, 중요한 페이지를 빠르게 색인할 수 있도록 돕는 파일입니다.

import type { MetadataRoute } from 'next';

export default function sitemap(): MetadataRoute.Sitemap {
  const baseUrl = process.env.NEXT_PUBLIC_BASE_URL || process.env.NEXT_PUBLIC_HOST;

  // Sitemap에 포함할 페이지 목록
  const staticPages = [
    { path: '', priority: 1.0 },
    { path: 'mypage', priority: 0.8 },
    { path: 'freeBoard', priority: 0.8 },
    { path: 'user', priority: 0.8 },
    { path: 'article', priority: 0.7 },
    { path: 'wikilist', priority: 0.7 },
    { path: 'posting', priority: 0.7 },
    { path: 'myAccount', priority: 0.5 },
    { path: 'userEdit', priority: 0.5 },
    { path: 'login', priority: 0.3 },
    { path: 'signup', priority: 0.3 },
  ];

  return staticPages.map(({ path, priority }) => ({
    url: `${baseUrl}/${path}`,
    lastModified: new Date(),
    changeFrequency: 'monthly',
    priority,
  }));
}

코드 설명:

baseUrl을 기준으로 각 페이지의 URL을 생성
staticPages 배열에 사이트의 주요 경로와 검색 우선순위(priority)를 설정
priority 값이 클수록 검색 엔진이 해당 페이지를 더 중요한 페이지로 인식
changeFrequency: 'monthly' → 한 달에 한 번 변경될 가능성이 있음을 검색 엔진에 알림
lastModified: new Date() → 페이지가 언제 마지막으로 수정되었는지 기록하여 검색 엔진이 최신 상태를 유지하도록 도움

이렇게 sitemap.xml을 설정하면, 검색 엔진이 사이트 내 중요한 페이지를 더 효과적으로 색인할 수 있습니다.

3. Next.js에서 자동으로 robots.txt 및 sitemap.xml 제공하기

위에서 작성한 robots.ts와 sitemap.ts 파일을 Next.js App Router의 app/ 디렉토리에 배치하면, Next.js가 자동으로 해당 파일을 생성하고 제공해 줍니다.

📂 파일 경로 예시:

/app
 ├── robots.ts  (자동으로 /robots.txt 경로 제공)
 ├── sitemap.ts (자동으로 /sitemap.xml 경로 제공)

이렇게 하면 별도의 설정 없이 https://yourdomain.com/robots.txt와 https://yourdomain.com/sitemap.xml을 통해 검색 엔진이 해당 파일을 가져갈 수 있습니다.

4. SEO 최적화를 위한 추가 팁

✅ robots.txt와 sitemap.xml이 잘 적용되었는지 확인하는 방법
1. 브라우저에서 https://yourdomain.com/robots.txt 또는 https://yourdomain.com/sitemap.xml로 접근하여 확인
2. Google Search Console에서 사이트맵 제출 및 크롤링 확인

✅ robots.txt 설정 시 주의할 점