Veinte diseños originales de página 404 que puedes copiar en HTML y CSS, qué incluye una página 404 útil, ejemplos de tono y cómo asegurarte de que la página envía un estado 404 real en Next.js, Netlify, Vercel y más.
Una buena página 404 reconoce con palabras sencillas que la página no existe, mantiene tu navegación y ofrece una salida: un buscador, enlaces a páginas populares y una forma de avisar de un enlace roto. También debe enviar un código de estado 404 real, o los buscadores la tratarán como un soft 404. Abajo tienes 20 diseños para copiar.
Qué debe incluir una página 404
Cada diseño de abajo es HTML y CSS sencillo que puedes editar junto a una vista previa en vivo y luego pegar en tu propia página 404. Después de los diseños viene la parte que la mayoría de las galerías se saltan: hacer que el servidor envíe el código de estado correcto.
Una página que dice algo como no encontrado pero devuelve un estado 200 OK, o una página pobre que los buscadores consideran un error. Google los marca como soft 404 en Search Console y puede quitarlos de los resultados. La solución es devolver un estado 404 o 410 real para las páginas que no existen.
Los dos indican que la página no está, y Google dice que trata los errores 4xx de forma muy parecida. 410 Gone indica que la eliminación es permanente, lo que encaja con campañas retiradas y productos borrados. 404 sirve para la mayoría de los casos, sobre todo cuando no estás seguro.
No por sí mismos. Las páginas que faltan son algo normal en la web, y Google dice que los 404 de páginas que no deberían existir no perjudican al resto de tu sitio. El daño viene de los enlaces internos rotos, de perder enlaces que apuntaban a una página que borraste y de los soft 404.
La mayoría de las single-page apps reescriben todas las URLs a index.html para que pueda ejecutarse el router, lo que hace que el servidor responda 200 a todo. O bien prerenderizas las páginas reales y dejas que las rutas desconocidas caigan en un 404.html, o haces que tu servidor devuelva un estado 404 para las rutas que tu router no conoce.
Cada diseño es HTML y CSS autónomo. Edita el código y la vista previa se actualiza.
La base: mensaje, buscador y unos cuantos enlaces. Sirve para cualquier negocio.
Unos dígitos grandes con contorno dan a la página una forma potente sin imágenes.
El mensaje a la izquierda y una lista corta de páginas populares a la derecha. Se apila en los teléfonos.
Para sitios con tema oscuro. El resplandor suave mantiene el titular legible sin gritar.
Para tiendas online: convierte el callejón sin salida en un paseo por tres productos populares.
Un enlace mailto con el asunto ya escrito hace que avisar de un enlace roto sea un solo clic. Si puedes, añade la dirección de la página al cuerpo desde tu servidor.
Una señal de tráfico dibujada solo con CSS, así que no hay ninguna imagen que cargar.
Para documentación y sitios con mucho contenido, donde buscar es la forma más rápida de volver.
Para portafolios y sitios personales donde menos es más.
Lleva a los visitantes con hambre directamente al menú, las reservas y el número de teléfono.
Para oficios: el visitante probablemente quiere reservar un trabajo, así que muestra el número de teléfono.
Un titular colorido que encaja con marcas desenfadadas.
Para herramientas de desarrollo: una línea de comandos falsa con enlaces reales.
Dirige a los lectores a lo último publicado en lugar de a una página vacía.
Para software: los usuarios con sesión iniciada suelen encontrarse 404 desde marcadores antiguos, así que ofrece el panel.
Texto sobre una imagen a sangre con una capa oscura para dar contraste. Cambia la URL por la de tu propia foto.
Sugiere adónde suele ir la mayoría, pero nunca redirige, así que el estado sigue siendo 404.
Una tarjeta centrada sobre un fondo tintado, ideal para sitios modernos y limpios.
Para sitios bilingües, el mensaje en los dos idiomas con enlaces a cada página de inicio.
Para páginas que no van a volver. Combínala con un estado 410.
El diseño solo sirve si el servidor también dice 404. Así se hace en las configuraciones más comunes.
Se renderiza para las URLs desconocidas y cada vez que llamas a notFound(); Next.js envía un estado 404.
Ambos sirven un 404.html en la raíz de la carpeta publicada con un estado 404. Una reescritura comodín a index.html con estado 200 lo rompe.
Añade 404.html en la raíz de la fuente de publicación. GitHub Pages lo sirve con un estado 404.
Dirige las URLs inexistentes a tu página manteniendo el estado 404. Usa una ruta local, no una URL completa, o Apache hará una redirección.
La marca internal impide que alguien cargue /404.html directamente con un 200.
Añade el handler después de todas las demás rutas para que solo le lleguen las peticiones sin coincidencia.
Empieza gratis · Sin tarjeta de crédito