Juneikerc.com

Como crear un sitemap xml en qwik js (estático y dinámico)

Imagen destacada del post: Como crear sitemaps xml en qwik js (estáticos y dinámicos)

Un sitemap XML es un archivo que lista todos los contenidos importantes de tu sitio web, como las páginas, los archivos y las imágenes. Un sitemap XML ayuda a los motores de búsqueda como Google a rastrear e indexar tu sitio web de forma más eficiente.

En este Post, Aprenderás a crear un sitemap XML para tu sitio web construido con Qwik.js, un framework de javascript que te permite crear aplicaciones web modernas, rápidas y resilientes.

1. Generando sitemap xml en qwik (en tiempo de compilación)

Gracias al Static site adapter de qwik podemos generar sitios estáticos utilizando este framework. Si estás utilizando este adaptador cuando construyas el proyecto automáticamente se generará en la raíz un archivo sitemap.xml con todas las rutas estáticas que hayas predefinido.

¿Cómo agrego al sitemap páginas que no son estáticas?

Si tienes rutas que no se generarán de forma estática en tiempo de compilación (SSG) estas no se agregarán a tu archivo sitemap.xml. A continuación te explico como generar sitemaps dinámicos en Qwik.

2. Sitemap xml en qwik (dinámicamente en el servidor (SSR)

Por defecto qwik utiliza server side rendering para el renderizado de todas las página de un sitio web. En estos casos el sitemap debería generarse dinamicamente cuando se solicita la ruta del sitemap.

Por suerte qwik podemos lograr este resultado de forma muy sencilla:

Crea una ruta para el sitemap y agrega un archivo index.tsx

txt
src
  routes
    sitemap-0.xml // La carpeta se debe terminar en .xml
      index.tsx

Código para generar el sitemap xml con qwik

tsx
import { type RequestHandler } from "@builder.io/qwik-city";
import { BASE_URL } from "~/helpers/consts";


export const onRequest: RequestHandler = async (requesEvent): Promise<any> => {
  // Se asume que `prisma` es un objeto Prisma previamente configurado y conectado a una base de datos.


  const posts = await prisma.post.findMany();
  
  // A continuación, se genera un documento XML que representa un sitemap para motores de búsqueda.
  const content = `
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  ${posts.map(
    (post) => `<url>
  <loc>${BASE_URL}${post.slug}</loc>
  <lastmod>${post.last_publication_date}</lastmod>
  <priority>0.7</priority>
  </url>`
  )}
</urlset>
`;
  // Se crea una respuesta HTTP con el contenido XML del sitemap.
  const response = new Response(content, {
    status: 200,
    headers: {
      "Content-Type": "application/xml",
      "xml-version": "1.0",
      encoding: "UTF-8",
    },
  });
  
  // Aquí enviamos la respuesta
  return requesEvent.send(response);
};
  1. El código importa los módulos RequestHandler y BASE_URL de sus respectivos paquetes. RequestHandler es una interface que se utiliza para manejar solicitudes HTTP en el contexto de una aplicación web creada con Qwik, y BASE_URL es una constante que almacena la URL base para la construcción de las URL del sitemap.
  2. La función onRequest es un manejador de solicitud (middleware) que porporciona qwik. Este se ejecutará cuando llegue una solicitud HTTP a la ruta. El parámetro requestEvent representa la solicitud entrante.
  3. La variable posts se llena con un conjunto de datos de posts recuperados de la base de datos utilizando Prisma. Esto asume que prisma es una instancia de Prisma previamente configurada y conectada a una base de datos.
  4. A continuación, se genera un documento XML que representa un sitemap. En este caso, el sitemap contiene una lista de URL de posts, cada una con la URL, la fecha de última modificación y la prioridad.
  5. Se crea una respuesta HTTP utilizando la clase Response. El contenido del sitemap se establece como el cuerpo de la respuesta. Además, se establece el estado HTTP 200 (OK) y se definen encabezados que indican que el contenido es XML.
  6. Finalmente, se envía la respuesta de vuelta al cliente que realizó la solicitud utilizando requestEvent.send(response).

Una vez que hayas creado tu sitemap XML puedes enviarlo a Google para que lo tome en cuenta al rastrear e indexar tu sitio web.

Error de fecha en search console

Si al enviar el sitemap en google search console te devuelve un error correspondiente al formato de las fechas de cada url, lo que debes hacer es convertir la cadena en un formato YYYY-MM-DD

Muchas gracias por leerme

Crear un sitemap XML para tu sitio web construido con Qwik es relativamente sencillo. Un sitemap XML te ayuda a mejorar la visibilidad y el posicionamiento de tu sitio web en los motores de búsqueda como Google.

Espero que este artículo te haya sido útil, si te ha gustado, compártelo o escribeme en twitter con tus dudas o sugerencias.

Juneiker Castillo freelance web developer

Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.

Sobre mi