수정: Next.js (App Router)에서 Google Search Console "Couldn't Fetch Sitemap" 오류

Next.js 프로젝트의 Google Search Console에서 “Couldn’t fetch sitemap” 오류가 발생하여 고통받고 있다면, 당신만의 문제는 아닙니다. 이 짜증나는 Google Search Console 사이트맵 오류는 Google이 사이트를 올바르게 색인화하지 못하게 하여 가시성을 손상시킬 수 있습니다. Next.js App Router를 사용하는 많은 개발자들이 Next.js 사이트맵 문제 해결 과제에 직면했는데, 이는 GSC가 브라우저에서 완벽하게 접근 가능한 것처럼 보이더라도 사이트맵을 읽는 데 실패하는 경우입니다.

다행히도 개발자 커뮤니티는 신뢰할 수 있는 해결책을 찾아냈습니다. 이 가이드는 Next.js GitHub 이슈에 공유된 유용한 발견을 바탕으로 “Couldn’t fetch” 오류를 수정하는 정확한 단계를 안내합니다.

사이트맵이 색인화되고 사이트가 다시 정상적으로 작동하도록 합시다. 더 많은 통찰력과 추가 토론을 원한다면 여기 GitHub 이슈의 내 답변도 확인해 보세요.

문제: Google이 사이트맵을 가져올 수 없는 이유는 무엇인가요?

문제의 핵심은 Next.js가 라우팅과 미들웨어를 처리하는 방식과 Google Search Console이 가져오기 시도를 캐싱하는 방식이 결합된 것으로 보입니다. GSC가 sitemap.xml에 접근하려고 할 때, 종종 미들웨어로 인해 요청이 실패하는 간섭을 경험할 수 있습니다. 일단 실패하면 GSC는 해당 특정 URL에 대한 실패 결과를 캐시하는 것 같습니다. 근본적인 문제를 수정한 후에도 단순히 동일한 sitemap.xml URL을 다시 제출하면 새로운 시도가 발생하지 않을 수 있습니다.

”Couldn’t Fetch” 오류를 수정하는 방법

이 해결책은 GitHub 사용자 @segabrielcarvalho가 공유한 것으로, 캐싱, 라우팅, 미들웨어 충돌을 네 가지 핵심 단계로 해결하는 실용적인 접근 방식입니다.

1단계: 트레일링 슬래시를 사용하여 새로운 사이트맵 가져오기 강제 실행

가장 간단하지만 가장 중요한 단계입니다. Google Search Console은 실패한 가져오기 시도를 공격적으로 캐시하는 것 같습니다. GSC가 깨끗한 상태에서 다시 시도하도록 하려면 간단한 캐시 버스팅 기법을 사용할 수 있습니다.

https://your-site.com/sitemap.xml을 제출하는 대신 트레일링 슬래시를 추가하세요:

https://your-site.com/sitemap.xml/

이렇게 약간 다른 URL을 제출하면 GSC의 캐시를 우회하고 새로운 가져오기를 트리거합니다. 이 간단한 트릭은 다른 수정 사항을 구현한 후 사이트맵이 성공적으로 읽히도록 하는 데 자주 충분합니다.

2단계: 중첩된 경로에서 사이트맵 제공

sitemap.ts 파일을 app 디렉토리의 루트에 두는 대신 중첩된 폴더로 이동하세요. 이렇게 하면 분리되어 충돌 없이 올바르게 제공되도록 할 수 있습니다.

1. app 디렉토리 안에 새로운 sitemap 폴더를 만듭니다.
2. sitemap.ts (또는 sitemap.js) 파일을 그 안으로 이동합니다.

새 파일 경로는 다음과 같습니다: app/sitemap/sitemap.ts

이렇게 하면 사이트맵의 공개 URL이 변경됩니다. 새로운 URL은 다음과 같습니다:

https://your-site.com/sitemap/sitemap.xml

Google Search Console에 제출할 때 이 새로운 URL을 사용하고 트레일링 슬래시 트릭을 사용하는 것을 잊지 마세요!

3단계: 미들웨어에서 SEO 파일 제외

