sitemap.xml
sitemap.(xml|js|ts)
es un archivo especial que sigue el formato XML de Sitemaps para ayudar a los rastreadores de motores de búsqueda a indexar tu sitio de manera más eficiente.
Archivos Sitemap (.xml)
Para aplicaciones pequeñas, puedes crear un archivo sitemap.xml
y colocarlo en la raíz de tu directorio app
.
<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>
Generar un sitemap usando código (.js, .ts)
Puedes usar la convención de archivo sitemap.(js|ts)
para generar programáticamente un sitemap exportando una función por defecto que devuelva un array de URLs. Si usas TypeScript, está disponible un tipo Sitemap
.
Bueno saber:
sitemap.js
es un Manejador de Ruta especial que se almacena en caché por defecto a menos que use una API Dinámica u opción de configuración dinámica.
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,
},
]
}
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,
},
]
}
Salida:
<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>
Sitemaps de imágenes
Puedes usar la propiedad images
para crear sitemaps de imágenes. Más detalles en la documentación para desarrolladores de Google.
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'],
},
]
}
Salida:
<?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>
Sitemaps de videos
Puedes usar la propiedad videos
para crear sitemaps de videos. Más detalles en la documentación para desarrolladores de Google.
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,
videos: [
{
title: 'example',
thumbnail_loc: 'https://example.com/image.jpg',
description: 'this is the description',
},
],
},
]
}
Salida:
<?xml version="1.0" encoding="UTF-8"?>
<urlset
xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:video="http://www.google.com/schemas/sitemap-video/1.1"
>
<url>
<loc>https://example.com</loc>
<video:video>
<video:title>example</video:title>
<video:thumbnail_loc>https://example.com/image.jpg</video:thumbnail_loc>
<video:description>this is the description</video:description>
</video:video>
<lastmod>2021-01-01</lastmod>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
</urlset>
Generar un Sitemap localizado
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',
},
},
},
]
}
export default function 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',
},
},
},
]
}
Salida:
<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>
Generar múltiples sitemaps
Aunque un solo sitemap funcionará para la mayoría de aplicaciones. Para aplicaciones web grandes, puede que necesites dividir un sitemap en múltiples archivos.
Hay dos formas de crear múltiples sitemaps:
- Anidando
sitemap.(xml|js|ts)
dentro de múltiples segmentos de ruta, ej.app/sitemap.xml
yapp/products/sitemap.xml
. - Usando la función
generateSitemaps
.
Por ejemplo, para dividir un sitemap usando generateSitemaps
, devuelve un array de objetos con el id
del sitemap. Luego, usa el id
para generar los sitemaps únicos.
import type { MetadataRoute } from 'next'
import { BASE_URL } from '@/app/lib/constants'
export async function generateSitemaps() {
// Obtener el número total de productos y calcular cuántos sitemaps se necesitan
return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}
export default async function sitemap({
id,
}: {
id: number
}): Promise<MetadataRoute.Sitemap> {
// El límite de Google es 50,000 URLs por sitemap
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,
}))
}
import { BASE_URL } from '@/app/lib/constants'
export async function generateSitemaps() {
// Obtener el número total de productos y calcular cuántos sitemaps se necesitan
return [{ id: 0 }, { id: 1 }, { id: 2 }, { id: 3 }]
}
export default async function sitemap({ id }) {
// El límite de Google es 50,000 URLs por sitemap
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,
}))
}
Tus sitemaps generados estarán disponibles en /.../sitemap/[id]
. Por ejemplo, /product/sitemap/1.xml
.
Consulta la referencia de API de generateSitemaps
para más información.
Retornos
La función por defecto exportada desde sitemap.(xml|ts|js)
debe devolver un array de objetos con las siguientes propiedades:
type Sitemap = Array<{
url: string
lastModified?: string | Date
changeFrequency?:
| 'always'
| 'hourly'
| 'daily'
| 'weekly'
| 'monthly'
| 'yearly'
| 'never'
priority?: number
alternates?: {
languages?: Languages<string>
}
}>
Historial de versiones
Versión | Cambios |
---|---|
v14.2.0 | Se añade soporte para localizaciones. |
v13.4.14 | Se añaden atributos changeFrequency y priority a los sitemaps. |
v13.3.0 | Se introduce sitemap . |