Apuesto a que te ha pasado: navegas por la web y al dar clic en una página, en vez de visualizar el contenido, aparece el mensaje «Error 404» o «404 page not found».

Esta situación es más común de lo que imaginas y perjudica tanto a los usuarios como a las empresas.

<< Descarga gratis 77 ejemplos de páginas principales, blogs y páginas de  destino excepcionales >> 

 

Aquí aprenderás qué es y cómo solucionarlo, tanto en la apariencia que da a los visitantes como en la configuración de tu sitio.

 

Cuál es el error 404

Identifícalo como una advertencia cuando intentas acceder a una página cuyo enlace está roto, fue eliminado, está mal escrito o, incluso, cambió de nombre. Mira este un ejemplo con un enlace mal escrito: https://blog.hubspot.es/marketingg.

De forma inmediata aparece una ventana con el mensaje «Even the things we love break sometimes» («Incluso las cosas que amamos pueden romperse»).

qué es el error 404 hubspot

Como puedes ver, en HubSpot creamos un mensaje de error 404 teniendo en cuenta el estilo de comunicación de la marca. Además, incluimos enlaces alternativos para que el usuario siga navegando en el sitio.

 

Cómo afecta el error 404

A pesar de que es una situación común, cuando se trata del sitio de tu empresa es algo muy frustrante, ya que los usuarios pueden irse muy rápido. Además, corres el riesgo de ser penalizado por Google, lo que tiene como consecuencia un impacto negativo en el posicionamiento.

El primer protocolo del buscador será interpretarlo como un error simple; si después de un tiempo el sitio no se restablece, lo marcará como eliminado y lo desvinculará. Después de un período, Google revisará de nuevo para verificar si permanece fuera de servicio.

Crea una solución paso a paso:

1. Detecta dónde ocurre el error 404 con una herramienta especializada

Antes de que aparezca cualquier error en tu sitio web, detecta si tienes algún enlace roto (o muchos). Descubrirlo a tiempo te dará la oportunidad de repararlo o eliminarlo.

Muchas veces el error 404 aparece porque el usuario escribió mal la URL; en caso de que el mensaje se repita, puedes usar estas herramientas que te ayudarán a saber cuáles son los enlaces dañados:

  • Screaming Frog SEO: la herramienta realiza un análisis de dominio y desglosa todos los enlaces que estén rotos. De esta forma, hallarás cuáles son los enlaces que debes reparar.
  • Google Search Console: este servicio ubica los códigos de error HTTP 404 automáticamente y, una vez reparados, se etiquetan como «corregidos». Es muy fácil de usar y solo debes ingresar con tu cuenta de Google.
  • Dead Link Checker: tiene el mismo funcionamiento que Google Search Console. El verificador es fácil de usar y es ideal cuando tu sitio está creado en Wordpress.
  • Broken Link Checker: úsala para mantenerte al tanto de los enlaces rotos que se produzcan en tu sitio; te envía notificaciones cada vez que encuentra un enlace roto y de esa forma podrás detectarlo antes que nadie.

Utiliza cualquiera de estas herramientas para detectar el error 404 not found y realiza inspecciones cada cierto tiempo para evitar que surjan imprevistos.

 

2. Disminuye el impacto del error 404 con una personalización del mensaje

Como ya viste, el mensaje de error 404 puede adaptarse de acuerdo con las características de tu público y el tono de tu marca

Con una personalización de tu mensaje, no solo evitarás que aparezca el mensaje estándar de Google, sino que mejorarás la experiencia de usuario ¡y hasta podrás hacerlo sonreír! Mira estas empresas que solucionaron el problema de una manera excelente.

 

Ejemplos de páginas de error 404 muy creativas

  • Lego

Su página de error 404 es bastante sencilla, pero al agregar a uno de sus personajes y representar a un técnico en sistemas, hace de este error algo agradable y afín a la imagen de la compañía.

Ejemplo de error 404: Lego


  • Spotify

La famosa plataforma de reproducción musical también sabe la importancia de tener una página personalizada.

Este diseño es sencillo y no requiere de elementos complicados para ser creativo. Únicamente informa del error y facilita la ayuda por medio de su sección de preguntas frecuentes.

