Cómo Crear y Configurar un Sitemap en Astro para Mejorar tu SEO
En el mundo del SEO, un sitemap XML es un elemento fundamental para que los motores de búsqueda puedan rastrear e indexar eficientemente todas las páginas de tu sitio web. En este artículo, te guiaré paso a paso sobre cómo crear y configurar un sitemap en Astro Framework, asegurando que tu sitio esté bien optimizado para los buscadores.
¿Qué es un Sitemap y por qué es Importante para tu Sitio web?
Un sitemap es un archivo XML que enumera las páginas de tu sitio web, proporcionando información sobre la estructura de tu contenido y la frecuencia con la que se actualiza. Este archivo es consumido por los motores de búsqueda como Google para mejorar la indexación de tu sitio.
Antes, la tarea de elaborar el sitemap de tu página era algo muy manual, pero hoy en día la mayoría de frameworks de desarrollo web cuentan con herramientas para facilitar esta labor.
Cómo Crear un Sitemap en Astro: Paso a Paso
1. Instalar la integración @astro/sitemap
Para tareas comunes como esta, Astro cuenta con una serie de integraciones (como una especie de plugins), las cuales pueden ser oficiales o desarrolladas por la comunidad (ver su documentación).
Por tanto, lo primero que tendremos que hacer es instalar la integración @astro/sitemap usando nuestro gestor de paquetes de Node.js favorito. Desde la terminal y en la ruta del proyecto Astro ejecutamos lo siguiente:
# npm
npx astro add sitemap
# pnpm
pnpm astro add sitemap
# yarn
yarn astro add sitemap
Tras ejecutar el comando, se añadirá el paquete al proyecto y se modificará el archivo astro.config.mjs. Dicho archivo debería verse así:
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
integrations: [sitemap()],
});
2. Configuración Inicial del Sitemap en Astro
Ya tenemos instalada la integración pero, ¿dónde se encuentra el sitemap?
Es importante saber que en desarrollo no se puede ver el sitemap, sino que hay que hacer el build del proyecto para que Astro lo genere en la carpeta /dist. Sin embargo, si probamos no se generará ningún sitemap ya que necesita de una configuración mínima para el correcto funcionamiento.
Lo único que requiere la integración para funcionar es que le definamos la propiedad site (es importante que comience por https: o http:) en el archivo de configuración de Astro astro.config.mjs. Así quedaría en nuestro caso:
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';
export default defineConfig({
// ...
site: 'https://codewebnow.com',
integrations: [sitemap()],
})
Este simple código creará un sitemap básico que incluirá todas las páginas de tu sitio.
3. Generar el Sitemap
Como hemos dicho antes, para crear el sitemap debemos hacer el build del proyecto. Por tanto, abrimos una terminal en la raíz del proyecto y ejecutamos lo siguiente:
# npm
npm run build
# pnpm
pnpm build
# yarn
yarn build
Esto creará una carpeta /dist en la que, si hemos realizado los pasos correctamente, podremos ver el archivo sitemap-index.xml. Este archivo es un sitemap índice que contiene todos los sitemaps de tu sitio web. La integración por defecto divide los sitemaps (sitemap-0.xml, sitemap-1.xml, etc.) en distintos archivos en el caso de que tengas un gran número de páginas.
<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
<sitemap>
<loc>https://codewebnow.com/sitemap-0.xml</loc>
</sitemap>
</sitemapindex>
<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://codewebnow.com/</loc>
</url>
<url>
<loc>https://codewebnow.com/about/</loc>
</url>
<url>
<loc>https://codewebnow.com/blog/</loc>
</url>
<url>
<loc>https://codewebnow.com/blog/consejos-optimizacion-paginas-web/</loc>
</url>
<!-- ... Más URLs -->
</urlset>
4. Configuración avanzada
Excluir Páginas del Sitemap
Si estás realizando un análisis y optimización SEO de tu sitio web, te darás cuenta de que hay páginas que es mejor no incluir en el sitemap, ya que no son de interés en cuanto al contenido (esto no va a prevenir su indexación), como las páginas legales de la web.
Os mostraremos la manera en la que lo implementamos nosotros de una forma muy simple:
const EXCLUDE_FROM_SITEMAP = [ // Lista de Expresiones Regulares
/aviso-legal/, // NO SON STRINGS
/politica-de-privacidad/,
/politica-de-cookies/,
// ... más páginas para excluir
]
export default defineConfig({
site: 'https://codewebnow.com',
integrations: [
sitemap({
filter: (page) =>
!EXCLUDE_FROM_SITEMAP.some(
pageToExclude => pageToExclude.test(page)
)
}),
],
})
Tendríamos que extender la configuración inicial de la integración, pasándole una función a la propiedad filter. Dicha función recibe todas las páginas de tu sitio una por una y tú solo debes devolver true o false. En nuestro caso, si la página coincide con una de las expresiones regulares de EXCLUDE_FROM_SITEMAP devolvemos false.
Añadir Páginas Personalizadas y Externas
Además de filtrar, también puedes añadir páginas que no están generadas por Astro, pero que están dentro de tu dominio:
sitemap({
customPages: [
'https://codewebnow.com/página-externa'
]
});
Esto asegura que incluso las páginas externas o personalizadas sean rastreadas por los motores de búsqueda.
Limitar número de páginas por sitemap
Como comentamos, la integración crea varios sitemaps según las páginas que tenga tu proyecto. El valor predeterminado de elementos por sitemap es de 45.000, así que no creo que tengáis problemas con esto 😅. En el caso de que queráis que cada sitemap tenga un número de páginas distinto, puedes hacerlo así:
sitemap({
entryLimit: 50, // Ejemplo con 50 páginas por sitemap
});
Añadir Parámetros al Sitemap
A las páginas de un sitemap.xml se les pueden añadir ciertas propiedades que proporcionan información valiosa a los motores de búsqueda.
changefreq: Indica la frecuencia con la que se espera que cambie el contenido de una página.priority: Especifica la prioridad de la URL en relación con otras páginas en el sitio.lastmod: Define la fecha de la última modificación del contenido de la página.
Aquí te vamos a aportar un simple ejemplo, pero si quieres más información acerca de estas propiedades tienes la documentación aquí.
sitemap({
changefreq: 'weekly',
priority: 0.7,
lastmod: new Date('2024-08-24'),
}),
Cabe destacar que estás propiedades se aplican en global para todas las páginas. Si quieres configurar páginas por individual existe la función serialize.
Incluir tu Sitemap en el robots.txt
Es importante que los motores de búsqueda puedan encontrar fácilmente tu sitemap. Normalmente detectan los sitemaps automáticamente, pero nunca está de más añadirlo al archivo robots.txt. Para ello, debemos añadir la url del sitemap-index.xml. No es necesario añadir más.
Sitemap: https://codewebnow.com/sitemap-index.xml
Tienes dos opciones para crear el archivo robots.txt:
- Crear el archivo en la carpeta
/public. - Usar una integración para generarlo (lo explicamos más adelante).
Solución de Problemas Comunes al Configurar Sitemaps en Astro
La integración facilita el proceso entero para crear el sitemap. Aparte de los errores propios de la integración (p. ej.: no definir el site), es importante en tema SEO que no se incluyan enlaces rotos ni enlaces que lleven a redirecciones. Hay que tener en cuenta que para los motores como Google, codewebnow.com/blog/crear-configurar-sitemap-astro/ no es lo mismo que codewebnow.com/blog/crear-configurar-sitemap-astro. Esto se conoce como trailing slash.
Herramientas y Recursos Adicionales
Integración Astro robots.txt
Para implementar un robots.txt también existe una integración. Se llama astro-robots-txt y es muy fácil de implementar ya que todas las integraciones siguen la misma dinámica de configuración.
export default defineConfig({
integrations: [
robotsTxt({
policy: [
{
userAgent: '*',
disallow: ['/ruta-a-excluir/'],
},
]
})],
});
Documentación Oficial y Comunidades de Soporte
Para más información y soporte, te recomiendo consultar la documentación oficial de Astro. Además, para enriquecer tu desarrollo con Astro Framework tienes disponible un directorio de integraciones que te facilitará muchas tareas en tu desarrollo.
Con esta guía, deberías estar bien encaminado para crear y personalizar un sitemap en Astro, asegurando que tu sitio esté bien indexado y optimizado para SEO.
Comparte el post y ayúdanos
