Es posible que aquí y allá hayas encontrado una página de error 404 mientras navegabas por la web. Estas páginas de error son causadas por varias razones y la mayoría de ellas están fuera de tu control.

Hay dos tipos de páginas de error 404: 404 genéricos y 404 personalizados.

Una página 404 personalizada ayuda de tres maneras:

  • Reduce la frustración del cliente
  • Ayuda a la marca y la vinculación a otras partes de la página web
  • En algunos casos, pueden incluso dar lugar a conversiones

Para todos aquellos que no saben qué son las páginas de error 404 y qué significa 404 personalizado, continúen leyendo para aclarar estos conceptos.

Vamos a resumir los conceptos básicos sobre el error 404 y aprender las mejores prácticas y consejos ilustrados con algunos ejemplos inspiradores:

¿Qué son las páginas de error 404?

Cuando una página que estás intentando abrir en un sitio web no se puede encontrar en el servidor web, te encuentras con página de error 404. Un error 404 es un código de respuesta del servidor que se clasifica en códigos de estado HTTP.

Sabrás que es una página de error 404 cuando veas los siguientes mensajes de error:

  • 404 No Encontrado
  • La URL solicitada no se encontró en este servidor.
  • HTTP 404 no encontrado
  • Error 404
  • No se puede encontrar la página

A continuación se muestran dos ejemplos comunes de mensajes de error genéricos 404.

Página 404 no encontrada

Página 404 común

Los errores 404 pueden ser causados ​​por varias razones, tales como:

  • La página solicitada no existe
  • El servidor está inactivo
  • La conexión a internet está inactiva
  • Enlaces rotos
  • URL incorrecta
  • La página se ha movido a una dirección diferente

Comprobador de página 404 personalizado

Puedes verificar que tus páginas devuelvan una página 404 personalizada y el estado HTTP 404 ejecutando un Informe gratuito de WooRank.

Revisión gratuita de WooRank

El informe de WooRank también verifica si hay enlaces rotos en tus páginas, además con una cuenta de WooRank puedes encontrar enlaces rotos internos utilizando Site Crawl.

WooRank Site Crawl

Páginas de error 404 personalizadas vs. genéricas

Las páginas genéricas de error 404, como puedes ver en la captura de pantalla de más arriba, generalmente no te indican qué hacer a continuación. Si dejar a los visitantes de tu sitio web sin mucho que hacer no es lo que deseas, debes considerar el uso de páginas 404 personalizadas.

Puedes verificar los enlaces rotos de tu sitio con esta herramienta y evitar los 404, pero no puedes evitar aquellos que ocurren debido a razones fuera de tu control.

Por lo tanto, tener una página 404 personalizada es imprescindible.

Cómo configurar una página 404 personalizada

Si se trata de un sitio codificado a mano, necesitarías la ayuda del diseñador de tu sitio web o del desarrollador del sitio web para configurar una página de error 404 personalizada.

Si tu sitio web se basa en un CMS (Sistema de gestión de contenido), probablemente puedas crear tu propia página de error 404. Simplemente sigue los pasos necesarios para crear una nueva página web en tu CMS.

La siguiente es una lista de enlaces a documentos que demuestran cómo crear una página 404 personalizada en los respectivos CMS:

Si utilizas cualquiera de los servicios comerciales de alojamiento web mencionados aquí encontrarás documentación sobre los respectivos servicios de alojamiento para personalizar tus 404. Incluso si encuentras documentación que dice personalizar .htacess, significa que es posible personalizar tus 404 en tu servidor web.

Ejemplos de páginas de error 404 personalizadas:

La mayoría de las empresas inteligentes personalizan sus páginas 404 para que el usuario tenga una variedad de opciones para volver a una página en particular en el sitio web, como una barra de búsqueda, enlaces de pie de página a páginas populares del sitio, una barra de navegación similar a la del sitio o un simple enlace a la página de inicio. Y existen aquellas empresas que hacen de sus 404 personalizados una oportunidad de venta, agregando un enlace de suscripción o pidiendo descargar un libro electrónico gratuito.

Puedes adoptar la estrategia simple de 'guiar al usuario' o mejorarla utilizando una estrategia de ventas en tus 404 personalizadas, dependiendo de qué tan seguro estés del comportamiento de usuario.

