Saltearse al contenido

@astrojs/ sitemap

v3.1.4 GitHub npm Changelog

Esta integración de Astro genera un Sitemap basado en tus páginas al construir tu proyecto de Astro.

¿Por qué Astro Sitemap?

Sección titulada ¿Por qué Astro Sitemap?

Un Sitemap es un archivo XML que describe todas las páginas, videos y archivos de tu sitio. Los motores de búsqueda como Google leen este archivo para rastrear tu sitio de manera más eficiente. Consulta el consejo de Google sobre los Sitemaps para obtener más información al respecto.

Se recomienda utilizar un archivo Sitemap para sitios grandes con múltiples páginas. Si no utilizas un Sitemap, la mayoría de los motores de búsqueda aún podrán listar las páginas de tu sitio, pero un Sitemap es una excelente manera de asegurarte de que tu sitio sea lo más amigable posible para los motores de búsqueda.

Con Astro Sitemap, no tienes que preocuparte por crear este archivo XML tú mismo: la integración Astro Sitemap rastreará tus rutas generadas estáticamente y creará el archivo sitemap, incluyendo rutas dinámicas como [...slug] o src/pages/[lang]/[version]/info.astro generado por getStaticPaths().

Esta integración no puede generar entradas de sitemap para rutas dinámicas en modo SSR.

Instalación

Sección titulada Instalación

Astro incluye un comando astro add para automatizar la configuración de las integraciones oficiales. Si lo prefieres, puedes instalar las integraciones manualmente en su lugar.

Ejecuta uno de los siguientes comandos en una nueva ventana de terminal.

Ventana de terminal
npx astro add sitemap

Si tienes algún problema, no dudes en informarnos en GitHub y prueba los pasos de instalación manual a continuación.

Instalación manual

Sección titulada Instalación manual

Primero, instala el paquete @astrojs/sitemap utilizando tu gestor de paquetes.

Ventana de terminal
npm install @astrojs/sitemap

Luego, aplica la integración a tu archivo astro.config.* utilizando la propiedad integrations:

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


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

Uso

Sección titulada Uso

@astrojs/sitemap requiere una URL de despliegue o del sitio para su generación. Agrega la URL de tu sitio bajo astro.config.* utilizando la propiedad site. Esta URL debe comenzar con http: o https:.

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


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

Ten en cuenta que, a diferencia de otras opciones de configuración, site se establece en el objeto defineConfig raíz, en lugar de dentro de la llamada a sitemap().

Ahora, construye tu sitio para producción utilizando el comando astro build. Encontrarás sitemap-index.xml y sitemap-0.xml en la carpeta dist/ (o tu directorio de salida personalizado si está configurado).

Después de verificar que los sitemaps se hayan construido, puedes agregarlos al elemento<head> de tu sitio y al archivo robots.txt para que los rastreadores los detecten.

src/layouts/Layout.astro
<head>
  <link rel="sitemap" href="/sitemap-index.xml" />
</head>
public/robots.txt
User-agent: *
Allow: /


Sitemap: https://<TU SITIO>/sitemap-index.xml

Para generar de forma dinámica el archivo robots.txt, añade un archivo llamado robots.txt.ts con el siguiente código:

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


const robotsTxt = `
User-agent: *
Allow: /
Sitemap: ${new URL('sitemap-index.xml', import.meta.env.SITE).href}
`.trim();


export const GET: APIRoute = () => {
  return new Response(robotsTxt, {
    headers: {
      'Content-Type': 'text/plain; charset=utf-8',
    },
  });
};

Ejemplo de archivos generados para un sitio web de dos páginas

Sección titulada Ejemplo de archivos generados para un sitio web de dos páginas
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>

Configuración

Sección titulada Configuración

Para configurar esta integración, pasa un objeto a la función sitemap() en la configuración de astro.config.mjs.

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


export default defineConfig({
  integrations: [
    sitemap({
      // opciones de configuración
    }),
  ],
});

filter

Sección titulada filter

Por defecto, todas las páginas se incluyen en tu sitemap. Al agregar una función filter personalizada, puedes filtrar las páginas incluidas según su 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/',
    }),
  ],
});

La función se llamará para cada página de tu sitio. El parámetro de función page es la URL completa de la página que se está considerando actualmente, incluido el dominio de tu site. Devuelve true para incluir la página en tu sitemap y false para omitirla.

Para filtrar varias páginas, agrega argumentos con las URL de destino.

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

Sección titulada customPages

En algunos casos, una página podría formar parte de tu sitio implementado pero no ser parte de tu proyecto de Astro. Si deseas incluir una página en tu sitemap que no sea creada por Astro, puedes utilizar esta opción.

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

Sección titulada entryLimit

El número máximo de entradas por archivo de sitemap. El valor predeterminado es 45000. Se crea un índice de sitemap y múltiples sitemaps si tienes más entradas. Consulta esta explicación sobre cómo dividir un sitemap grande.

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, y priority

Sección titulada changefreq, lastmod, y priority

Estas opciones corresponden a las etiquetas <changefreq>, <lastmod>, y <priority> en la especificación XML del Sitemap.

Ten en cuenta que Google ignora las propiedades changefreq y priority.

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

Sección titulada serialize

Una función que se llama para cada entrada del Sitemap justo antes de escribir en el disco. Esta función puede ser asíncrona.

Recibe como parámetro un objeto SitemapItem que puede tener estas propiedades:

  • url (URL absoluta de la página). Esta es la única propiedad que se garantiza que estará presente en SitemapItem.
  • changefreq
  • lastmod (Fecha en formato ISO, tipo String)
  • priority
  • links.

La propiedad links contiene una lista de LinkItem que representa las páginas alternativas, incluida la página principal.

El tipo LinkItem tiene dos campos: url (la URL completamente calificada para la versión de esta página en el idioma especificado) y lang (un código de idioma compatible dirigido por esta versión de la página).

La función serialize debe devolver un objeto SitemapItem, ya sea modificado o no.

El siguiente ejemplo muestra la capacidad de agregar propiedades específicas del Sitemap individualmente.

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

Sección titulada i18n

Para localizar un Sitemap, pasa un objeto a la opción i18n.

Este objeto tiene dos propiedades requeridas:

  • defaultLocale: String. Su valor debe existir como una de las claves de locales.
  • locales: Record<String, String>, pares clave/valor. La clave se utiliza para buscar la parte del idioma en una ruta de página. El valor es un atributo de idioma y solo se permiten letras del alfabeto inglés y guiones.

Lee más sobre los atributos de idioma.

Lee más sobre la localización.

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', // Todas las URL que no contengan `es` o `fr` después de `https://stargazers.club/` se tratarán como el idioma predeterminado, es decir, `en`
        locales: {
          en: 'en-US', // El valor de `defaultLocale` debe estar presente en las claves de `locales`
          es: 'es-ES',
          fr: 'fr-CA',
        },
      },
    }),
  ],
});

El sitemap resultante tiene el siguiente aspecto:

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>
...

Ejemplos

Sección titulada Ejemplos

Más integraciones

Frameworks UI

Adaptadores SSR

Otras integraciones