Las páginas de error sirven para informar a los visitantes de tu sitio web sobre los problemas del sitio. Cada tipo de problema se corresponde con un código establecido. Un visitante que acceda a una URL inexistente verá un error 404, mientras que un usuario no autorizado que intente acceder a un archivo restringido verá un error 401.
El servidor web Apache proporciona de forma automática páginas de error básicas, que puedes personalizar. También puedes llamarlas desde el archivo .htaccess que hayas creado de forma más personalizada para cualquier código de estado HTTP que comience por 4 o 5 (400/500).
Las páginas de errores por regla general son páginas creadas en HTML, que incluyen enlaces a imágenes y que pueden utilizar hojas de estilo en cascada (CSS) para personalizar la vista en el navegador.
Por regla general los archivos .html de las páginas de error se encuentran en la carpeta principal de la instalación a la que sirven estos archivos, aunque es posible centralizar todas las páginas de error en una carpeta específica y llamar a estas páginas con urls absolutas.
Tabla de contenidos
- 1 Ejemplos de llamadas a páginas de error habituales:
- 2 ¿Qué debe contener un archivo de página de error?
- 3 Editar páginas de error en WePanel
- 4 Páginas de error en WordPress
- 5 Páginas de error en PrestaShop
- 6 Páginas de error en Joomla
- 7 Otras consideraciones no menos importantes
- 8 ¿Te ha resultado útil este artículo?
Ejemplos de llamadas a páginas de error habituales:
- ErrorDocument 500 /internalerror.html
- ErrorDocument 401 /authrequired.html
- ErrorDocument 403 /forbidden.html
- ErrorDocument 404 /notfound.html
No es recomendado utilizar caracteres especiales o espacios en la composición de los nombres de estos archivos.
El archivo .htaccess, responsable por llamar a estos archivos de errores debe estar localizado en la carpeta raíz del Hosting.
El formato de instanciación a archivos de errores personalizados, en el archivo .htaccess es:
ErrorDocument 404 /404page.html
Si manejas diferentes avisos de errores personalizados puedes plantearte crear una carpeta donde almacenar los diferentes archivos e instanciarlos desde el archivo .htaccess incorporando la ruta relativa:
ErrorDocument 404 /errores/404.php
Algunos errores que puedes personalizar mediante la página correspondiente:
- 400 – Petición Incorrecta
- 401 – Se requiere autorización
- 403 – Prohibida
- 404 – No encontrado
- 500 – Error interno del servidor
Todos los errores que se pueden gestionar de forma personalizada desde WePanel:
- 400 (solicitud incorrecta)
- 401 (autorización requerida)
- 402 (pago requerido)
- 403 (prohibido)
- 404 (no encontrado)
- 405 (método no permitido)
- 406 (no aceptable)
- 407 (autenticación de proxy requerida)
- 408 (superado el tiempo de espera de solicitud)
- 409 (conflicto)
- 410 (perdido)
- 411 (longitud requerida)
- 412 (condición previa fallida)
- 413 (entidad de solicitud demasiado grande)
- 414 (URI de solicitud demasiado grande)
- 415 (tipo multimedia incompatible)
- 416 (intervalo de solicitud no realizable)
- 417 (expectativa fallida)
- 422 (entidad no procesable)
- 423 (bloqueado)
- 424 (dependencia fallida)
- 500 (error interno del servidor)
- 501 (no implementado)
- 502 (puerta de enlace incorrecta)
- 503 (servicio no disponible)
- 504 (superado el tiempo de espera de puerta de enlace)
- 505 (no se admite la versión HTTP)
- 506 (variante también negocia)
- 507 (almacenamiento insuficiente)
- 510 (no extendido)
No es necesario crear páginas personalizadas para todos los errores existentes, sino solo para los habituales como los errores 404, por ejemplo.
¿Qué debe contener un archivo de página de error?
Un archivo que muestre un aviso de error al visitante debe contener la declaración del tipo de archivo, una cabecera <head>, un cuerpo <body>, y además puede incluir declaraciones de estilos CSS para formatear los textos e imágenes que se muestren en pantalla. Un ejemplo habitual puede ser:
<!DOCTYPE html> <html lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="description" content="Esta Tienda está desarrollada con PrestaShop" /> <style> ::-moz-selection {background: #b3d4fc; text-shadow: none;} ::selection {background: #b3d4fc; text-shadow: none;} html {padding: 30px 10px; font-size: 16px; line-height: 1.4; color: #737373; background: #f0f0f0; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;} html, input {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;} body {max-width:700px; _width: 700px; padding: 30px 20px 50px; border: 1px solid #b3b3b3; border-radius: 4px;margin: 0 auto; box-shadow: 0 1px 10px #a7a7a7, inset 0 1px 0 #fff; background: #fcfcfc;} h1 {margin: 0 10px; font-size: 50px; text-align: center;} h1 span {color: #bbb;} h2 {color: #D35780;margin: 0 10px;font-size: 40px;text-align: center;} h2 span {color: #bbb;font-size: 80px;} h3 {margin: 1.5em 0 0.5em;} p {margin: 1em 0;} ul {padding: 0 0 0 40px;margin: 1em 0;} .container {max-width: 380px;_width: 480px;margin: 0 auto;} input::-moz-focus-inner {padding: 0;border: 0;} </style> </head> <body> <div class="container"> <h2><span>500</span>Error interno del servidor</h2> <p>¡Vaya! Algo salió mal.<br /><br />Trata de volver a cargar esta página o no dudes en contactar con nosotros si el problema persiste.</p> </div> </body> </html>
La página, de producirse el error en el navegador, sería algo parecido a lo siguiente:
Editar páginas de error en WePanel
Si trabajas en un panel de hosting basado en WePanel, puedes gestionar las diferentes páginas de errores desde el apartado Avanzado, Páginas de error.
Hay dos pestañas importantes disponibles:
- Editar códigos de error comunes
- Mostrar todos los códigos de estado de error HTTP
Desde la pestaña Editar códigos de error comunes es posible ver las páginas de errores habituales ya creadas.
Para editar por ejemplo la página de errores 404 haz clic en el elemento correspondiente y accede a la edición del código HTML desde donde puedes personalizarla o adaptarla a tus necesidades.
Etiquetas disponibles para la personalización:
- URL de referencia: <!–#echo var="HTTP_REFERER" –>
- Dirección IP del visitante: <!–#echo var="REMOTE_ADDR" –>
- URL solicitada: <!–#echo var="REQUEST_URI" –>
- Nombre del servidor: <!–#echo var="HTTP_HOST" –>
- Navegador del visitante: <!–#echo var="HTTP_USER_AGENT" –>
- Redireccionar código de estado: <!–#echo var="REDIRECT_STATUS" –>
Observa que la página que estás editando es .shtml y no .html.
Seguramente te has encontrado en tu Panel de Hosting, en los registros de errores avisos de páginas que no existen y que hacen referencia a páginas que no son .html sino .shtml
[Fri Dec 18 02:49:30 2015] [error] File does not exist: /home/public_html/404.shtml
Desde tu WePanel, Avanzado, Páginas de error, podrás gestionarlas tal como te he explicado más arriba.
En el siguiente vídeo de David Noguera puedes ver con más detalle como utilizar la herramienta de WePanel para la personalización de estas páginas.
Páginas de error en WordPress
En WordPress puedes las puedes personalizar de forma manual, para mi gusto un poco elaborada, o puedes hacerlo utilizando plugins ¡como siempre! 😀
Uno de mis favoritos es 404page por su versatilidad y facilidad de uso. Échale una ojeada y si te gusta adoptalo en tus webs hechas con WordPress.
404page
Lectura recomendada: Gestionando enlaces rotos en WordPress
Páginas de error en PrestaShop
Por defecto PrestaShop incluye las siguientes páginas para gestión de errores preformateadas:
- HTTP Error 500 /public_html/error500.html
Además, el CMS incluye páginas personalizadas incrustadas dentro del tema en uso, que también es posible personalizar, que puedes encontrar en rutas como:
- Error 404: /public_html/themes/default-bootstrap/404.tpl
En caso de errores 404 veríamos embebida dentro del tema de la Tienda la siguiente página de error:
Lectura recomendada: Errores 404 en PrestaShop ¿Cómo gestionarlos?
Páginas de error en Joomla
En Joomla los errores se muestran embebidos en la plantilla en uso y gestionados desde el archivo de la misma llamado error.php que mostrará los mensajes personalizados para cada tipo de error común que se produzca (400/500).
Puedes leer la documentación oficial de Joomla.org para la gestión de páginas de errores personalizadas.
En el siguiente vídeo de Jhon Marreos puedes ver con más detalle como mejorar la página de erro 404 en Joomla.
Otras consideraciones no menos importantes
No te olvides de excluir aquellas páginas de gestión de errores personalizadas del indexado por parte de los motores de búsqueda. Si has centralizado todas las páginas en una carpeta, por ejemplo /public_html/errores/ puedes añadir en el archivo robots.txt la siguiente línea:
Disallow: /errores/
Otra opción seria incluir dentro de cada página de errores, sea personalizada .html o .shmtl (gestionada desde tu WePanel) el siguiente código, entre las etiquetas <head> y </head>, para evitar el indexado de estas páginas:
<meta name=”robots” content=”noindex, nofollow”>
Con ello evitamos el indexado y el seguimiento o rastreo de los enlaces internos que estas páginas puedan contener. No obstante Google por regla general no indexa páginas 404, pero como todo en la vida, va del día que sus bots tengan y de como haya amanecido Panda.
Ahora ya entiendes un poco mejor como encontrar y modificar o personalizar las diferentes páginas de gestión de errores en tu gestor de contenidos dinámicos habitual. Es hora de que lo pongas en práctica.
Frente a errores de respuesta HTTP 404, el contenido de tu página y el posicionamiento se verán muy afectados, y posiblemente la página que devuelva error no será rastreada ni indexada. A Google, Bing, Yahoo, etc., no les gustan los 404 ¡no lo olvides!
¿Te ha resultado útil este artículo?
Miembro del equipo de soporte técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Soporte técnico en CiberProtector. Teacher en Webempresa University