Resumamos rápidamente algunas de estas mejores prácticas. Se enumeran a continuación:

  • Agrega un toque de humor
  • Enlaces a páginas populares
  • Barra de búsqueda
  • Texto que simpatiza con los visitantes y los guía
  • Proporciona detalles de contacto
  • Enlaces de encabezado y pie de página del sitio web principal
  • Mantén el tema de tu marca en la página 404 personalizada
  • Permitir informar un problema (opcional)
  • Agregar un juego (opcional)
  • Agregar un video (opcional)
  • Agregar botones de llamada a la acción (opcional)

Hoy en día, algunos webmasters aplican un redireccionamiento 301 desde una página de error 404, por lo que aterrizan en el sitio visitante automáticamente a la página de inicio, cuando se escribe una URL incorrecta. Esto podría confundir y frustrar a los usuarios. Por lo tanto, es mejor llevar a los usuarios a una página 404 personalizada para que sepan que el enlace que una vez marcaron en favoritos o recordaron ya no funciona.

Echemos un vistazo a algunos ejemplos inspiradores de 404 personalizadas.

Ejemplo # 1 - AirBnb

Página Airbnb 404

Aquí hay un buen ejemplo para comenzar. Airbnb ha creado un gif divertido, además de proporcionar una página útil que ayuda a los usuarios a retomar el camino.

Conclusiones de la página 404 personalizada de Airbnb:

  • Enlaces de encabezado y pie de página: esta página 404 se ajusta a la plantilla del sitio web, por lo que se incluyen los enlaces de encabezado y pie de página, con la barra de búsqueda y los enlaces de inicio de sesión / registro en la parte superior, y principal páginas / enlaces sociales en la parte inferior.

  • Enlaces útiles a páginas populares también se incluyen dentro del cuerpo de la página.

  • Se proporciona el código de error, con una explicación de la causa del error.

Ejemplo #2 - Agens

Página 404 personalizada de Agens

Conclusiones de la página 404 personalizada de Agens:

  • Enlaces de encabezado y pie de página: La marca de la página es coherente con el sitio web principal con enlaces de encabezado y pie de página

  • Detalles de contacto: Se pueden incluir detalles de contacto como número de teléfono, correo electrónico, enlaces a páginas de redes sociales y enlaces a la página de Nosotros.

  • Creatividad: una representación creativa de 404 en la bandera y un astronauta triste y perdido agrega un toque de humor, como se muestra en este ejemplo.

  • Empatizar y guiar al usuario: empatiza con el usuario y ayúdalo aún más, proporcionando un enlace a tus proyectos antiguos (si los hay) o proyectos recientes, como en este caso, donde dice "Tal vez estabas buscando uno de nuestros proyectos recientes (enlace), o quizás uno antiguo (enlace)?".

Página 404 personalizada de iFolderLinks

Conclusiones de la página 404 personalizada de iFolderLinks:

  • Humor: agrega un toque de humor con una foto de un bebé llorando.

  • Prominencia del 404: Menciona de manera destacada que es una página de error 404.

  • Causas de 404: enumera las razones por las que el usuario podría haber aterrizado aquí.

  • Ofrece soluciones rápidas: enumera varias formas de rectificar el problema

  • Opción para informar problemas: brinda una opción para informar el problema en tu sitio. Puedes hacerlo ofreciendo un pequeño formulario de contacto o un enlace a tu página de contacto. También puedes proporcionar tu dirección de correo electrónico. Esto te brinda información de primera mano sobre tus enlaces rotos de parte de tus usuarios y también la oportunidad de establecer una relación con el usuario por correo electrónico.

Ejemplo #4 - GitHub

Página 404 personalizada de GitHub

Conclusiones de la página 404 personalizada de GitHub:

  • Atrae la atención con un telón de fondo popular: incluso si el tema personalizado de la página 404 no coincide con el tema principal del sitio web, podrías capturar un tema o una escena de una película popular para atraer la atención. En este caso, se usa el tema de Star Wars que se mueve al pasar el mouse sobre él.

  • Usa una mascota de la marca: se puede usar una mascota para enfatizar la marca de tu página 404 personalizada. Curiosamente, en este caso, la mascota (octocat) no se utiliza en ningún lugar del sitio web principal, excepto en los favicons y en la página 404 personalizada.

  • Opción de inicio de sesión: proporciona una opción de inicio de sesión en la página de errores para eliminar los errores que ocurrieron porque los usuarios no iniciaron sesión.

  • Barra de búsqueda: proporciona una barra de búsqueda destacada y describe lo que se puede encontrar en ella, como en este caso dice "Buscar código, proyectos y personas en GitHub".

  • Enlaces de redes sociales: brinda enlaces a soporte, página de marca social (un identificador de Twitter en este caso) y una página que ofrece actualizaciones del sitio, en este caso, el estado de GitHub.

