안동민 개발노트 아이콘

안동민 개발노트

13장 : SEO 및 메타데이터

robots.txt 및 sitemap.xml 설정

SEO를 최적화할 때 robots.txt와 sitemap.xml은 검색 엔진 크롤러에 주는 핵심 지침입니다.

이 두 파일은 웹사이트 노출성뿐 아니라, 검색 엔진이 사이트 구조를 효율적으로 이해하고 색인하는 데 큰 영향을 줍니다.

Next.js는 이 파일을 효과적으로 관리할 수 있는 방법을 제공해 SEO 친화적인 애플리케이션 구축을 돕습니다.

이 절에서는 robots.txt와 sitemap.xml의 역할과 중요성, Next.js App Router에서 이 파일들을 설정하는 방법, 그리고 SEO를 위한 최적화 전략에 대해 상세히 알아보겠습니다.

robots.txt

robots.txt 파일은 웹사이트의 루트 디렉토리에 위치하는 텍스트 파일입니다. 이 파일은 검색 엔진 크롤러(웹 로봇)에게 웹사이트 내에서 어떤 URL에 접근할 수 있고 없는지를 알려주는 역할을 합니다. 이는 특정 페이지나 섹션이 검색 결과에 노출되는 것을 방지하거나, 불필요한 크롤링으로 인한 서버 부하를 줄이는 데 사용됩니다.

주요 목적
  • 크롤링 제어: 검색 엔진이 접근하지 못하도록 특정 디렉토리나 파일을 차단합니다.
  • 서버 부하 감소: 불필요한 페이지에 대한 크롤링 요청을 줄여 서버 리소스 낭비를 방지합니다.
  • 공개하고 싶지 않은 콘텐츠 보호: 관리자 페이지, 개인 정보가 포함된 페이지 등 검색 결과에 노출되어서는 안 되는 페이지를 차단합니다.

주의사항: robots.txt는 보안 메커니즘이 아닙니다. 이 파일은 단순히 크롤러에게 "이곳은 가지 말아달라"고 요청하는 것이며, 악의적인 봇이나 직접 URL을 입력하는 사용자를 막을 수는 없습니다. 민감한 정보는 서버 측 인증이나 다른 보안 조치로 보호해야 합니다.

robots.txt 파일 구조

robots.txt는 User-agent와 Disallow, Allow, Sitemap 지시어로 구성됩니다.

  • User-agent: 특정 검색 엔진 봇을 지정합니다. *는 모든 봇을 의미합니다.
    • 예시: User-agent: * (모든 봇), User-agent: Googlebot (구글 봇), User-agent: bingbot (빙 봇)
  • Disallow: 지정된 봇이 접근하지 못하도록 할 경로를 지정합니다.
    • 예시: Disallow: /admin/ (admin 디렉토리 전체), Disallow: /private-page.html (특정 파일)
  • Allow: Disallow 규칙 내에서 특정 서브 경로를 허용할 때 사용합니다.
    • 예시: Disallow: /private/ Allow: /private/public-page.html
  • Sitemap: 사이트맵 파일의 위치를 지정합니다. 이 지시어는 크롤러가 사이트맵을 쉽게 찾을 수 있도록 돕습니다.

App Router에서 robots.txt 설정

Next.js App Router에서는 public 디렉토리에 robots.txt 파일을 직접 생성하거나, app 디렉토리 내에 동적으로 생성하는 두 가지 방법이 있습니다.

public 디렉토리에 정적 파일 생성 (권장): 가장 간단하고 일반적인 방법입니다. 프로젝트의 public 디렉토리(루트)에 robots.txt 파일을 생성하고 내용을 작성합니다.

app
next.config.js
public/robots.txt 예시
# 모든 User-agent에 대해
User-agent: *
# /admin/ 경로는 접근 금지
Disallow: /admin/
# /private/ 경로는 접근 금지
Disallow: /private/
# 특정 파일 접근 금지
Disallow: /secret-page.html

# Googlebot에 대해 /temp/ 경로는 접근 금지
User-agent: Googlebot
Disallow: /temp/

# 사이트맵 파일의 위치를 명시
Sitemap: https://docs-lab.dev/sitemap.xml
Sitemap: https://docs-lab.dev/sitemap-blog.xml # 여러 개 가능

