컨텐츠로 건너뛰기
v5-beta

@astrojs/ sitemap

v3.2.1 GitHub npm Changelog

이 Astro 통합 은 Astro 프로젝트를 빌드할 때 페이지를 기반으로 사이트맵을 생성합니다.

왜 Astro Sitemap인가?

섹션 제목: 왜 Astro Sitemap인가?

사이트맵은 사이트에 있는 모든 페이지, 동영상, 파일의 개요를 설명하는 XML 파일입니다. Google과 같은 검색 엔진은 이 파일을 읽어 사이트를 보다 효율적으로 크롤링합니다. 자세히 알아보려면 사이트맵에 대한 Google의 조언을 참조하세요.

대규모 다중 페이지 사이트에는 사이트맵 파일이 권장됩니다. 사이트맵을 사용하지 않는 경우에도 대부분의 검색 엔진은 사이트의 페이지를 나열할 수 있지만 사이트맵은 사이트를 최대한 검색 엔진 친화적으로 만들 수 있는 좋은 방법입니다.

Astro Sitemap을 사용하면 이 XML 파일을 직접 생성하는 것에 대해 걱정할 필요가 없습니다. Astro Sitemap 통합은 정적으로 생성된 경로를 크롤링하여 사이트맵 파일을 생성합니다. 여기에는 getStaticPaths()에 의해 생성된 [...slug] 또는 src/pages/[lang]/[version]/info.astro와 같은 동적 경로가 포함됩니다.

이 통합은 SSR 모드에서 동적 경로에 대한 사이트맵 항목을 생성할 수 없습니다.

설치

섹션 제목: 설치

Astro에는 공식 통합 설정을 자동화하는 astro add 명령이 포함되어 있습니다. 원하는 경우 대신 통합을 수동으로 설치할 수 있습니다.

새 터미널 창에서 다음 명령 중 하나를 실행합니다.

Terminal window
npx astro add sitemap

문제가 발생하면 GitHub에서 언제든지 보고하고 아래 수동 설치 단계를 시도해 보세요.

수동 설치

섹션 제목: 수동 설치

먼저 패키지 관리자를 사용하여 @astrojs/sitemap 패키지를 설치하세요.

Terminal window
npm install @astrojs/sitemap

그런 다음 integrations 속성을 사용하여 astro.config.* 파일에 통합을 적용합니다.

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  // ...
  integrations: [sitemap()],
});

사용하기

섹션 제목: 사용하기

사이트맵을 생성하려면 @astrojs/sitemap이 사이트의 배포된 URL을 알아야 합니다.

사이트 URL을 astro.config.mjs 파일의 site 옵션으로 추가합니다. 반드시 http:// 또는 https://로 시작해야 합니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [sitemap()],
  // ...
});

사이트맵 통합을 구성하면 사이트를 빌드할 때 sitemap-index.xml 및 sitemap-0.xml 파일이 출력 디렉터리에 추가됩니다.

sitemap-index.xml은 번호가 매겨진 모든 사이트맵 파일을 연결합니다. sitemap-0.xml은 사이트의 페이지를 나열합니다. 매우 큰 사이트의 경우 sitemap-1.xml 및 sitemap-2.xml과 같은 번호가 매겨진 파일이 추가로 존재할 수도 있습니다.

두 페이지의 웹사이트에 대해 생성된 파일 예시
sitemap-index.xml
<?xml version="1.0" encoding="UTF-8"?>
  <sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <sitemap>
    <loc>https://stargazers.club/sitemap-0.xml</loc>
  </sitemap>
</sitemapindex>
sitemap-0.xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
  <url>
    <loc>https://stargazers.club/</loc>
  </url>
  <url>
    <loc>https://stargazers.club/second-page/</loc>
  </url>
</urlset>

사이트맵 검색

섹션 제목: 사이트맵 검색

사이트 <head>의 링크 및 robots.txt 파일을 사용하여 크롤러가 사이트맵을 더 쉽게 찾을 수 있도록 만들 수 있습니다.