Ejemplo #5 - Heinz

Página 404 personalizada de Heinz

Conclusiones de la página 404 personalizada de Heinz:

  • Menú de navegación: El menú de navegación debe mantenerse consistente con el sitio web principal.

  • Barra de búsqueda: incluye la opción de búsqueda.

  • Enlaces a páginas populares: proporciona una variedad de enlaces ordenados a páginas populares.

  • Guía de visitantes: explica en un lenguaje simple y sencillo cómo los usuarios pueden aprovechar al máximo todas las opciones disponibles en esta página.

En este ejemplo, la página 404 personalizada de Heinz dice ¿Intentaste buscar? Ingresa una(s) palabra(s) clave(s) en el campo de búsqueda anterior o prueba uno de los enlaces a continuación.

Ejemplo #6 - iPlanWebsites.com

IPlanWebsites 404 page

Conclusiones de la página 404 personalizada de iPlanWebsites:

  • Agregar usuarios de curiosidad e intriga: no hay mucho que sacar de este ejemplo, excepto si puedes intrigar a tus visitantes, creando curiosidad por unos segundos.

Lo más probable es que una página 404 personalizada simple pero ingeniosa, como esta, pueda circular entre los amigos de los visitantes. Esto a su vez puede ayudar en el marketing boca a boca de tu marca.

Ejemplo #7 - VisitSteve

Página VisitSteve 404

Usa videos: Usa tus propios videos en una página 404 en lugar de un texto aburrido puede ayudar a capturar la atención de tu visitante perdido en el sitio.

En este caso, el propietario del sitio web se presenta en un video extraño. Su audiencia podría encontrarlo divertido y realmente único que les haría recordar este sitio a la larga o incluso compartirlo en las redes sociales. Si deseas tener una página 404 personalizada distinta, esta debería ser una pista.

Ejemplo #8 - BlueFountainMedia

Página BlueFountainMedia 404

*Conclusiones de la página 404 personalizada de BlueFountainMedia: *

  • Agrega un juego: anime a los visitantes perdidos de tu sitio.

La página de error 404 personalizada de BlueFountainMedia es mi favorita. Hace un trabajo brillante al agregar un juego de Pacman bien diseñado a una página 404 personalizada que contiene todos los demás elementos necesarios, como el tema del sitio web, enlaces de navegación, enlaces de pie de página, botón de solicitar cotización y botones de llamada a la acción para registrarse y más. Están seguros de ganar algunos fanáticos jóvenes que pueden escribir una o dos palabras sobre esta página en sus perfiles de redes sociales.

Ejemplo #9 -Imgur.com

¡Página Imgur 404

Conclusiones de la página 404 personalizada de Imgur:

Esta página 404 incluye algunos retratos divertidos de animales vestidos con ropa de hace unos cientos de años. Notarás que los ojos en las pinturas siguen tu cursor mientras lo mueves por la página.

El texto es útil, ya que ayuda a responder la razón del error, con un enlace para ayudar a los usuarios a volver a la normalidad.

Ejemplo #10 - HootSuite

Página HootSuite 404

Conclusiones de la página 404 personalizada de HootSuite:

  • Divertida representación de la mascota de la marca desaparecida en un cartón de leche.
  • Razones de un 404 listadas para el usuario.
  • Enlace a la página de inicio.

Ejemplo #11 - iContact

Página icontact 404

Conclusiones de la página 404 personalizada de iContact:

  • Mensaje divertido al estilo de la clásica línea No soy tú, soy yo
  • Enlace para ayudar a los usuarios a resaltar problemas cuando se esperaban una página determinada.
  • Enlaces de encabezado.
  • Enlaces de pie de página a las páginas principales del sitio web.
  • Enlaces a canales de redes sociales y número de teléfono de contacto.

Ejemplo #12 - PetFinder

Página petfinder 404

Conclusiones de la página 404 personalizada de PetFinder:

  • El tema principal del sitio web se mantiene intacto con todos los enlaces y barras de búsqueda de la barra de menú original.
  • Anuncio colocado a la derecha.
  • Enlace a la página de inicio y Contáctenos junto al texto de error 404 y la imagen de la mascota.

Ejemplo #13 - Jhuskisson

Página jhuskisson 404

