Cómo crear una página 404 personalizada

Cuando nos topamos con una página 404 nos suele generar frustración porque significa que el enlace al que queremos acceder está roto o la URL ya no existe. Esto suele ocurrir porque los sitios web están continuamente añadiendo y quitando páginas y es fácil que aparezcan algunos errores.

Los servidores están configurados para mostrar un mensaje (la famosa página 404) cada vez que un usuario intenta acceder a una página que no existe mostrando un mensaje automático y genérico. Así, los usuarios suelen marcharse de la web cuando no son capaces de encontrar lo que buscan, lo cual hace perder muchas visitas a una web.

Para ponerle remedio planteamos un método muy eficaz: Personalizar la página 404 para hacerla más atractiva para el usuario y, sobre todo, más funcional. Lo ideal es que mostremos información útil (como un botón para volver a la página de inicio) que nos ayude a mantener al usuario en nuestra web. Además, debemos tener en cuenta que los enlaces fallidos pueden afectar nuestro posicionamiento en buscadores, ya que los algoritmos de Google penalizan este tipo de errores.

 Cómo personalizar una página 404

Aunque existen muchas maneras de implementar una página 404, a continuación detallamos a grandes rasgos cuáles son las características que debería tener y cómo crearla dependiendo de la necesidad de cada marca:

• Un mensaje breve. Debemos tranquilizar al usuario, de manera que pondremos un mensaje en nuestra lengua y nos alejaremos de las típicas frases automatizadas.
• La misma apariencia que en el resto de la web. Además de pensar en mensajes e imágenes divertidas u originales, lo fundamental es que la página 404 vaya acorde con nuestra web.
• Enlaces hacia el sitio web. Además de un mensaje informando de que ha habido un error, debemos ofrecer un usuario alguna alternativa, como redirigirlo a la página de inicio de nuestra web o bien a una página popular de nuestro sitio.
• Página estática o dinámica. Debemos decidir si queremos que la página sea totalmente estática (mediante código HTML) o bien dinámica (usando algún lenguaje de programación como PHP o ASP). Si la página 404 es dinámica, se podrá mostrar de forma aleatoria en los productos o artículos que queramos. Para saber más, puedes echarle un vistazo a esta guía de Hostalia.
• Mejorar una página 404 que ya existe. En el caso de que usemos wordpress, veremos que ya existe una página 404 y en el caso de que queramos personalizarla tendremos que modificar el código.

Ejemplos originales para que el usuario no abandone nuestra página

A continuación mostramos algunos ejemplos de páginas 404 que algunos sitios web han implementado. Tan importante es un buen diseño, como la originalidad y la usabilidad:

Cómo evitar los errores 404

A pesar de que personalizar una página 404 pueda ser una oportunidad para sacar nuestro lado creativo, siempre es mejor evitar que surjan errores porque, como hemos comentado antes, pueden afectar a nuestro posicionamiento en buscadores. A continuación presentamos algunas herramientas para comprobar rápidamente que todos los enlaces de nuestro sitio web funcionen correctamente:

1. Check My Links es un plugin que busca todo tipo de errores en tu web, entre los que se encuentran los enlaces rotos. Esta herramienta encuentra todos los links de una página web, y los comprueba uno a uno.
2. Search Console de Google. Proporciona un informe de errores de rastreo de nuestro sitio web y nos ofrece detalles sobre las URL que Google no ha podido rastrear correctamente o que han devuelto un código de error HTTP.
3. Redirection. Se trata de un plugin de WordPress que permite redirigir enlaces (pasar una URL a otra página o sitio web) y evitar los errores 404. En el caso de que un día decidamos cambiar las páginas de nuestra web para modernizarla, es imprescindible redirigir todos los enlaces.

La clave para una buena experiencia de usuario

Ofrecer una buena experiencia de usuario implica que nuestra web esté pensada para que los clientes encuentren lo que buscan en el menor tiempo posible y que su paso por el sitio sea agradable. Ya no basta con hacer que una web sea atractiva, sino que la clave es ser detallista y hacer que el usuario se sienta importante. Por esta razón, y aunque parezca algo trivial, una página 404 personalizada da la sensación de que la web está más cuidada y es más usable. Si quieres saber más acerca de la experiencia de usuario y la analítica web, te recomendamos que eches un vistazo al Master UX de IEBS. Y si este artículo te ha resultado interesante, ¡No te olvides de compartir!