Ejemplo error 404: spotify


  • Puremix

Si deseas que tu página de error 404 sea un poco más seria, hay diseños que cumplen ese requisito, sin verse aburridas.

Puremix optó por ofrecer enlaces alternos que te conectan con sus contenidos de blog más populares, lo cual les permite convertir este error en una oportunidad. Recuerda que esta técnica sirve para que el usuario no abandone tu sitio.

Ejemplo de error 404: puremix

 

  • Coca-Cola

No causa sorpresa que una de las marcas más famosas también creara una página original para enmendar una situación de error 404. Decidió no dar explicaciones, ni brindar enlaces alternos (tal vez confía en que el usuario volverá), pero su forma de presentarla es bastante singular.

Ejemplo de error 404: coca-cola journey

 

  • Airbnb

La tierna animación de la niña aminora el efecto negativo para el visitante. Esta empresa también utiliza varios enlaces a los cuales el usuario puede recurrir, tal como el de «Home», con el fin de que regrese a la página de inicio y continúe su navegación.

Ejemplo de error 404: airbnb

 

 

  • Facebook

Incluso la red social más popular utiliza una página de error 404 personalizada. Aunque es muy sencilla, el humor del «me gusta» lastimado sobresale.

 

Ejemplo de error 404: Facebook

 

 

  • Waza

La Asociación Mundial de Zoológicos y Acuarios cuenta con una página de error 404 muy divertida. Hace referencia a que el usuario está perdido y su imagen interactiva muestra a unos flamencos bastante confundidos. Para regresar a la página de inicio, el usuario solo debe hacer clic en el señalamiento de «Return to the website» («Regresa al sitio web»).

Ejemplo de error 404: waza

  • eharmony

La famosa página de citas, además de usar una imagen referente a su industria, ocupó la oportuna y divertida frase «Looks like this page is unavailable. Good news is there are half a million eharmony singles who are available» («Parece que esta página no está disponible. La buena noticia es que hay medio millón de solteros en eharmony que sí lo están»).

 

Ejemplo de error 404: eharmony

 

Ahora sabes que lo mejor es que des alternativas al usuario y reviertas el efecto de esta experiencia. Muestra tus contenidos más atractivos, incluye un buscador o agrega un video: ¡crea la solución idónea para tu marca!

 

3. Haz una redirección 301 

Es una de la soluciones más usadas y Google la aprueba. Consiste en insertar un código o un comando con el que diriges un sitio a otro permanentemente, así que la página anterior siempre llevará a la opción deseada.

Antes de realizar esta acción, asegúrate de que la nueva URL a la que se enlazará esté alineada en el mismo contexto de búsqueda. También verifica que el nuevo vínculo cumple con las visitas necesarias para posicionarse en Google. 

 

¿Cómo crear una redirección 301?

Puedes hacerlo manualmente o con un plugin. La segunda es la opción más sencilla y en WordPress es posible con Redirection. Lo único que debes hacer es asignar la nueva dirección en el campo que te indica y listo. 

A continuación verás cómo es la solución manual.

 

Cómo hacer la redirección 301 en .htaccess 
  1. Entra al sitio de tu proveedor de alojamiento web.
  2. Elige la opción «.htacess», que es el fichero de hipertextos, dentro de los archivos HTTP.
  3. Adapta el código: «Redirect 301 /página-anterior/ http://www.tudominio.com/nueva-página/».
  4. Agrega ese comando antes de la línea «BEGIN».
  5. Finalmente, guarda los cambios.

 

El desarrollo de tu sitio web debe ser adecuado en contenido y diseño, así como en estos aspectos técnicos que ofrecerán una mejor experiencia al usuario, incluso cuando hay imprevistos.

A pesar de que es una situación prácticamente imposible de evitar, si vigilas con frecuencia tus URL corregirás a tiempo los enlaces dañados. ¡No te frustres! Una página de error 404 puede ser la oportunidad perfecta para usar tu creatividad y, por qué no, algo de humor. 

 

Inspiración Web

 diseño web

Publicado originalmente en julio 5 2019, actualizado julio 05 2019

Topics:

Diseño Web