————————————————————————————————————————
Artículo publicado originalmente el 22/09/2010 en El Blog de César Jodra
————————————————————————————————————————
Hace unos días os hable del origen del error 404 de nuestro navegador. Hoy vamos a ver como personalizar este mensaje de error en nuestras webs, creando un mensaje más amigable para el usuario, haciendo que su experiencia no sea tan traumática, y que nos permita canalizar la navegación de nuevo a nuestro sitio.
En primer lugar, vamos a ver cuales son algunas de las situaciones más habituales en las que se produce un error 404.
– Enlace mal escrito: Cuando el usuario escribe directamente la URL en la barra de direcciones del navegador, y comete un error al hacerlo.
– Error en la extensión del archivo: Cuando el usuario hace lo mismo que en la anterior situación, pero lo que escribe mal no es la dirección del documento, sino la extensión de éste (.htm por .html, .asp por .php, etc.).
– Enlace interno erroneo: Cuando desde una de las páginas de tu sitio web, presentas un enlace que está mal, por alguno de los motivos anteriormente mencionados, o porque la página a la que lleva ya no está en el servidor (borrado accidental, documento renombrado, etc.). Si se detecta esto, hay que corregir los enlaces erróneos. El propio Dreamweaver tiene una herramienta que detecta los «dead link» en el mapa del sitio.
– Enlace entrante erroneo: Lo mismo que en la situación anterior, sólo que el enlace no proviene de una de tus páginas, sino de una web de un tercero. Si se detecta esto, hay que hablar con el propietario de la otra web y solicitarle que rectifique el enlace. Si no se consigue contactar con él, y detectamos un tráfico importante, convendría habilitar la página enlazada y redireccionarla directamente a la correcta, para no perder esas visitas.
– Error por URL antigua: Cuando hemos actualizado nuestro dominio y hemos cambiado a otra dirección, pueden producirse cualquiera de los anteriores errores. Imaginemos que teníamos un dominio gratuito tipo pepito.wordpress.com, y que con el tiempo hemos adquirido un dominio tipo pepito.com. Habrá gente que se sepa nuestra antigua dirección y la teclee a mano, otros accederán a través de un enlace que haya en alguna web que apunte a la antigua dirección, algunos puede que accedan a un enlace interno que no haya sido actualizado, e incluso es posible que Google aún ofrezca resultados con la dirección antigua. Si esto sucede, es necesario crear una redirección an la URL antigua, para no perder ni una visita, mientras vamos corrigiendo los errores que detectemos (enlaces internos y externos). Esta redirección conviene hacerla a través de un redirect 301, para no perder page rank. Asimismo, conviene informarle a Google, a través de las Herramientas Google para Webmasters, del cambio de dominio de nuestra web, para que lo tome en cuenta en las búsquedas.
Creando un 404 personalizado:
Aunque los servidores y navegadores ya ofrecen una página de error cuando se produce alguna de las situaciones anteriores, estas páginas suelen estar escritas en inglés, no aportan ningún tipo de información adicional y rompen la estética del sitio, por lo que es altamente recomendable personalizarlos.
Ya vimos en el artículo anterior varios ejemplos de páginas 404 personalizadas, pero realmente ninguna de ellas es un ejemplo a seguir, ya que se limitan simplemente a «hacer un guiño» simpático al usuario, con iconos o imágenes más o menos graciosas, pero no son demasiado operativas. El humor es un recurso interesante, pero en este caso no resulta práctico. Vamos a intentar que nuestras páginas 404 sean funcionales.
Lo que vamos a intentar con nuestra página 404 es reconducir la navegación a otro sitio de nuestra web, si es que no podemos ofrecerle lo que busca. Imaginad que alguien escribe nuestra dirección mal y se encuantre con un 404 estandar. Seguramente el usuario abandonará la página sin más. Sin embargo, si encuentra un 404 con nuestro logo e información sobre la web, aparte de algunos enlaces que le dirijan a la home y a otras secciones, posiblemente continue navegando.
Mantén una corcondancia de diseño. Si tu web es de color naranja, con tu logo arriba a la izquierda y un menú vertical a la derecha, tu página de error 404 debe ser igual, para que no de la sensación de que el usuario ha salido de tu sitio web violentamente, sino que todo está en orden, y se trata de algo previsto y que tiene solución.
Una de las cosas que yo haría a la hora de crear mi página 404, es precisamente quitar el «404». El usuario no necesita conocer ningún código de error. Símplemente díle algo así como «Lá página que busca no se encuentra en esta dirección. Es posible que haya tecleado mal la dirección, o que ésta haya cambiado de ubicación. Puede también buscar desde aqui… etc». Al usuario le queda más claro lo que ha pasado, y lo que puede hacer. También evitaría utilizar la palabra «error». Es un término con connotaciones negativas que puede asustar a nuestro usuario, pensando que ha hecho algo mal.
Intenta darle sugerencias de lo que ha buscado, o al menos cosas parecidas. Coméntale los errores que se pueden haber producido (enlace roto, error al escribir, etc). Si ha habido algún cambio de dirección URL indícaselo también. Además, incorpora es la página un buscador por si quiere buscar por sí mismo dentro de tu sitio web y continuar navegando.
Aparte de ofrecerle sugerencias y un buscador, intenta que la página sea «inteligente», y corrija automáticamente algunos errores recurrentes. Si ha habito un cambio de URL, programa un script que cambie automáticamente pepito.wordpress.com/loquesea por www.pepito.com/loquesea, para que no se produzca el error. Igualmente, si tu servidor es sensible a las diferencias entre mayúsculas y minúsculas en las URL, automatiza que todas las direcciones escritas se conviertan a minúsculas, por ejemplo. Incluso puedes realizar automáticamente la búsqueda usando la url incorrecta como entrada de datos en el buscador para mostrar resultados que pueden incluir la página que buscaba el usuario.
Si no es posible ofrecer al usuario lo que estaba buscando, hay que ofrecerle alternativas para que no se vaya. En primer lugar, es necesario incluir un enlace a la home del sitio, a través del logotipo y otros enlaces. Además, puedes ofrecerle una selección de enlaces a los items más populares o más recientes, para despertar su interés. También debes incluir el menú de navegación de tu web, con las diferentes secciones y apartados, no sólo para que el diseño sea concordante con el resto del sitio (que también), sino para ofrecerle más opciones de navegación.
Eso sí, intenta que tu página de error 404 sea sencilla y clara, para no despistar mucho al usuario. Ten en cuenta que es una landing page complicada. El usuario que acaba de llegar está confuso porque se ha producido un error y no sabe lo que ha pasado, sólo que no encuentra lo que ha buscado. No queremos despistarle más con miles de opciones, sino solucionarle el problema y canalizarle a otra página más agradable.
Siempre revisa tus errores 404, para ver lo que está ocurriendo y tratar de solucionarlo. Mira en las analíticas o a través de las alertas, con qué frecuencia se producen estos errores, y por que motivo, para intentar corregirlos lo antes posible.
Como crear un 404 personalizado en tu servidor:
La página de error 404 no es más que una página normal y corriente que disñas con Dreaweaver (o con lo que sea que hagas tus páginas), y que subes a tu servidor, indicándole al mismo que esa página es la que debe mostrar cuando se produzca un error 404, en lugar de la versión estandar.
Pregunta al soporte de tu hosting cuales son los pasos a dar. En la gran mayoría de los casos basta con que renombres la página que has creado como 404.htm y la subas al raiz. En otros caso, tendrás que configurar el htaccess para indicarle cual es mediante la directiva ErrorDocument. Cada servidor puede tener sus particularidades, así que lo mejor es que hables con la gente de soporte y ellos te indiquen, o leas las FAQ del servicio de hosting.
Espero que con estos consejillos, a partir de ahora tus páginas de error 404 luzcan estupendas…
