sitemap.xml

sitemap.(xml|js|ts)는 검색 엔진 크롤러가 사이트를 더 효율적으로 색인화할 수 있도록 돕는 Sitemaps XML 형식과 일치하는 특별한 파일입니다.

Sitemap 파일 (.xml)

작은 애플리케이션의 경우, sitemap.xml 파일을 생성하여 app 디렉토리의 루트에 배치할 수 있습니다.

app/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

코드를 사용하여 sitemap 생성하기 (.js, .ts)

URL 배열을 반환하는 기본 함수를 내보내는 sitemap.(js|ts) 파일 규칙을 사용하여 프로그래밍 방식으로 sitemap을 생성할 수 있습니다. TypeScript를 사용하는 경우 Sitemap 타입을 사용할 수 있습니다.

알아두면 좋은 점: sitemap.js는 동적 함수나 동적 config 옵션을 사용하지 않는 한 기본적으로 캐시되는 특별한 Route Handler입니다.

app/sitemap.ts

import type { MetadataRoute } from "next";
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://acme.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://acme.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://acme.com/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
  ];
}

app/sitemap.js

export default function sitemap() {
  return [
    {
      url: "https://acme.com",
      lastModified: new Date(),
      changeFrequency: "yearly",
      priority: 1,
    },
    {
      url: "https://acme.com/about",
      lastModified: new Date(),
      changeFrequency: "monthly",
      priority: 0.8,
    },
    {
      url: "https://acme.com/blog",
      lastModified: new Date(),
      changeFrequency: "weekly",
      priority: 0.5,
    },
  ];
}

출력:

acme.com/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://acme.com</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

이미지 Sitemap

images 속성을 사용하여 이미지 sitemap을 생성할 수 있습니다. 자세한 내용은 Google 개발자 문서를 참조하세요.

app/sitemap.ts

import type { MetadataRoute } from "next";
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://example.com",
      lastModified: "2021-01-01",
      changeFrequency: "weekly",
      priority: 0.5,
      images: ["https://example.com/image.jpg"],
    },
  ];
}

출력:

acme.com/sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset
  xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:image="http://www.google.com/schemas/sitemap-image/1.1"
>
  <url>
    <loc>https://example.com</loc>
    <image:image>
      <image:loc>https://example.com/image.jpg</image:loc>
    </image:image>
    <lastmod>2021-01-01</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

지역화된 Sitemap 생성하기

app/sitemap.ts

import type { MetadataRoute } from "next";
 
export default function sitemap(): MetadataRoute.Sitemap {
  return [
    {
      url: "https://acme.com",
      lastModified: new Date(),
      alternates: {
        languages: {
          es: "https://acme.com/es",
          de: "https://acme.com/de",
        },
      },
    },
    {
      url: "https://acme.com/about",
      lastModified: new Date(),
      alternates: {
        languages: {
          es: "https://acme.com/es/about",
          de: "https://acme.com/de/about",
        },
      },
    },
    {
      url: "https://acme.com/blog",
      lastModified: new Date(),
      alternates: {
        languages: {
          es: "https://acme.com/es/blog",
          de: "https://acme.com/de/blog",
        },
      },
    },
  ];
}

출력:

acme.com/sitemap.xml

<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml">
  <url>
    <loc>https://acme.com</loc>
    <xhtml:link
      rel="alternate"
      hreflang="es"
      href="https://acme.com/es"/>
    <xhtml:link
      rel="alternate"
      hreflang="de"
      href="https://acme.com/de"/>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
  </url>
  <url>
    <loc>https://acme.com/about</loc>
    <xhtml:link
      rel="alternate"
      hreflang="es"
      href="https://acme.com/es/about"/>
    <xhtml:link
      rel="alternate"
      hreflang="de"
      href="https://acme.com/de/about"/>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
  </url>
  <url>
    <loc>https://acme.com/blog</loc>
    <xhtml:link
      rel="alternate"
      hreflang="es"
      href="https://acme.com/es/blog"/>
    <xhtml:link
      rel="alternate"
      hreflang="de"
      href="https://acme.com/de/blog"/>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
  </url>
</urlset>

여러 sitemap 생성하기

대부분의 애플리케이션에서는 단일 sitemap으로 충분합니다. 하지만 대규모 웹 애플리케이션의 경우, sitemap을 여러 파일로 분할해야 할 수 있습니다.

여러 sitemap을 생성하는 방법에는 두 가지가 있습니다:

여러 라우트 세그먼트 내에 sitemap.(xml|js|ts)를 중첩하는 방법. 예: app/sitemap.xml과 app/products/sitemap.xml.
generateSitemaps 함수를 사용하는 방법.

예를 들어, generateSitemaps를 사용하여 sitemap을 분할하려면 sitemap id가 있는 객체 배열을 반환합니다. 그런 다음 id를 사용하여 고유한 sitemap을 생성합니다.

app/product/sitemap.ts

import type { MetadataRoute } from "next";
import { BASE_URL } from "@/app/lib/constants";
 
export async function generateSitemaps() {
  // 총 제품 수를 가져와 필요한 sitemap 수를 계산합니다
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
}
 
export default async function sitemap({
  id,
}: {
  id: number;
}): Promise<MetadataRoute.Sitemap> {
  // Google의 제한은 sitemap 당 50,000개의 URL입니다
  const start = id * 50000;
  const end = start + 50000;
  const products = await getProducts(
    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
  );
  return products.map((product) => ({
    url: `${BASE_URL}/product/${product.id}`,
    lastModified: product.date,
  }));
}

app/product/sitemap.js

import { BASE_URL } from "@/app/lib/constants";
 
export async function generateSitemaps() {
  // 총 제품 수를 가져와 필요한 sitemap 수를 계산합니다
  return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }];
}
 
export default async function sitemap({ id }) {
  // Google의 제한은 sitemap 당 50,000개의 URL입니다
  const start = id * 50000;
  const end = start + 50000;
  const products = await getProducts(
    `SELECT id, date FROM products WHERE id BETWEEN ${start} AND ${end}`
  );
  return products.map((product) => ({
    url: `${BASE_URL}/product/${product.id}`,
    lastModified: product.date,
  }));
}

생성된 sitemap은 /.../sitemap/[id]에서 사용할 수 있습니다. 예: /product/sitemap/1.xml.

자세한 내용은 generateSitemaps API 참조를 참조하세요.

반환값

sitemap.(xml|ts|js)에서 내보낸 기본 함수는 다음 속성을 가진 객체 배열을 반환해야 합니다:

type Sitemap = Array<{
  url: string;
  lastModified?: string | Date;
  changeFrequency?:
    | "always"
    | "hourly"
    | "daily"
    | "weekly"
    | "monthly"
    | "yearly"
    | "never";
  priority?: number;
  alternates?: {
    languages?: Languages<string>;
  };
}>;

버전 기록

버전	변경 사항
`v14.2.0`	지역화 지원 추가.
`v13.4.14`	sitemap에 `changeFrequency`와 `priority` 속성 추가.
`v13.3.0`	`sitemap` 도입.

robots.txt 함수