hand Inicio
hand JSBloqs
hand GutenBloqs

Tu peor pesadilla? Los trailing slashes de Gatsby y los redirect de Netlify, y Google se pone agresivo

Generar páginas con slashes, quitarselos, para que luego Netlify te redirija hacia la versión con los slashes es un desastre, pero puedes corregirlo en Netlify con Prettifier

Trailing Slashes

Qué pasa con Gatsby y los trailing slashes?

Diferencias entre www.gilberto.com/mis_servicios y www.gilberto.com/mis_servicios/? Si te fijas verás el último / slash en la segunda versión

Ese slash lo pone Gatsby (www.gilberto.com seguro que está hecho con Gatsby), y se genera bien programáticamente o bien a partir del archivo mis_servicios.js (o incluso mis_servicios.mdx)

Pero puede no gustarnos eso

A mi no me gusta, parece que apuntes a un directorio con lo que prefiero quitarlos, algo que puedes hacer en Gatsby sin demasiados problemas

Luego te vas a tu Chrome Developer Tools o si no quieres te vas a www.redirect-checker.org y pones allí tu url sin slash y ... ves que no tienes un 200 sino una respuesta 301, que quiere decir una redirección

🔥🔥🔥🔥🔥

Luego ves que la página sin slash se ha redirigido a la versión con slash que sí que devuelve el 200 que tanto te gusta

Problemas?

Sí, al menos 2

  1. Esa redirección no es gratis, 200-300 ms como poco, y hasta 1 segundo extra de espera inútil con malas conexiones

Adiós experiencia de usuario, adiós SEO (Google nos penaliza), etc etc

  1. Google ahora tiene dos versiones de la misma página, pero es que además todo tu website apunta a las páginas sin slash, todo tu tráfico va a las páginas sin slash y por lo tanto todas se redirigen

Ahora ves a la Google Search Console y fíjate en cuantos errores por redirect tienes

Espectacular

Y Google no está contenta con esta duplicidad, no está nada contenta

Un desastre, vamos

Netlify

Esto pasa en bastantes servidores de páginas estáticas, pero aquí te hablo de Netlify

Netlify en teoria no hace estas redirecciones, puedes ver su documentación aquí

PERO, incluyen una función para añadir esos slashes, por si esto es lo que quieres

En mi caso esto no es lo que quería

Pero el problema viene de aquí Netlify -> Site -> Deploy -> Post processing -> Asset optimization

image

Esto es lo que te encuentras, que en teoría tienes las optimizaciones desactivadas, pero que en gris aparecen todas activadas

Esto es un error (no le veo la lógica), y en realidad lo que está pasando es que sí se te aplican esas "optimizaciones", incluida la primera, la Pretty URLs

Bien, pues simplemente desactivando la global y desmarcando la primera (al menos esa, la Pretty URLs) ya evitamos que se añada la trailing slash, que se redirija el tráfico, que Google se ponga agresivo, y conseguimos que el equilibrio vuelva a la fuerza

Así

image

Y Google vuelve a sonreír

draw of me

Hola, tienes en mente desarrollar una web?

Si quieres, te ayudo

11ty para webs ultra-rápidaseleventy js
Gatsby para webs complejasgatsby js
WordPress para webs para el usuario finalwordpress

Escríbeme

Lista de correo: escribo algo de tanto en cuanto