<head> 내 사이트맵 링크

섹션 제목: &lt;head&gt; 내 사이트맵 링크

사이트의 <head>에 사이트맵 인덱스 파일을 가리키는 <link rel="sitemap"> 요소를 추가합니다:

src/layouts/Layout.astro
<head>
  <link rel="sitemap" href="/sitemap-index.xml" />
</head>

robots.txt 내 사이트맵 링크

섹션 제목: robots.txt 내 사이트맵 링크

웹사이트에 robots.txt가 있는 경우 크롤러를 돕기 위해 사이트맵 인덱스의 URL을 추가할 수 있습니다:

public/robots.txt
User-agent: *
Allow: /


Sitemap: https://<YOUR SITE>/sitemap-index.xml

astro.config.mjs의 site 값을 재사용하려는 경우 robots.txt를 동적으로 생성할 수도 있습니다. public/ 디렉터리에서 정적 파일을 사용하는 대신 src/pages/robots.txt.ts 파일을 생성하고 다음 코드를 추가합니다:

src/pages/robots.txt.ts
import type { APIRoute } from 'astro';


const getRobotsTxt = (sitemapURL: URL) => `
User-agent: *
Allow: /


Sitemap: ${sitemapURL.href}
`;


export const GET: APIRoute = ({ site }) => {
  const sitemapURL = new URL('sitemap-index.xml', site);
  return new Response(getRobotsTxt(sitemapURL));
};

구성

섹션 제목: 구성

이 통합을 구성하려면 astro.config.mjs의 sitemap() 함수에 객체를 전달하세요.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  integrations: [
    sitemap({
      // 구성 옵션
    }),
  ],
});

filter

섹션 제목: filter

모든 페이지는 기본적으로 사이트맵에 포함됩니다. 사용자 정의 filter 함수를 추가하면 포함된 페이지를 URL별로 필터링할 수 있습니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      filter: (page) => page !== 'https://stargazers.club/secret-vip-lounge/',
    }),
  ],
});

이 함수는 사이트의 모든 페이지에 대해 호출됩니다. page 함수의 매개변수는 site 도메인을 포함하여 현재 고려 중인 페이지의 전체 URL입니다. 사이트맵에 페이지를 포함하려면 true를 반환하고, 제외하려면 false를 반환합니다.

여러 페이지를 필터링하려면 대상 URL이 포함된 인수를 추가하세요.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      filter: (page) =>
        page !== 'https://stargazers.club/secret-vip-lounge-1/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-2/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-3/' &&
        page !== 'https://stargazers.club/secret-vip-lounge-4/',
    }),
  ],
});

customPages

섹션 제목: customPages

어떤 경우에는 페이지가 배포된 사이트의 일부이지만 Astro 프로젝트의 일부가 아닐 수도 있습니다. Astro에서 생성하지 않은 페이지를 사이트맵에 포함하고 싶다면 이 옵션을 사용할 수 있습니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      customPages: ['https://stargazers.club/external-page', 'https://stargazers.club/external-page2'],
    }),
  ],
});

entryLimit

섹션 제목: entryLimit

사이트맵 파일당 최대 항목 수입니다. 기본값은 45000입니다. 항목이 더 있으면 사이트맵 색인과 여러 사이트맵이 생성됩니다. 대규모 사이트맵 분할에 대한 설명을 참조하세요.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      entryLimit: 10000,
    }),
  ],
});

changefreq, lastmod, priority

섹션 제목: changefreq, lastmod, priority

이러한 옵션은 Sitemap XML 사양의 <changefreq>, <lastmod>, <priority> 태그에 해당합니다.

changefreq 및 priority는 Google에서 무시됩니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      changefreq: 'weekly',
      priority: 0.7,
      lastmod: new Date('2022-02-24'),
    }),
  ],
});

serialize

섹션 제목: serialize

