Creando una ruta sitemap.xml

Agregar los feed fue solo el primer paso, también necesitamos un sitemap, que es, incluso, más importante. 😇

Pues es la forma en que Google sabrá de nuestras rutas de feed.

Para crear nuestro sitemap, solo necesitamos ayudarnos de un .map para generar todos los links.

import { type LoaderFunction } from "@remix-run/node";
import { db } from "~/utils/db";

/* Dentro del looader, vamos a consumir todos los posts publicos
 * Como lo hicimos en los feedLinks
 */
export const loader: LoaderFunction = async ({ params, request }) => {
  const url = new URL(request.url);
  const allPosts = await db.post.findMany({
    where: { published: true },
    include: { author: true },
  });

// Creamos el HTML para cada post ayudandonos del un map.
  const postItems = allPosts.map((post) => {
    return [
      `<url>`,
      `<loc><https://curso-blog-remix.netlify.app/blog/${post.slug}></loc>`,
      `<lastmod>${post.createdAt}</lastmod>`,
      `</url>`,
    ].join(""); // Observa que unimos este array en un string reultante.
  });

// Agregamos lost feedLinks a la lista de rutas 
// y cualquier otra ruta que necesites agregar (indexar).
  const xml = [
    `<?xml version="1.0" encoding="UTF-8"?>`,
    `<urlset xmlns="<http://www.sitemaps.org/schemas/sitemap/0.9>">`,
    `<url>`,
    `<loc><https://curso-blog-remix.netlify.app/feed.xml></loc>`,
    `<lastmod>${new Date()}</lastmod>`,
    `</url>`,

    `<url>`,
    `<loc><https://curso-blog-remix.netlify.app/feed.json></loc>`,
    `<lastmod>${new Date()}</lastmod>`,
    `</url>`,

    `<url>`,
    `<loc><https://curso-blog-remix.netlify.app/feed.atom></loc>`,
    `<lastmod>${new Date()}</lastmod>`,
    `</url>`,
    // index page, o /blog page
    `<url>`,
    `<loc>${url.origin}/blog</loc>`,
    `<lastmod>${new Date()}</lastmod>`,
    `</url>`,
// Agregamos las rutas de nuestros posts
    ...postItems,
    `</urlset>`,
  ];

// Respondemos con un string
  return new Response(xml.join(""), {
    headers: {
      "Content-Type": "application/xml; charset=utf-8",
      "x-content-type-options": "nosniff",
    },
  });
};

No te olvides de colocar las headers adecuadas.

¡Maravilloso, ahora Google sabrá los detalles de cada uno de nuestros posts! Visita la ruta y mira nomás que chulada. 👏🏼🎉🎅🏼

Recuerda que siempre puedes aprender más sobre el sitemap por tu cuenta, consulta aquí.

¿Consultar todos los posts cada que se solicita el feed o el sitemap, no es mucho trabajo?

Sí, es importante tomar en cuenta que estos datos deben de ayudarse de una memoria cache.

Netlify ya nos ofrece cache, revisa si el hosting de tu preferencia te ofrece este servicio y si no, también podrías agregar Redis tu misma(o). 🤓

👀 Regularmente esta consulta no es gravosa en un blog personal con un par de cientos de posts. También recuerda que en producción podemos usar una memoria cache para evitar la petición.

¿Nuestros feed son adecuados para internet?

Ahora vamos a comprobar que todo está en orden con nuestros feed en el validador de feed de la W3C: aquí

¡Perfecto, tenemos feeds válidos para nuestro blog!

Has optimizado el SEO como un profesional.

Te digo que puro trabajo duro contigo. 😎 Te mereces otra chela. 🍺

A este paso acabaremos muy ebrios… ☺️🍻🫨🥴🤢🤮🌒🤒🤕

Enlaces relacionados

W3C feed validator: W3C Feed Validation Service, for Atom and RSS

¿Qué es un RSS? RSS

Remix cache: Performance

Instrucciones para Sitemaps: https://developers.google.com/search/docs/crawling-indexing/sitemaps/build-sitemap?hl=es-419

Te presento a Redis https://redis.io/