Cómo el nuevo mapa de sitio dinámico de HackerNoon mejora la distribución de historias

SEO significa Search Engine Optimization y ayuda a que su sitio web sea más reconocible para el público al hacer que se clasifique más alto en los motores de búsqueda como Google. Puede agregar SEO a su sitio web, de forma dinámica o estática, pero ambos definibles subirán de nivel su sitio. Esta es la historia de cómo agregué un nuevo tipo de mapa de sitio dinámico a la plataforma de publicación de HackerNoon para indexar mejor nuestros cientos de miles de páginas del sitio: https://hackernoon.com/sitemap.xml

Entonces, ¿cómo impulsan los sitemaps dinámicos el rendimiento de SEO?

Para comenzar a indexar un sitio en los motores de búsqueda, todo lo que necesita es un archivo sitemap.xml en el directorio /public del código fuente de su sitio web. El mapa del sitio indicará las diferentes páginas de su sitio web y lo enviará a los motores de búsqueda para validar las URL. En realidad, hay muchos otros sitios web que podrían generar mapas de sitio de forma gratuita y todo lo que tiene que hacer es copiar y pegar ese archivo en el directorio /public, luego implementar el sitio. Esto se llama mapas de sitio estáticos, ya que no se crean nuevas páginas.

En HackerNoon , solíamos tener lo que se llama un mapa del sitio dinámico por implementación . Con este método, se crea un script en la fuente de la aplicación. Este script generará un archivo .xml con todas las páginas correspondientes que luego se actualizarán cuando la aplicación finalice el proceso de implementación. Este método está bien cuando no se crean muchas páginas nuevas (no se cumplen las demandas) y se realizan muchos cambios en el código. Sin embargo, este método puede aumentar el tiempo de implementación, ya que se ejecutará una secuencia de comandos adicional en la que se deben obtener todos los datos para producir el nuevo archivo .xml.

Desafortunadamente (o afortunadamente, depende de cómo se mire), las demandas de distribución de artículos de HackerNoon eran demasiado altas para que las manejara Dynamic Sitemap Per Deployment, ya que se crean nuevas páginas todo el tiempo en un gran volumen. Por lo tanto, se necesitaba una nueva iteración para solucionar el problema.

Investigué mucho sobre cómo indexar una página en el momento en que se crea, pero todos los recursos sugirieron el "método de secuencia de comandos". Fue entonces cuando, después de un tiempo, se me ocurrió tener un enrutamiento dinámico con un mapa del sitio dinámico. Esta resultó ser la solución, pero hay un poco más…

Dejame explicar:

Este método es muy similar al anterior pero tiene una implementación más compleja debido a la integración de una base de datos y un enrutamiento dinámico. Básicamente, le permitirá crear diferentes páginas de mapas de sitios de manera dinámica y distribuir cada página en el momento en que se crea.

Primero, usé una base de datos para almacenar todas las páginas de HackerNoon usando ganchos. Básicamente, cuando se crea un nuevo artículo, perfil, página acerca de, página etiquetada o página de la empresa, se ejecuta un gancho en el servidor donde se actualiza un montón de código, incluida la actualización de la base de datos del mapa del sitio. Encuentra un mapa del sitio disponible y luego genera la URL y la agrega a la base de datos. Los datos se dividen en diferentes rutas/slugs que es lo que les permite ser dinámicos.

En segundo lugar, gracias a NextJs y su enfoque con serverSiteProps y StaticProps, pude crear una nueva ruta/sitemaps y agregar enrutamiento dinámico con slugs/sitemaps/[slug]. El slug se crea en la base de datos y luego se obtiene mediante serverSideProps, que obtendrá los datos correspondientes indicados por el slug de la ruta. NextJS tiene un paquete (next-sitemap) que le permite representar contenido xml en cualquier ruta, por lo que lo usé para crear una nueva página con el contenido del mapa del sitio. Una vez que se representa el contenido del mapa del sitio, los motores de búsqueda lo recogerán.

Aquí hay un bloque de código de la implementación en el cliente:

 export async function getServerSideProps(ctx) { const {slug} = ctx.params; //get the slug of the route //make the api call to get the data, we are using firebase const sitemapPages = await db.collection("collection").where("slug", "==", slug).get(); let fields = []; if (!sitemapPages.empty) { sitemapPages.docs.forEach(doc => { // loop through each document gathered const {pages} = doc.data(); //get the pages of a document if (pages.length > 0) { fields = [...fields, ...JSON.parse(pages)]; //add the pages to fields } }); return getServerSideSitemap(ctx, fields); //fields is rendered in xml format } }

El reto:

El principal desafío con esta implementación fue la configuración de la base de datos. Ni siquiera sabía si mi enfoque iba a funcionar, pero valía la pena intentarlo ya que había muchos tickets/soporte técnico al respecto. Me requirió dibujar algunas bases de datos a mano y básicamente probar cada una y ver cuál iba a funcionar. Terminé usando un método inteligente que consiste básicamente en dividir las direcciones URL en un conjunto de 5000 por documento y darle un slug único hasta que suman unas 35 o 40 000 direcciones URL. Tener una carga útil más grande podría bloquear la solicitud del cliente, lo que no permitirá que se indexen las URL. Además, el motor de búsqueda de Google tiene un límite de 50 000 direcciones URL por mapa de sitio, por lo que calculo que 40 000 direcciones URL serán buenas para HackerNoon.

Gracias a esta implementación, tenemos 7 sitemaps diferentes con unas 40.000 páginas cada uno, y agregando nuevos automáticamente todos los días: https://hackernoon.com/sitemap.xml

Sitemap dinámico Conclusión:

Cuando comencé a trabajar en Hackernoon, el SEO era un tema que necesitaba algunas mejoras, y debido a que tenemos tantas páginas, pude implementar Dynamic Sitemap con NextJS y Firebase. Cada página que se crea en HackerNoon ahora está indexada por los motores de búsqueda sin esfuerzo. Mi objetivo era minimizar el trabajo manual (mapas del sitio por implementación) e implementar un método que funcione por sí solo. Consulte nuestro mapa del sitio dinámico: https://hackernoon.com/sitemap.xml