Conclusiones de la página 404 personalizada de Jamie Huskisson:

  • Enlaces a páginas de redes sociales y RSS.
  • Enlace al archivo de publicación.
  • Menú principal de navegación del sitio principal.

Ejemplo #14 - PoemOfQuotes

Página PoemOfQuotes 404

Conclusiones de la página 404 personalizada de PoemOfQuotes:

  • Mensaje de error 404 en forma de poema creativo.
  • Enlaces a páginas populares en el sitio en la parte inferior de la página.

Ejemplo #15 - ExpansionBroadcast

Página de Expansion Broadcast 404

Conclusiones de la página 404 personalizada de ExpansionBroadcast:

  • Enlaces de encabezado y pie de página retenidos del sitio principal.
  • Formulario de contacto proporcionado.

Ejemplo #16 - CSSLeak

Página CSS Leak 404

Conclusiones de la página 404 personalizada de CSS Leak:

  • Enlaces de encabezado y pie de página del tema principal del sitio web.
  • El texto 404 invita a los usuarios a navegar por los artículos de noticias de diseño que se encuentran a continuación con imágenes en miniatura.

Ejemplo #17 - HomeStarRunner

Página HomeStarRunner 404

Animación utilizada para agregar un toque de humor. No hay texto o video guía para el usuario, sin embargo, esta animación hace que el error 404 sea alegre y memorable.

Ejemplo #18 - BlueDaniel

Página BlueDaniel 404

Conclusiones de la página 404 personalizada de BlueDaniel:

  • Animación genial de tránsito de metro y tableros de texto circundantes que dicen que estás perdido. El viaje continúa cuando haces clic dentro del tren...
  • Enlaces a la página de inicio.
  • Detalles del tipo de error

Ejemplo #19 - MailChimp

Página MailChimp 404

Conclusiones de la página 404 personalizada de MailChimp:

  • El uso creativo de la mascota de la marca para transmitirla es una página 404.
  • Barra de búsqueda y enlaces de navegación del encabezado.

Ejemplo #20 - ApartmentHomeLiving

Página 404 de ApartmentHomeLiving

Conclusiones de la página 404 personalizada de ApartmentHomeLiving:

  • Enlaces de encabezado y pie de página del sitio web principal.
  • Una imagen misteriosa de la oveja que aparece al pasar el mouse sobre el centro, intriga al usuario transmitiendo que algo está mal.
  • Enlace a la página de inicio.

Ejemplo #21 - EternalMoon

Página EternalMoon 404

Conclusiones de la página 404 personalizada de EternalMoon:

  • Representación dramática de una página web robada con un personaje animado ficticio.
  • Enlaces para informar el error y la página de inicio.

Ejemplo #22 - ShelfWorthy

Página 404 de Shelfworthy

Conclusiones de la página 404 personalizada de Shelfworthy:

  • Encabezado (barra de búsqueda) y enlaces de pie de página del sitio web principal retenido.
  • Animación colorida que transmite el mensaje de error 404 de una manera divertida.
  • Botón de llamada a la acción que lleva a la página de inicio.

Ejemplo #23 - Club Penguin

Página ClubPenguin 404

Conclusiones de la página 404 personalizada de ClubPenguin:

  • Representa a la mascota de la marca con una expresión perdida y una brújula rota sin dirección. Es una representación ingeniosa del 404.
  • Se conservan los enlaces de encabezado y pie de página del sitio web principal.
  • Botón de llamada a la acción que lleva al usuario a la página de inicio.
  • Llamado a la acción "Juega ahora" como en el resto de las páginas del sitio web, que invita al usuario perdido a jugar.

Ejemplo #24 - Twingly

Página Twingly 404

Conclusiones de la página 404 personalizada de Twingly:

  • Divertida imagen de un ninja de Google
  • Mensaje de error divertido con detalles del código de error
  • Correo electrónico de soporte proporcionado.

Ejemplo #25 - Mutacao

Página de Mutacao 404

Conclusiones de la página 404 personalizada de Mutacao:

  • Mascota de marca vestida como un trabajador de la construcción, el transporte de la página está en reparación.
  • Razones del 404 en la lista.
  • Enlaces de encabezado y pie de página del sitio web principal.

Ejemplo #26 - Dropbox

Página Dropbox 404

Conclusiones de la página 404 personalizada de Dropbox:

  • Una imagen desconcertante del icono de Dropbox transmite que algo está mal.
  • Se proporcionan enlaces al centro de ayuda, foro y página de inicio.

Ejemplo #27 - LimpFish

Página LimpFish 404