디스크에 쓰기 직전에 각 사이트맵 항목에 대해 호출되는 함수입니다. 이 함수는 비동기식일 수 있습니다.

다음 속성을 가질 수 있는 SitemapItem 객체를 매개변수로 받습니다.

  • url (페이지 URL의 절대경로). 이는 SitemapItem에 포함되도록 보장되는 유일한 속성입니다.
  • changefreq
  • lastmod (ISO 형식의 날짜, String 타입)
  • priority
  • links.

이 links 속성에는 상위 페이지를 포함한 대체 페이지의 LinkItem 목록이 포함되어 있습니다.

LinkItem 타입에는 url (지정된 언어에 대한 이 페이지 버전의 정규화된 URL)과 lang (이 페이지 버전을 대상으로 지원되는 언어 코드)의 두 가지 필드가 있습니다.

serialize 함수는 터치 여부에 관계없이 SitemapItem을 반환해야 합니다.

아래 예시는 사이트맵 특정 속성을 개별적으로 추가하는 기능을 보여줍니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      serialize(item) {
        if (/exclude-from-sitemap/.test(item.url)) {
          return undefined;
        }
        if (/your-special-page/.test(item.url)) {
          item.changefreq = 'daily';
          item.lastmod = new Date();
          item.priority = 0.9;
        }
        return item;
      },
    }),
  ],
});

i18n

섹션 제목: i18n

사이트맵을 현지화하려면 이 i18n 옵션에 객체를 전달하세요.

이 객체에는 두 가지 필수 속성이 있습니다.

  • defaultLocale: String. 해당 값은 locales 키 중 하나로 존재해야 합니다.
  • locales: Record<String, String>, 키/값 - 쌍. 키는 페이지 경로에서 로케일 부분을 찾는 데 사용됩니다. 값은 언어 속성이며, 영어 알파벳과 하이픈만 허용됩니다.

언어 속성에 대해 자세히 알아보기.

현지화에 대해 자세히 알아보기.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://stargazers.club',
  integrations: [
    sitemap({
      i18n: {
        defaultLocale: 'en', // `https://stargazers.club/` 뒤에 `es` 또는 `fr`이 포함되지 않은 모든 URL은 기본 로케일, 즉 `en`으로 처리됩니다.
        locales: {
          en: 'en-US', // `defaultLocale` 값은 `locales` 키에 있어야 합니다.
          es: 'es-ES',
          fr: 'fr-CA',
        },
      },
    }),
  ],
});

결과 사이트맵은 다음과 같습니다.

sitemap-0.xml
...
  <url>
    <loc>https://stargazers.club/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/es/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/fr/</loc>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/"/>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/"/>
  </url>
  <url>
    <loc>https://stargazers.club/es/second-page/</loc>
    <xhtml:link rel="alternate" hreflang="es-ES" href="https://stargazers.club/es/second-page/"/>
    <xhtml:link rel="alternate" hreflang="fr-CA" href="https://stargazers.club/fr/second-page/"/>
    <xhtml:link rel="alternate" hreflang="en-US" href="https://stargazers.club/second-page/"/>
  </url>
...

xslURL

섹션 제목: xslURL

사이트맵의 스타일을 지정하고 예쁘게 꾸밀 수 있는 XSL 스타일시트의 URL입니다.

설정된 값은 로컬 스타일시트에 대해 구성된 site URL에 상대적인 경로이거나 외부 스타일시트에 대한 절대 URL 링크일 수 있습니다.

astro.config.mjs
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';


export default defineConfig({
  site: 'https://example.com',
  integrations: [
    sitemap({
      xslURL: '/sitemap.xsl'
    }),
  ],
});

예시

섹션 제목: 예시

더 많은 통합

UI 프레임워크

SSR 어댑터

기타 통합

기여하기

여러분의 생각을 들려주세요!

GitHub Issue 생성

우리에게 가장 빨리 문제를 알려줄 수 있어요.

커뮤니티