Cómo crear una Página Error Personalizada

Si tienes una web sabrás que cuesta sudor y lágrimas atraer a nuevos visitantes. Una vez que conseguimos que un usuario llegue a nuestra web queremos o deberíamos intentar darle la mejor experiencia posible.  Sin embargo, los errores 404 suelen ser un gran enemigo para lograr este objetivo. 

Siempre debemos hacer todo lo posible para evitar que se generen estos errores, no obstante hay situaciones muy habituales que pueden provocarlos: webs con miles de páginas, usuarios que escriben mal la URL, redirecciones erróneas…

Pero, ¿y si te dijese que los errores 404 también pueden jugar a tu favor?

Sí, como lees.

Crear una página de error 404 personalizada puede ser tu salvación ante enlaces rotos y URLs erróneas y te será de gran ayuda para no perder ese tráfico que tanto te ha costado conseguir.

En este artículo vas a ver cómo te puede ayudar una página 404 personalizada, cuales son las mejores prácticas para crearlas y algunos ejemplos para inspirarte.

¡Vamos allá!

¿Por qué es importante crear una página de Error 404 personalizada?

Hay muchas situaciones que pueden llevar a los odiosos errores 404. Algunos se pueden evitar. Otros no.

Que los errores 404 estén fuera de nuestro control no significa que no podamos hacer nada para proporcionar una experiencia positiva a nuestros visitantes. Por lo que deberás evitar a toda costa esta pantalla:

Sinceramente cada vez que me encuentro con una web que no ha trabajado su página 404 me da la sensación de que me están echando. Como si no quisieran que estuviese ahí. Ellos verán.

Por favor, no seas de esas personas y proporciona a tus usuarios una navegación sencilla. Estas son las ventajas que una página de error 404 personalizada puede proporcionar a tu sitio web:

• Evitar el rebote de los usuarios: Seguro que más de una vez has buscado algo en Google y tras hacer click en un resultado ¡sorpresa! Un error 404. No hace falta tener poderes adivinatorios para saber que posiblemente abandonases la página de forma inmediata. Una forma de evitar este comportamiento es incitar al usuario a la navegación dando opciones en su página de error 404. 
• Redirige el tráfico a zonas de tu web interesantes: Puedes utilizar las páginas 404 para conducir a los usuarios a páginas populares de tu web: artículos muy visitados, página de inicio, páginas concurridas, etc.
• Da una visión más profesional: Encontrarse con la típica página en blanco y negro de “Not Found” da la sensación de que la web no está trabajada e inspira poca confianza.
• Para dar la mejor experiencia al usuario posible: Una regla básica de la experiencia de usuario es dar control a los usuarios. Una página de error 404 personalizada le da opciones para redirigir su navegación y no quedarse estancado.
• Evita la salida de los usuarios al navegar por tu sitio: Ayuda a los usuarios a seguir navegando por tu sitio web a pesar de haber llegado a un error 404. Aumenta el tiempo en tu sitio y retrasa las salidas.
• Potencia tu imagen de marca: Una página 404 original y acorde a tus valores puede ayudarte a consolidar la imagen de marca en la que estás trabajando. Recuerda que los componentes de tu marca deben estar presentes en toda tu estrategia, incluidos los errores 404.
• Los errores 404 afectan al SEO y siempre hay que tratar de hacer las redirecciones necesarias o cambiar las URLs a nivel interno. Hay ocasiones en las que son inevitables pero aún así podemos usar las páginas de error 404 para linkear algunos de nuestras páginas más interesantes.

Cómo crear una página de error 404 genial

Ha llegado el momento de diseñar tu página 404 personalizada. Te aconsejo que antes de ponerte a construirla te pares un momento en planearla.

¿Qué quieres conseguir con tu página de error 404?

¿A dónde quieres dirigir tus usuarios?

¿Qué elementos visuales quieres incluir en esta página?

¿Cómo proporcionarás una buena experiencia en esta situación?

Empieza por definir qué quieres conseguir con página. Puedes orientar a tus usuarios a otros sitios de tu web o quizás quieras aprovechar la oportunidad para mostrar algunos de tus productos más populares.

Sí, así es, ninguna oportunidad es mala para vender 😉

¿Tienes una newsletter? Si tienes un blog y el usuario ha llegado a tu página de error tras leer algún artículo que le estaba interesado puedes aprovechar para tratar de alistarle en tu boletín.

También puedes darle algún incentivo para logearse en tu web o informarle sobre ofertas u novedades de tu tienda online.

Tras definir lo que quieres conseguir cuando el usuario llegue a la página de error piensa: ¿a qué lugares quiero dirigirle?

Puede ser que quieras volver a llevarle a la página de inicio y que comience de nuevo la navegación por tu web. Quizás puedas facilitarle un buscador para que encuentre más fácilmente la página de producto que estaba buscando. Otra posibilidad es que le ofrezcas un formulario para ofrecerle tu ayuda.

Sea cual sea la opción que elijas deber guiar al usuario a la acción a través de la composición de la página y de las llamadas a la acción. Te pongo mi Web como ejemplo. Mi página de error 404 explica qué ha pasado y ofrece la posibilidad de volver a la página de inicio con una llamada a la acción clara o seguir leyendo los artículos del blog.

