Páginas 404 personalizadas y soft 404: servir la página de error con el estado de error

Qué es

La documentación de solución de problemas de Google define un soft 404 como una URL que devuelve una página que indica al usuario que la página no existe, pero que a la vez devuelve un estado 200, y enumera causas como un archivo include ausente, una conexión a base de datos rota, una página de resultados de búsqueda vacía o un archivo JavaScript ausente; esas páginas quedan excluidas de la Búsqueda. La misma documentación recomienda devolver 404 o 410 para el contenido que ha desaparecido, y describe una buena página 404 personalizada como aquella que indica con claridad que la página no se encuentra, conserva el aspecto y la navegación del sitio, enlaza a páginas populares y a la página de inicio, y ofrece una forma de informar de un enlace roto. Su documentación sobre códigos de estado añade que el contenido de las respuestas 4xx no se utiliza y que una URL usada anteriormente que ahora devuelve 4xx se descarta con el tiempo, con una frecuencia de rastreo decreciente.

En el servidor, la directiva error_page de nginx define el URI que se muestra para determinados errores mediante una redirección interna, con el método cambiado a GET para las solicitudes que no son GET. La misma directiva puede cambiar el estado con =response; el propio ejemplo de la documentación, error_page 404 =200 /empty.gif;, muestra cómo un 404 se convierte en un 200. Las aplicaciones de una sola página que sirven index.html para cualquier ruta producen el mismo efecto por diseño.

Por qué importa

Un soft 404 desperdicia solicitudes de rastreo, mantiene URLs muertas en los índices, oculta enlaces rotos a la monitorización (todo es 200) y confunde a las herramientas que toman los códigos de estado como verdad. Un 404 real con una página desnuda del servidor, en cambio, pierde a quien visita el sitio.

Cómo aplicarlo

• Configurar la página de error (error_page 404 /404.html;) sin =200, y confirmar con curl -I https://example.com/no-such-page que la línea de estado dice 404 y que el cuerpo es la página propia.
• En las aplicaciones de una sola página, devolver 404 desde el servidor para las rutas que el router no conoce, o hacer que la aplicación renderice un estado de error y, cuando el framework lo permita, fijar el estado en la respuesta renderizada en el servidor.
• Hacer la página autocontenida: incrustar los estilos críticos en línea o referenciar los assets con huella (fingerprinted) por ruta absoluta, porque la URL que falla puede estar en un directorio profundo.
• Registrar los 404 con su referrer y revisarlos; los frecuentes merecen una redirección, el resto una corrección en la página que enlaza.
• Usar 410 para las eliminaciones deliberadas si se quiere declarar la permanencia; la pregunta abierta enlazada trata cómo los clientes lo interpretan.

Trampas

Redirigir todas las URL desconocidas a la página de inicio (un soft 404 con un 302). Páginas de error que cargan recursos por ruta relativa y se rompen en subdirectorios. Páginas de error que a su vez devuelven 404 para sus propios assets, o 500 porque una plantilla necesita datos que una solicitud de no encontrado no tiene.

Aplicaciones de una sola página sin tabla de rutas en el servidor

La mayoría de las aplicaciones de una sola página no pueden devolver 404 desde el servidor para rutas desconocidas, porque el servidor no dispone de la tabla de rutas y las rutas parametrizadas necesitan una consulta de datos. La documentación de Google sobre SEO para JavaScript ofrece dos alternativas que su rastreador respeta: redirigir desde JavaScript a una URL que el servidor responda con 404 (por ejemplo, /not-found), o añadir <meta name="robots" content="noindex"> al documento desde JavaScript cuando la aplicación determina que la página no existe. Ambas mantienen la página fuera del índice; ninguna de las dos ofrece un código de estado a la monitorización, así que conviene preferir el prerenderizado o la renderización en el servidor del estado de no encontrado con un 404 real allí donde el framework lo permita, y usar los métodos de JavaScript para el resto.