Error 404: Personalizando nuestra página

¿Qué es un error 404?

El error 404 se muestra cuando una página no ha sido encontrada, probablemente el usuario la digitó mal o está intentando ingresar a un enlace roto u obsoleto; normalmente en los servidores de apache se muestra una página así:

Error 404 en servidores Apache.

Error 404 en servidores Apache.

¿Fea verdad?, por suerte acá les dejo un tutorial para que puedan editar esa página a su gusto.

Creando el archivo 404.html

Éste es el primer paso, crear nuestro archivo 404.html y editarlo a nuestro gusto, ya que es la página que se mostrará cuando suceda el error, yo recomiendo no hacerla tan extensa, bastará con explicar alguna de las posibles causas por la que ha sido mostrado el error y un pequeño menú como para regresar “atrás” o ir a la página principal, un detalle que he visto en muchas páginas es colocar un poco de humor con el fin de no asustar al usuario visitante por el error causado.

Creando el archivo .htaccess

Bueno antes de crearlo fíjense si lo tienen en el directorio principal de su host (se fijan mediante el FTP) si tienen ese archivo solo es cuestión de editarlo, si no lo tienen no se preocupen, crean un archivo en bloc de notas y escriben lo siguiente:

ErrorDocument 404 http://www.tusitio.com/404.html

y guardan el archivo como “.htaccess” (sin la extensión *.txt) es muy importante que tenga el punto adelante.

Nota: http://www.tusitio.com/404.html deberá ser reemplazado por la URL exacta de nuestro archivo 404.html.

Subiendo archivos al servidor

Bueno ya casi terminamos, ahora solo nos faltaría subir nuestros dos archivos al directorio principal de nuestro host (donde colocamos el “index”)

Nota: los que subieron el archivo .htaccess.txt deberán renombrar el archivo y quitarle la extensión *.txt para que quede de esta manera: .htaccess (siempre con el punto adelante).

Bueno eso sería todo, si no he sido tan claro, no duden en dejar sus comentarios, preguntándome acerca del caso.

Acá les dejo un ejemplo de un error 404 personalizado.

Más información sobre el error 404 en Wikipedia.

También te podría gustar...

10 Respuestas

  1. Paula dice:

    Hola!
    Puede hacerse esto en un blog de blogger comun y silvestre?

    • Luda dice:

      Hola, Paula.

      El problema con Blogger, es que no tenemos acceso al servidor como para subir archivos al host, como el .htaccess, creo que es por eso que no podremos configurar nuestra página de error 404 en blogger. =O!

      Aunque Blogger, esta mejorando mucho últimamente, a ver si por ahí nos dejan mover más cositas. ^^,

  2. Raul dice:

    blogger debería hacer como hace para crear entradas, lo mismo pero para crear la página de 404 y que así podamos personalizarla a nuestro gusto

  3. Luda dice:

    Si pues, blogger nos limita bastante en ese aspecto, espero que poco a poco nos dejen mover más código.

  4. salvasanchez dice:

    Buenas, el tutorial es perfecto, he editado, pero en la dichosa página de error hay una imagen, cuando se produce un error en la raíz la imagen aparece, pero si está en una carpeta distinta la imagen no se carga, ?qué puedo hacer para que la imagen se vea en cualquier lugar de la web?
    Salu2

    • Luda dice:

      Hola salvasanchez:

      Seguramente en tu página de error, estas colocando la ruta de la imagen de esta manera:
      (ex: img src=”..\images\tuimagen.jpg”)

      Bueno obviamente algo similar, no exactamente asi, pero lo que debes hacer es colocar la ruta EXACTA de la imagen, te debe quedar algo parecido a esto:
      (ex: img src=”http://tusitio.com/images/tuimagen.jpg”)

      PD: Reemplaza los puntitos (..) por la URL Exacta de tu imagen.

      Espero haber sido claro, avísame si funcionó o si aún tienes problemas, no dudes en preguntar de nuevo.

      Saludos!

  5. salvasanchez dice:

    Pues el problema radicaba en la extensión del archivo, 404page.shtml cambié la extensión a 404page.html y funciona perfectamente.
    Por cierto, en .htaccess no necesité dar la ruta de la imagen, solo la de la ubicación de la página de error, el código es exacto al que tú das en el post.
    Gracias por tu tiempo y un saludo.

  6. Luis David dice:

    Me alegro de que se haya solucionado tu problema, a ver si luego das el link de tu web para visitarla.

    Saludos!

  7. Daniel Ríos dice:

    Clásico, pero bueno, sencillo de entender y de llevar a la práctica.

  8. Luis David dice:

    @Daniel Ríos:
    Asi es, lamentablemente blogger no soporta este tipo de modificaciones. =/ !

    Saludos.

Deja un comentario

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