icon
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://yourwebsite.com/sitemap.xml
Sitemap: https://yourwebsite.com/sitemap-blog.xml # 여러 개 가능

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

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

app/robots.ts
// 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://yourwebsite.com/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
// 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://yourwebsite.com'; // 실제 웹사이트 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://yourwebsite.com/sitemap.xml 경로로 접근할 수 있는 sitemap.xml 파일을 생성합니다.

SEO를 위한 최적화 전략

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

Open Graph 태그 활용

Previous Page

단위 테스트 설정

Next Page