En esta artículo te explicaremos como darle estilo a tu página de error 404 y las buenas prácticas para optimizarla logrando así una buena experiencia de parte del usuario que se encuentra con esta página. 

Explicaremos ante todo:

  • Qué es una página de Error 404?
  • Cómo puedo personalizar mi página de Error 404?
  • Buenas prácticas sobre las páginas de Error 404

Qué es una página de Error 404?

La página de Error 404 es el archivo que tu servidor ejecuta o mejor dicho «muestra» al visitante cada vez que visita una sección de tu sitio que dejó de existir (enlace roto).

Cada vez que nos encontramos con un enlace que está «roto» el servidor ejecuta un html que suele tener la leyenda Not Found, Error 404

error404-not-found
Imagen que representa el error 404 en cualquier servidor

Perfecto! Ya sabemos que es el error 404 y cómo se ve está página o sección.

error404-not-found

Cómo puedo personalizar mi página de Error 404?

Cuando un usuario de tu sitio web se encuentra con un enlace roto normalmente cierra la ventana y se va!
Por eso es muy importante crear una página personalizada y para ello te daremos una serie de ideas.

Lo más importante es crear un archivo html de nombre 404.html y darle la misma estética que nuestro sitio web, asignarle el logo de la empresa y en lo posible alguna leyenda que diga «No se encuentra disponible lo que estás buscando» o como vemos en otros casos el famoso «Ops! Error 404! »

Todo depende de como le hables a tus visitantes, si usas un lenguaje informal o con cierta formalidad.

Además puedes insertar un buscador para que el usuario agregue el termino que esta buscando y así ofrecerle otros resultado sin que salga de nuestro sitio.
También puedes mostrar un mapa de sitio, un listado de categorías o una nube de etiquetas.
La intención es mantener al usuario dentro del sitio web.

Una vez que defines tu hermoso 404.html solo te queda informarle al servidor que muestre ese html en lugar del que muestra actualmente y para lograr esto debemos acceder al archivo .htaccess y agregar la siguiente línea

«errorDocument 404»:
errorDocument 404 /404.html

Si hacen click en Descargar este recurso se encontrarán con varios archivos en vectores gratuitos como los de la imagen para que editen sus errores 404.

Espero les haya servido este post!
Saludos