이 파일은 빌드 시점에 자동으로 웹사이트의 루트 경로(https://docs-lab.dev/robots.txt)에 서비스됩니다.

app/robots.ts 또는 app/robots.js를 사용한 동적 생성: Next.js 13부터 App Router는 app/robots.ts (또는 .js) 파일을 통해 robots.txt를 동적으로 생성할 수 있도록 지원합니다. 이 방법은 환경 변수나 동적 데이터를 기반으로 robots.txt 내용을 변경해야 할 때 유용합니다.

app/robots.ts
import { MetadataRoute } from 'next';

export default function robots(): MetadataRoute.Robots {
  return {
    rules: [
      {
        userAgent: '*', // 모든 봇
        allow: '/',      // 모든 페이지 허용
        disallow: ['/admin/', '/private/'], // 특정 경로 비허용
      },
      {
        userAgent: 'Googlebot', // Googlebot만
        allow: '/',
        disallow: '/temp/',
      },
    ],
    sitemap: 'https://docs-lab.dev/sitemap.xml', // 사이트맵 경로
  };
}

이 방법은 public/robots.txt 파일보다 우선권을 가집니다. 즉, 두 파일이 모두 존재하면 app/robots.ts가 사용됩니다.

sitemap.xml: 검색 엔진을 위한 웹사이트 지도

sitemap.xml 파일은 웹사이트의 중요한 페이지 목록을 검색 엔진에 제공하는 XML 파일입니다.

이 파일은 검색 엔진이 웹사이트의 콘텐츠를 효율적으로 발견하고 크롤링하며 색인하도록 돕습니다.

특히 내부 링크가 적거나 깊이 숨겨진 페이지, 동적으로 생성되는 페이지처럼 검색 엔진이 자체적으로 발견하기 어려운 페이지를 노출하는 데 매우 중요합니다.

주요 목적
  • 크롤링 효율성 증대: 검색 엔진이 웹사이트의 모든 중요한 URL을 빠르고 효율적으로 찾을 수 있도록 합니다.
  • 누락 방지: 내부 링크 구조가 복잡하거나 새로운 페이지가 추가되었을 때, 검색 엔진이 해당 페이지를 놓치지 않도록 보장합니다.
  • 추가 정보 제공: 각 URL에 대한 최종 수정일, 변경 빈도, 상대적 우선순위 등 검색 엔진에게 유용한 추가 정보를 제공할 수 있습니다.

sitemap.xml 파일 구조

sitemap.xml은 <urlset> 루트 요소 아래에 각 URL에 대한 <url> 요소를 포함합니다. 각 <url> 요소는 다음을 포함할 수 있습니다.

  • <loc>: (필수) 페이지의 전체 URL (절대 경로).
  • <lastmod>: (선택) 페이지가 최종 수정된 날짜.
  • <changefreq>: (선택) 페이지의 내용이 변경되는 빈도 (always, hourly, daily, weekly, monthly, yearly, never).
  • <priority>: (선택) 웹사이트 내에서 이 URL의 상대적 중요도 (0.0 ~ 1.0). 기본값은 0.5.

App Router에서 sitemap.xml 설정

Next.js 13부터 App Router는 app/sitemap.ts 또는 .js 파일을 통해 sitemap.xml을 동적으로 생성할 수 있도록 지원합니다.

실습: app/sitemap.ts를 사용한 동적 사이트맵 생성
app/sitemap.ts
import { MetadataRoute } from 'next';

// 가상의 블로그 게시물 데이터
interface Post {
  slug: string;
  updatedAt: string;
}

async function getPosts(): Promise<Post[]> {
  // 실제로는 여기서 DB 또는 API를 호출하여 모든 게시물의 slug와 업데이트 날짜를 가져옵니다.
  // 예시를 위해 더미 데이터를 반환합니다.
  return [
    { slug: 'nextjs-seo-guide', updatedAt: '2024-06-20T10:00:00Z' },
    { slug: 'dynamic-metadata-tutorial', updatedAt: '2024-06-21T15:30:00Z' },
    { slug: 'image-optimization-tips', updatedAt: '2024-06-19T09:00:00Z' },
  ];
}

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const baseUrl = 'https://docs-lab.dev'; // 실제 웹사이트 URL로 변경

  // 1. 정적인 페이지 목록
  const staticRoutes: MetadataRoute.Sitemap = [
    {
      url: baseUrl,
      lastModified: new Date(), // 현재 날짜
      changeFrequency: 'daily', // 매일 변경될 가능성
      priority: 1, // 가장 높은 우선순위
    },
    {
      url: `${baseUrl}/about`,
      lastModified: new Date(),
      changeFrequency: 'monthly',
      priority: 0.8,
    },
    {
      url: `${baseUrl}/contact`,
      lastModified: new Date(),
      changeFrequency: 'yearly',
      priority: 0.7,
    },
    {
        url: `${baseUrl}/blog`, // 블로그 목록 페이지
        lastModified: new Date(),
        changeFrequency: 'weekly',
        priority: 0.9,
    }
  ];

  // 2. 동적 블로그 게시물 목록
  const posts = await getPosts();
  const postRoutes: MetadataRoute.Sitemap = posts.map((post) => ({
    url: `${baseUrl}/blog/${post.slug}`,
    lastModified: new Date(post.updatedAt),
    changeFrequency: 'weekly', // 블로그 게시물은 보통 weekly 또는 monthly
    priority: 0.6,
  }));

  // 3. 모든 URL 목록을 반환
  return [...staticRoutes, ...postRoutes];
}

