Páginas de Error Personalizadas: qué son y cómo crearlas

Las páginas de error en Internet son extremadamente comunes, y de seguro que la mayoría nos topamos con algunas a diario, así que todos las conocemos. Sin embargo, lo que no todo el mundo sabe es que estas páginas se pueden personalizar, para así evitar usar una página genérica. En esta oportunidad vamos a ver a fondo qué son las páginas de error personalizadas y cómo podemos crearlas.

¿Qué es una página de error?

Una página de error en un sitio web nos indica que hubo un error al intentar acceder, y dependiendo del tipo de error puede variar el mensaje que veremos. Algunos de los más comunes son el error 500, el Error 404 Not Found y el error 403, entre otros.

La página de error estándar no suele contener mucha información, simplemente indica el número del error y poco más. Esto ciertamente no es muy útil para el usuario, y de hecho puede sentirse como toparse con una pared, lo cual podría hacer que este visitante abandone nuestro sitio.

¿Cómo podemos entonces tener páginas de error que sean más amigables con el usuario? Pues para eso existen las páginas de error personalizadas, es decir, completamente hechas a medida en función de nuestras necesidades específicas y de lo que queramos mostrar al usuario.

Introducción a las páginas de error personalizadas

Como decíamos al comienzo, es normal casi a diario toparse con alguna página de error al navegar en Internet, pero eso no quita que pueda convertirse en una experiencia un poco frustrante, ya que la mayoría de páginas de este tipo simplemente indican un código de error en texto plano.

Lo bueno es que las páginas de error personalizadas están para salvarnos el día, de hecho son más que una simple mejora visual: tienen un papel muy importante en la experiencia de usuario, en nuestra marca e incluso en el SEO.

Cuando un usuario se topa con un error en un sitio, tener páginas de error personalizadas puede marcar una gran diferencia:

• Pueden impedir que el usuario se sienta frustrado, ya que seguramente contendrá un enlace a la página anterior o a la página de inicio del sitio, es decir, llevará al usuario de regreso al contenido en lugar de dejarlo a la deriva.
• Las páginas de error personalizadas sirven además para mejorar nuestra marca, haciendo que el aspecto y el estilo de nuestra web se mantengan, evitando usar una página genérica y vacía con un texto plano.
• Al ofrecer opciones de navegación al usuario estaremos contribuyendo a disminuir nuestra tasa de rebote, ya que si solo mostramos un mensaje de error sin más es posible que el visitante simplemente cierre la página y se vaya.

Como podemos ver, una página de error personalizada es estupenda, ya que transforma algo negativo en una oportunidad para que el usuario siga interactuando con nuestro sitio web.

En la captura de aquí abajo podemos ver un ejemplo de una típica página de error que ha sido creada a medida, en este caso es la página de error 404 que usamos en Infranetworking.

Páginas de error personalizadas más comunes

No todos los errores son iguales, por lo tanto no todas las páginas de error van a ser iguales. Los diferentes códigos de error que nos podemos topar en un sitio web aplican cada uno en situaciones puntuales.

Existen gran cantidad de códigos de error en sitios web, y si bien se pueden crear páginas personalizadas para cada uno de ellos, lo cierto es que la mayoría de los sitios que las implementas solo lo hacen para los errores más comunes:

• 404 Not Found: el error 404 se produce cuando un usuario intenta ingresar a una página que no existe. Puede que el usuario escribiera la URL incorrecta o siguiera un enlace incorrecto.
• 403 Forbidden: el error 403 indica que hubo un problema de privilegios o permisos para acceder. Puede que el usuario no tenga permisos para acceder a esa página o puede que algo en el servidor esté mal configurado.
• 500 Internal Server Error: el error 500 indica que hubo un problema a nivel del servidor, las causas pueden ser muchas y muy distintas entre sí, así que se considera un error muy genérico.
• 503 Service Unavailable: este error básicamente nos está diciendo que el servidor no pudo procesar nuestra solicitud, puede deberse a un problema en el server o a una ventana de mantenimiento.

Beneficios

Las páginas de error personalizadas pueden convertir una situación negativa en algo positivo, ya que si están bien diseñadas nos aportarán varios beneficios, incluso a nivel de SEO.

Este tipo de páginas ayudan a mejorar la experiencia del usuario. Mientras que una página estándar solo muestra un código de error, una personalizada puede mantener al usuario interactuando con nuestro sitio web, por ejemplo con un enlace para volver a la página anterior, o con un enlace hacia una página de contacto o hacia el index del sitio. Si además le damos un toque de humor a la página, ayudará a que la situación sea más llevadera.

Como decíamos también es útil para el SEO, ya que al tener enlaces internos es más posible que el usuario siga interactuando con nuestra web en lugar de retirarse de la misma.

Nuestra marca también se verá beneficiada, ya que una página de error personalizada estará hecha a medida con los colores y temáticas de nuestra marca, manteniendo el estilo del resto de nuestro sitio, contrario a una página de error estándar que simplemente tendrá un feo texto plano.

Adicionalmente, también puede que nos ayude a reducir la cantidad de soporte, ya que si un usuario tiene un error es posible que intente contactar al soporte del sitio, pero si la página ya lo guía a donde estaba o le ayuda de alguna forma se reducen las posibilidades de que solicite ayuda.

Elementos que no pueden faltar

A la hora de crear una página de error personalizada hay algunos elementos que no pueden faltar, veamos cuáles son:

