P√°gina 404 personalizada

Por: Israel
Publicado el: 6 Sep 2021
Comentarios: 0
Categor√≠as: Dise√Īo web

Introducción

Seguramente te ha pasado lo mismo, est√°s navegando por una web y de golpe te topas con el famoso ‚ÄúError 404‚ÄĚ y te preguntas‚Ķ ¬ŅQu√© he roto? Pero nada m√°s lejos, por ello quiero contarte porqu√© es interesante tener una p√°gina 404 personalizada.

general ES general hosting leaderboard light
e956764e5c11e1d3f05c53508134010c?s=96&d=mm&r=g
Israel Cabrera
Cofundador de Tresmer Profesional y El arte de la web. Enamorado de la tecnología y de las cosas bien hechas.

¬ŅQu√© es una p√°gina 404?

Es una página que se muestra cuando un usuario accede a tu web y termina en una sección o URL que no existe. En ese preciso momento el servidor devuelve el código de error 404 y el navegador lo interpreta como página no encontrada o Not found, ya que es lo que le indica dicho código de error. Básicamente, muestra que se trata de un enlace roto o que ya no existe y, por tanto, no es posible acceder a él.

Error web

¬ŅPor qu√© personalizar la p√°gina 404?

La respuesta técnica es que por posicionamiento SEO, ya que tener enlaces rotos en tu web no te va a ayudar en este sentido.

La respuesta no técnica, da mala imagen, de web descuidada y personalmente opino que sienta bastante mal navegar por Internet y al acceder a un link que te había resultado interesante… ¡ZAS! La página no existe.

Otro aspecto que también penaliza, ya que la experiencia de usuario en la web será mala cuando se encuentren un 404 y automáticamente abandonen la web.

En lo que a ventajas se refiere, el uso de p√°ginas 404 personalizadas genera confianza a los usuarios, favoreciendo el acceso a otros contenidos que pueden resultar √ļtiles y, por tanto, mejorando la experiencia de usuario. Todo ello sin contar con que has evitado que abandone tu web y lo puedes redirigir al visitante hacia otros productos o servicios, generando engagement.

NOTA: El engagement es el compromiso de la marca para con sus visitantes y seg√ļn los nuevos par√°metros y Google lo tiene en cuenta de cara al posicionamiento.

Usuario con error 404

Elementos de una p√°gina 404

Hay mil maneras de personalizar la página 404 de tu web, pero a continuación te dejo varios aspectos sobre los que trabajar y tener una buena base para ayudar a que el visitante retenga en su memoria la imagen que le hemos dado. Partiendo de la sencillez puedes cuidar los siguientes aspectos:

  1. Dise√Īo. Para obvio, pero es importante que el dise√Īo de esta p√°gina guarde una coherencia con la apariencia del resto de la web, cuidando la fuente utilizada, colores, etc.
  2. Botón a Inicio. Una de las maneras más sencillas de dirigir el tráfico y así no perderlo. Con un simple botón que lleve al visitante a la página de Inicio de la web, ayudas a que el usuario siempre tenga a su disposición un sitio al que volver y, por tanto, no salga del sitio web.
  3. Buscador. Se puede a√Īadir en cualquier tipo de p√°gina web, pero personalmente opino que resulta especialmente √ļtil para tiendas online. De esta manera, cuando un cliente se encuentre con un error 404, tendr√° disponible el correspondiente buscador para seguir comprando productos y que no abandone la p√°gina.
  4. Formulario de Contacto. Otra manera original de no perder la visita de usuarios. Si realmente tiene interés en los productos/servicios ofertados en la página, con un formulario de contacto tendrá acceso a resolver las dudas que le puedan surgir.
  5. Informaci√≥n importante. Desde un breve ¬ęSobre Nosotros¬Ľ hasta informaci√≥n de contacto o ubicaci√≥n de manera que puedas redirigir al usuario y no pierdas su visita.
  6. Contenido atractivo y textos ingeniosos. Para mi uno de los puntos m√°s importantes, ya que proporciona la capacidad de eliminar la sensaci√≥n tan desagradable del llamado ‚ÄúError‚ÄĚ. Adem√°s, con un texto original, tu web ser√° m√°s f√°cil de recordar al convertir el error 404 en una an√©cdota, de hecho, hay webs que incluso integran alg√ļn minijuego.

Aquí puedes ver un sencillo ejemplo de página 404 personalizada.

P√°gina 404 personalizada

¬ŅC√≥mo saber si mi web tiene errores 404?

Existen muchos métodos para identificar este tipo de errores, pero te voy a enumerar los que personalmente me gustan más, utilizando herramientas gratuitas.

  • W3C Link Checker ‚Äď Se trata de una herramienta para detectar enlaces rotos en tu web facilitada por el famoso W3C que se encarga de que el mundo web respete unas reglas b√°sicas para que todo funcione como es debido.

  • Google Search Console ‚Äď Seguramente ya lo conozcas y si, tambi√©n puedes utilizar para detectar errores 404 en tu web. Tan solo necesitas una cuenta de Google.

  • Dead Link Checker – Otra herramienta que a veces uso para identificar posibles enlaces rotos de mis p√°ginas web y que igualmente es totalmente gratuito.

Divi - Tema WordPress

¬ŅQu√© hacer si tienes errores 404?

Que no cunda el p√°nico, una vez confirmado que tu web tiene errores 404 deber√°s identificarlos y redirigirlos a un 301 para que tu posicionamiento no se vea afectado. Esto puedes hacerlo desde el archivo htaccess, edit√°ndolo y a√Īadiendo l√≠neas como las siguientes:

Redirect 301 /antigua-url https://tusitioweb.com/nueva-url

La redirección deberá hacerse hacia una página que tenga algo que ver o que sea relevante. Por ejemplo, si tienes un blog de moda y quieres redirigir tu post de tuweb.es/blog/tendencias-2020, lo ideal es que la redirijas a una nueva entrada que sea tuweb.es/blog/tendencias-2021, de esta forma evitarás redirigir el tráfico a la página de Inicio, ya que esta práctica está desaconsejada.

Por √ļltimo, si el error 404 viene provocado por un art√≠culo no interesante o un producto/servicio que has eliminado, puedes dirigirte a Google Search Console e indicar que la URL sea eliminada desde el men√ļ de Search Console – > Retirada de URLs

Retirar URL en Google Search Console

En caso de no ser experto y/o de que utilices WordPress y no quieras complicaciones, lo m√°s f√°cil es que recurras a un plugin como Redirection y listo, error 404 en WordPress solucionado.

Conclusión

Como has podido comprobar, el personalizar la p√°gina de error 404 es una oportunidad para liberar nuestro lado m√°s creativo, a la par que aportas un toque especial a tu web con el que podr√°s mantener a los usuarios navegando por ella sin marcharse enfadados por encontrarse con un error que ni mucho menos han provocado ellos.

Espero haberte ayudado y que pongas en marcha la creación de tu propia página 404 personalizada para tu web.

Por favor, cualquier duda, en los comentarios o cont√°ctanos para poder ayudarte.

¡Nos vemos en próximos artículos!

bafd611c594328fda58a78f522640cf9
Etiquetado en:

0 comentarios

Enviar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Icono