El diseño de tu página 404 debe estar en armonía con el resto de tu sitio y con tu identidad de marca. De lo contrario el usuario se sentirá confundido y probablemente abandonará la página.

Por otra parte piensa qué mensaje quieres dar a tus usuarios. Si tu usuario llega a una página de error 404 tienes que hacerle saber qué es lo que ha pasado y cómo solucionarlo. Puedes hacerlo con un mensaje explicativo, pero no demasiado técnico.

Si tienes una web multiidioma cada página de error deberá estar en el idioma correspondiente. Tus usuarios no tienen porqué saber cómo se escribe error 404 en chino mandarín.

Cómo crear una página personalizada de error 404 en WordPress

Si utilizas WordPress hay varias opciones para crear páginas 404 y son bastantes fáciles.

Existen plugins que te ayudan a crear estas páginas de forma fácil y que se encargan directamente de realizar los cambios necesarios en el archivo .htaccess.

404page- your Smart custom 404 error page es el plugin más usado para redirigir errores 404 y es muy sencillo de utilizar. Solo tienes que diseñar previamente tu página de error y seleccionarla en en el desplegable que te muestro a continuación:

Otra opción es hacerlo a través de tu tema. Existen constructores y temas de WordPress tienen plantillas de 404.php personalizadas. Te enseño como configurar las páginas de error en Divi y Elementor.

Página de Error con Divi

Para configurar tu página de error con Divi simplemente debes ir a Divi>Generador de Temas. En esta pantalla pulsa “Agregar nueva plantilla” y en Otros pulsa “404 página” tal y como se muestra en la imagen:

Una vez hayas diseñado la cabecera, cuerpo y pie de tu página como lo harías en cualquier página con Divi, guarda los cambios. De esta manera ya se ha configurado que la página de error 404 muestre la plantilla que acabas de diseñar.

Más fácil imposible

Página de Error con Elementor

Construir una página de error personalizada con Elementor también es una tarea muy sencilla.

Ve a Plantillas>Theme Builder. Busca al final de la columna izquierda el apartado “Error 404” y pulsa en Add New o el icono de +.

Podrás crear tu diseño a partir de numerosas plantillas o construirlo tú mismo desde cero. Sea como sea recuerda que el diseño de tu página de Error 404 debe estar en armonía con el resto de páginas de tu web.

Cómo crear una página personalizada con código y .htaccess

Si no utilizas WordPress o eres de los temerarios que les gusta ir directo al código vamos a ver cómo configurar una página de error 404 mediante el archivo .htaccess.

Lo primero que debes hacer es crear tu página de error en php y posteriormente crear/editar tu archivo .htacess para hacer que cada vez que se produzca un error 404 en vez de ir a la página de error del servidor se redirija a la que has creado.

En tu archivo .htaccess vas a crear la siguiente regla:

ErrorDocument 404 https://tudominio.com/nombredetupágina404.php

Debes usar la dirección absoluta, no la relativa.

Ahora prueba a escribir una URL que no exista y debería devolverte la página de error.

Ejemplos de páginas de error 404 originales

Ya que has aprendido a configurar tu página de error 404 posiblemente estés escaso de ideas y necesites algo de inspiración para crear un diseño chulo y que aporte valor al usuario. Te pongo algunos ejemplos que me encantan:

El primero es el de Vilma Nuñez. En su Web página de error conserva sus elementos de marca que tanto la caracterizan, explica qué está ocurriendo y añade una llamada a la acción muy clara.

También invitan a los usuarios a ver algunos de los aparados de su web más populares.

Por otro lado tenemos el Ejemplo de Zara utilizando el minimalismo y sofisticación que les caracteriza. Aprovechan la página de error para seguir trabajando su imagen de marca e invitan a volver al inicio con una llamada a la acción bien clara.

Siguiendo con tiendas online de ropa nos encontramos con Zalando que invita a revisar el motivo del error e incentiva a visitar las categorías principales de su web para redirigir al usuario hacia las páginas que más se acerquen a la conversión en vez de redireccionarlos a la home.

Por otro lado tenemos la página de Error 404 de Renfe, una de mis favoritas en cuando a funcionalidad. A través del texto explica claramente qué ha pasado y añade un toque de humor. Añade un cuadro que permite al usuario iniciar su búsqueda de billetes desde la misma página de error. También incluye la posibilidad de ir al inicio.

La página de Kiwoko es tierna y divertida a partes iguales. Quita peso al error 404 de una forma graciosa. Añade un enlace visible que lleva a la home pero también invita al usuario de notificar el error en caso de que se encuentre con una cadena de errores 404. Un 10!

Si buscas algo más original puedes fijarte en la página de moderna de pueblo, que utiliza sus ilustraciones para indicar al usuario que está ante un error 404 y redireccionarlo a la home.

¡Enhorabuena! Has llegado al final del artículo y estoy segura de que ya tienes una idea bastante clara de cómo crear tu página de error 404 personalizada. ¿Tienes dudas? ¡Escríbeme por comentarios y te ayudaré encantada!