La descripción que nadie escribió

Bing Webmaster Tools marcó “las meta descripciones en muchas páginas son demasiado cortas.” Queja razonable, excepto que cuando de verdad fui a revisar, casi todas las páginas del sitio tenían una descripción específica y de buen tamaño. Posts de blog: 96-185 caracteres. Páginas de apps: parecido. Las únicas dos páginas que no la tenían eran la portada y el índice del blog, que resultan ser las dos páginas más visitadas de todo el sitio.

Ninguna de las dos había puesto nunca una prop description en <Layout>. Ambas caían en silencio al valor por defecto de todo el sitio: “Imperfect Systems - Creator of software, games, and music.” Cincuenta y cuatro caracteres. El fragmento de resultado de cada buscador para la portada, la página donde más gente aterriza primero, había sido la misma oración genérica desde que se lanzó el sitio.

Un arreglo fácil que duplicó su alcance en silencio

El issue tenía como alcance “portada e índice del blog,” en sus versiones singulares. Pero el trabajo de i18n de la portada (tres issues atrás, el mismo día) acababa de agregar las contrapartes en español de esas dos páginas. Mismos componentes, misma prop <Layout>, misma descripción faltante, solo que más nuevas, así que el issue que marcó este bug se abrió antes de que existieran las páginas que también necesitaba cubrir.

Esto se está volviendo un patrón al que hay que prestarle atención: el párrafo del footer que la pasada original de i18n se saltó. El propio logger de Astro sin una cláusula de guarda. Ahora una recomendación de Bing a la que le faltaba la mitad de su alcance real porque el código se movió entre el momento en que se generó la recomendación y el momento en que actué sobre ella. Ninguno de estos es un bug difícil. Todos son “el arreglo se definió contra una foto del código un poco desactualizada,” y el arreglo fue el mismo cada vez: no limitarse a parchear lo que dice el ticket, revisar primero si el mismo tipo de vacío existe en otro lado.

Lo que se agregó

La portada necesitaba texto nuevo, no había nada que reutilizar, así que recibió una descripción fresca en ui.ts, en los dos idiomas. El índice del blog fue distinto: ya tenía una cadena blogIndex.description, mostrada como subtítulo visible en la propia página, solo que nunca conectada a la meta etiqueta real. Reutilizarla significó que las palabras que lee un visitante y las palabras que indexa un buscador son ahora la misma oración, en vez de dos descripciones que con el tiempo podrían distanciarse en silencio. Es más corta que el rango “ideal” de 140-160 caracteres que prefiere Bing, pero es real, específica, y ya verdadera, mejor que una oración más larga inventada solo para llegar a un conteo de caracteres.

Resultados

Revisé las cuatro rutas, /, /es/, /blog/, /es/blog/, de dos formas: curl contra un build de producción, y una pestaña real de Chrome vía Playwright leyendo document.querySelector('meta[name="description"]').content directamente. Las cuatro muestran ahora su descripción real, no el valor genérico por defecto. og:description y la etiqueta de la tarjeta de Twitter también lo reciben gratis, porque están conectadas a la misma prop.

npm run a11y: 12/12, todavía 0 errores. Un cambio de meta etiqueta nunca iba a tocar la accesibilidad, pero la convención propia del proyecto es revisar de todas formas, y es lo bastante barato como para que saltárselo fuera solo superstición.