Conclusiones de la página 404 personalizada de LimpFish:

  • Representación divertida de la página 404 que no se encuentra en forma de anuncio SE BUSCA.
  • Enlaces al sitio web principal y sitios hermanos.

Ejemplo #28 -Jabong

Página de Jabong 404

Conclusiones de la página 404 personalizada de Jabong:

  • Encabezado y pie de página del sitio principal.
  • Opción de búsqueda.
  • Categorías de productos proporcionadas para usuarios con imágenes en miniatura de los productos.

Ejemplo #29 - Nosh

Página Nosh 404

Conclusiones de la página 404 personalizada de Nosh:

  • En realidad, crearon una mini película en su página 404 y la subieron a YouTube y la incrustaron en su página de error 404 personalizada. Lo más probable es que las personas también estén vinculadas a su video de YouTube o esta página a través de las redes sociales.
  • Botón de llamada a la acción para unirse ahora en la parte superior del video.
  • Enlaces de pie de página del sitio web principal retenido.

Ejemplo #30 -NotFound.org

No se encontró la página 404

Conclusiones de la página 404 personalizada de NotFound:

NotFound.org es una gran iniciativa que quiere hacer un mejor uso de las páginas de error 404. Esta iniciativa ha descubierto una forma de utilizar el espacio en la web que no se estaba utilizando y convertirlo en algo útil: crear conciencia sobre los niños desaparecidos. Si deseas unirte a esta iniciativa, sigue las instrucciones que encontrarás en su sitio web.

Ejemplo #31 - BrandCrowd

Página 404 de BrandCrowd

Conclusiones de la página 404 personalizada de BrandCrowd:

  • Enlaces de encabezado y pie de página del sitio principal.
  • No hay área en la que se pueda hacer clic en el diseño a lápiz.
  • Texto entendible.

Ejemplo #32 - Hakim

Página Hakim 404

Conclusiones de la página 404 de Hakim:

  • Los ojos espeluznantes que siguen el cursor, donde quiera que vaya, parecen ser un toque innovador para un 404 personalizado
  • Enlaces a la opción de búsqueda y página de inicio.

Ejemplo #33 - Mattel

Página Mattel 404

Conclusiones de la página 404 personalizada de Mattel:

  • Página interactiva con una bola de ocho mágica que te da un mensaje diferente cada vez que haces clic en él.
  • Botón de enlaces a la página de inicio, opción de búsqueda y enlace al sitio de la tienda.
  • Botón de enlaces a páginas populares en la parte superior e inferior. Los enlaces principales son diferentes de los que se ven en el sitio web principal.

Ejemplo #34 - eHarmony

Página 404 de eHarmony

Conclusiones de la página 404 de eHarmony:

  • Bonita representación gráfica de 404 de un corazón roto reparado con una curita.
  • Llamado a la acción para unirse al sitio o iniciar sesión para los usuarios existentes.

Ejemplo #35 -Modcloth

Página Modcloth 404

Conclusiones de la página 404 de Modcloth:

  • Winston el pug de Modcloth, que generalmente se usa en muchos otros lugares del sitio, da una expresión confusa en su 404 personalizada y está vestido de forma inapropiada. La página de error 404 personalizada utiliza un atuendo fuera de lugar para Winston como una analogía con la página no encontrada.
  • Botón de enlaces a páginas importantes en el sitio.
  • Enlaces de encabezado y pie de página del sitio principal.

Ejemplo #36 - BetaBrand

BetaBrand

Conclusiones de la página 404 de BetaBrand:

  • Se conservan los enlaces de encabezado y pie de página del sitio principal.
  • Imágenes de productos seleccionados junto con información de precios y descuentos mostrados.
  • Cuando se pasa el mouse sobre estas imágenes, puede ver cuántos me gusta obtuvo o cuántas veces fue compartida en sitios de redes sociales.
  • Esta página de error 404 personalizada intenta mantener al visitante perdido comprometido con las recomendaciones del producto.

Estos fueron los ejemplos personalizados de la página de error 404 que he encontrado realmente inspiradores. Espero que estos ejemplos también te inspiren a crear excelentes páginas 404 personalizadas para tu propio sitio. Todo lo que necesitas recordar es que sea alegre, hacer que tus usuarios se sientan como en casa, incluso si usan URLs incorrectas en tu sitio web y guiar a tus visitantes en la dirección correcta dentro de su sitio web.

Háznos saber en los comentarios cómo se ve tu página de error 404. ¿Es genérica o está personalizada?