미들웨어는 강력하지만, 실수로 Googlebot이 사이트맵 및 robots.txt와 같은 중요한 파일에 접근하는 것을 차단할 수도 있습니다. 이를 방지하려면 middleware.ts를 업데이트하여 이러한 파일을 명확하게 제외해야 합니다.

미들웨어 파일의 matcher 구성은 Next.js에 미들웨어가 실행되어야 하는 경로를 알려줍니다. 부정 전망(negative lookahead)을 사용하면 정적 자산 및 SEO 파일을 제외한 모든 경로에서 실행하도록 지시할 수 있습니다.

다음은 필요한 파일을 올바르게 제외하는 것 외에는 아무것도 하지 않는 미들웨어 예시입니다. 기존 미들웨어에 이 예시를 적용할 수 있습니다.

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export default function middleware(req: NextRequest) {
  // 미들웨어 로직을 여기에 추가할 수 있습니다.
  // 다른 로직이 없다면 그냥 next()를 반환하세요.
  void req;
  return NextResponse.next();
}

export const config = {
  matcher: [
    /*
     * 다음으로 시작하는 경로를 제외한 모든 요청 경로와 일치시킵니다:
     * - _next/static (정적 파일)
     * - _next/image (이미지 최적화 파일)
     * - favicon.ico (파비콘 파일)
     * - robots.txt (robots 파일)
     * - sitemap.xml (사이트맵 파일)
     * - sitemap/ (중첩된 사이트맵 파일)
     * - site.webmanifest (웹 매니페스트 파일)
     */
    "/((?!_next/static|_next/image|favicon\\.ico|robots\\.txt|sitemap\\.xml|sitemap/.*|site\\.webmanifest).*)",
  ],
};

이 구성은 robots.txt와 잠재적인 두 사이트맵 경로(/sitemap.xml 및 /sitemap/sitemap.xml)가 미들웨어에 의해 처리되지 않도록 하여 Googlebot을 혼란스럽게 할 수 있는 잠재적인 차단이나 리디렉션을 방지합니다.

4단계: 올바른 robots.txt 파일 생성

마지막으로, app 디렉토리에 깨끗하고 올바른 robots.txt 파일이 있는지 확인하세요. 이 파일은 명시적으로 모든 사용자 에이전트를 허용하고 새로운 사이트맵 URL을 가리켜야 합니다. public 폴더에 robots.txt가 있었다면 충돌을 피하고 app 디렉토리에서 생성된 파일만 사용하기 위해 제거하는 것이 가장 좋습니다.

app 디렉토리에 robots.ts 또는 robots.txt 파일을 만들고 다음 내용을 추가하세요:

import { MetadataRoute } from 'next'

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: '*',
      allow: '/',
    },
    sitemap: 'https://your-site.com/sitemap/sitemap.xml',
  }
}

또는 정적 파일을 선호하는 경우:

User-agent: *
Allow: /

Sitemap: https://your-site.com/sitemap/sitemap.xml

https://your-site.com을 실제 도메인으로 바꾸는 것을 잊지 마세요. 이 파일은 크롤러를 사이트맵의 새로운 위치로 안내합니다.

핵심 요약

수정 사항을 요약하면 다음과 같습니다:

1. GSC에 제출할 때 캐시를 무효화하기 위해 사이트맵 URL에 **트레일링 슬래시(/)**를 사용하세요.
2. 사이트맵 파일을 app/sitemap/sitemap.ts와 같은 중첩된 경로로 이동하세요.
3. robots.txt 및 sitemap.xml과 같은 SEO 파일을 제외하도록 미들웨어를 업데이트하세요.
4. robots.txt를 새로운 사이트맵 URL을 가리키도록 설정하세요.

또한 사이트맵 소스가 하나뿐인지 확인하는 것이 중요합니다. public 폴더에 sitemap.xml이 있고 app 디렉토리에서도 하나를 생성하고 있다면 충돌이 발생할 수 있습니다. 이전 사이트맵 파일을 모두 삭제하고 동적으로 생성되는 단일 파일만 사용하세요.

이 단계들을 따르면 “Couldn’t fetch sitemap” 오류를 해결하고 Next.js 사이트가 Google에 의해 올바르게 색인화되도록 할 수 있을 것입니다. Happy shipping