• Explicaciones claras: es importante indicarle al usuario que algo salió mal sin recurrir a un lenguaje que sea muy técnico. Un mensaje del tipo “Ups, esta página no existe…” es mucho mejor que uno que diga “404 Not Found”.
• Opciones de navegación: en lugar de dejar al usuario a la deriva es importante incluir algunos enlaces útiles, como pueden ser por ejemplo para regresar a la página anterior, para ir al inicio del sitio, o para llegar a la página de contacto.
• Marca y diseño: como ya hemos dicho, es importante mantener el diseño alineado con el que usamos en el resto del sitio, esto ayudará a reforzar nuestra marca y hará que no se pierda el estilo. Usa los mismos colores, fuentes y elementos visuales para mantener una consistencia.
• Humor y creatividad: esto es opcional y depende del nicho de tu web, pero nunca está mal incluir un mensaje humorístico o algún elemento creativo en la página de error. Por ejemplo en una página 404 se puede incluir un astronauta perdido en el espacio, o en una página de error 500 se puede usar un técnico reparando un servidor, etc.
• Información de contacto: en algunas casos puede que la página de error denote un problema grave, y en una situación así es buena idea incluir información de contacto, como un número de teléfono, un enlace hacia un formulario de contacto o un enlace a la página de preguntas frecuentes (FAQs).

Cómo crear páginas de error personalizadas

Obviamente crear una página de error es una tarea que queda en manos de un programador y/o un diseñador web, pero si prefieres hacerlo por tu cuenta aquí te dejamos algunas ideas, solo ten presente que necesitarás algunos conocimientos de programación y diseño.

Por supuesto no existe una guía que sirva para todos los casos, ya que cada sitio tendrá sus propias páginas creadas en función de su nicho y diseño.

Primero recomendamos partir con un código HTML simple, por ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Página No Encontrada</title>
    <style>
        body { text-align: center; font-family: Arial, sans-serif; }
        h1 { color: #ff5555; }
        a { text-decoration: none; color: #007bff; }
    </style>
</head>
<body>
    <h1>Ups, está página no existe... (Error 404)</h1>
    <p>Esta página no existe. Quizá escribiste una dirección incorrecta o seguiste un enlace incorrecto. Haz click a continuación para volver a la <a href="/">página principal</a>.</p>
</body>
</html>

Puedes personalizarlo a tu gusto. El código del ejemplo tiene un mensaje sencillo y amigable para una página de error 404, e invita al usuario a volver a la página de inicio de tu web.

A continuación recomendamos añadir algunas ilustraciones, además del logo de tu web. Puedes crear ilustraciones en páginas como Canva o usando programas como GIMP o Photoshop. Recuerda usar colores que reflejen el diseño de tu sitio y mantengan la temática.

Si quieres hacer que la página sea más funcional, puedes incluir un código para insertar una barra de búsquedas, ejemplo:

<form action="/search" method="get">
     <input type="text" name="q" placeholder="Busca en nuestro sitio...">
     <button type="submit">Buscar</button>
</form>

Finalmente, recuerda añadir algo de personalidad en tus páginas de error personalizadas, por ejemplo una imagen de un desierto para indicar que el usuario está “perdido” (error 404), o un astronauta en el espacio puede cumplir la misma función. Un técnico atendiendo un problema puede ser útil para una página de error 500. Aquí toca usar un poco la imaginación, o también puedes inspirarte en los diseños usados por tu competencia o ver estos ejemplos de páginas de error seleccionados por Searchenginejournal.

Una vez tengas lista la página de error personalizada, no olvides probarla, simplemente la subes a tu web y la cargas en el navegador a ver cómo se ve.

¿Y cómo hay que hacer para activarla? Pues con simplemente subirla al servidor no basta, debemos asegurarnos que la página sea llamada cuando se produzca un error. Esto en realidad es muy sencillo, aunque dependerá del webserver que utilice nuestro servidor.

Si estamos utilizando Apache o LiteSpeed, podemos hacer la configuración directamente en nuestro archivo .htaccess, por ejemplo:

ErrorDocument 404 /404.html

En este ejemplo usamos la directiva ErrorDocument, de forma que al producirse un error 404 se llamará al archivo “404.html” que está en la raíz de nuestro sitio.

Si utilizamos Nginx podemos usar una configuración como esta en el bloque “server” de Nginx:

error_page 404 /404.html;
location = /404.html {
root /var/www/html;
}

En este ejemplo el archivo de la página personalizada se llama 404.html, y es llamado desde la raíz de nuestro sitio web, que en este caso se ubica en la ruta “/var/www/html”.

Tanto en Apache/LiteSpeed como en Nginx se pueden usar configuraciones similares para otros códigos de error, solo debemos indicar el código de error correcto (404, 403, 500, etc.) y el archivo correcto que se debe cargar, es decir la ruta al archivo de la página de error personalizada que hemos subido.

Conclusión

Las páginas de error personalizadas son una excelente forma de mejorar la experiencia del usuario y reforzar nuestra marca. En lugar de dejar a los visitantes con un simple código de error, podemos guiarlos de vuelta al contenido de nuestro sitio usando opciones de navegación claras, un diseño atractivo e incluso un toque de creatividad.

Estas páginas pueden ayudar a reducir la tasa de rebote y mejorar el SEO. Con una buena planificación y configuración, estaremos transformando un error en una oportunidad para que el usuario siga interactuando con nuestro sitio.