이 파일을 생성하면 Next.js는 빌드 시점에 이 함수를 실행하여 https://docs-lab.dev/sitemap.xml 경로로 접근할 수 있는 sitemap.xml 파일을 생성합니다.

SEO를 위한 최적화 전략

robots.txt 및 sitemap.xml 설정에서 라우팅, 렌더링 경계, 배포 기준을 정리한 것입니다.

  • robots.txt와 sitemap.xml은 함께 사용: robots.txt는 Disallow 규칙을 통해 크롤링을 제어하고, sitemap.xml은 크롤링을 원하는 모든 페이지를 명시하여 검색 엔진이 놓치는 페이지가 없도록 돕습니다. 두 파일은 상호 보완적입니다.
  • robots.txt의 Sitemap 지시어 포함: robots.txt 파일 내에 Sitemap: 지시어를 사용하여 사이트맵 파일의 전체 URL을 명시하는 것이 중요합니다. 이는 검색 엔진이 사이트맵을 쉽게 발견하도록 돕습니다.
  • Google Search Console에 등록: 웹사이트를 Google Search Console에 등록하고, robots.txt와 sitemap.xml 파일을 제출합니다. 이를 통해 구글이 웹사이트를 더 효율적으로 크롤링하고 인덱싱하도록 유도할 수 있습니다.
  • 불필요한 페이지 차단: 로그인/회원가입 페이지, 관리자 페이지, 검색 결과가 없는 페이지, 중복 콘텐츠가 있는 페이지 등은 robots.txt로 차단하여 불필요한 크롤링과 인덱싱을 방지합니다.
  • 정확한 lastmod, changefreq, priority 설정: sitemap.xml의 이 속성들을 정확하게 설정하면 검색 엔진이 페이지의 중요도와 업데이트 빈도를 파악하여 크롤링 우선순위를 조정하는 데 도움을 줄 수 있습니다.
  • 동적 콘텐츠 관리: 블로그, 상품 목록 등 동적으로 생성되는 콘텐츠가 많다면 generateStaticParams와 sitemap.ts를 함께 사용하여 모든 동적 URL이 사이트맵에 포함되도록 해야 합니다.
  • robots.txt 변경 시 주의: robots.txt를 잘못 설정하면 웹사이트 전체가 검색 엔진에서 제외될 수 있습니다. 변경 후에는 Google Search Console의 robots.txt 테스터를 사용하여 오류를 확인해야 합니다.
  • 파일 크기 제한: sitemap.xml 파일은 최대 50,000개의 URL 또는 50MB 크기로 제한됩니다. 이보다 큰 웹사이트의 경우 여러 개의 사이트맵 파일로 분할하고, sitemap index file을 사용하여 관리해야 합니다.

다음 다이어그램은 배포 전 robots.txt와 sitemap.xml을 함께 점검하는 흐름입니다.

다음 다이어그램은 sitemap에 포함할 URL과 robots에서 차단할 URL을 서로 충돌하지 않게 나누는 기준입니다.

다음 다이어그램은 운영 중 robots.txt와 sitemap.xml을 변경할 때 확인할 신호를 정리한 것입니다.

아래 다이어그램은 robots.txt와 sitemap.xml을 배포 전후에 함께 점검해 크롤링 허용 범위와 색인 대상이 충돌하지 않게 관리하는 기준입니다.

아래 다이어그램은 robots.txt의 접근 규칙과 sitemap.xml의 URL 목록이 SEO 흐름에서 맡는 역할을 비교합니다.

robots.txt와 sitemap.xml은 웹사이트의 기술적 SEO 기반을 다지는 데 매우 중요한 요소입니다. Next.js App Router의 내장 기능을 활용하면 이 두 파일을 효율적으로 관리하여 검색 엔진 가시성을 극대화하고 더 나은 검색 결과를 얻을 수 있습니다.

아래 다이어그램은 robots.txt 및 sitemap.xml 설정을 검색 노출, 공유 미리보기, 크롤러 신호 기준으로 점검합니다.

Open Graph 태그 활용

Previous Page

단위 테스트 설정

Next Page

On this page

robots.txtrobots.txt 파일 구조App Router에서 robots.txt 설정sitemap.xml: 검색 엔진을 위한 웹사이트 지도sitemap.xml 파일 구조App Router에서 sitemap.xml 설정SEO를 위한 최적화 전략