Plugin Optimización de Imágenes Gratuito para WordPress
Jueves, 17 Diciembre 2015 23:39

Páginas de error ¿cómo personalizarlas?

Escrito por 
CMS:  Todos |  Versión:  Todas |  Nivel de dificultad:  Básico |  Tiempo estimado de lectura:  15 minutos


Páginas de errorLas 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.


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
Puedes crear una página de error personalizada con código HTML, y luego configurar la llamada de la página de error desde .htaccess para ayudar a reducir el uso de los recursos del servidor necesarios para atender las solicitudes de páginas que no existen.
Si haces consultas continuas a tu base de datos, de forma dinámica, para comprobar si una página existe o no, acabarás consumiendo una gran cantidad de recursos del Hosting, y la experiencia de uso será peor con una carga más lenta del sitio para los visitantes.

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 cPanel:

  • 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=&quot;es&quot;>
     <head>
		<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; />
		<meta name=&quot;description&quot; content=&quot;Esta Tienda está desarrollada con PrestaShop&quot; />
        <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=&quot;container&quot;>
            <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:


Error 500


Editar páginas de error en cPanel

Si trabajas en un panel de hosting basado en cPanel, puedes gestionar las diferentes páginas de errores desde el apartado Avanzado, Páginas de error.


Personalizarlas desde cPanel

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.


Editar códigos de error comunes

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.


página de errores 404

Etiquetas disponibles para la personalización:

  • URL de referencia: <!--#echo var=&quot;HTTP_REFERER&quot; -->
  • Dirección IP del visitante: <!--#echo var=&quot;REMOTE_ADDR&quot; -->
  • URL solicitada: <!--#echo var=&quot;REQUEST_URI&quot; -->
  • Nombre del servidor: <!--#echo var=&quot;HTTP_HOST&quot; -->
  • Navegador del visitante: <!--#echo var=&quot;HTTP_USER_AGENT&quot; -->
  • Redireccionar código de estado: <!--#echo var=&quot;REDIRECT_STATUS&quot; -->

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 cPanel, 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 cPanel 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! :D

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.

WordPress

404page

Personaliza la página de erores 404 de la manera fácil en WordPress. No requiere ningún conocimiento de programación y funciona con todos los temas.

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:

  • 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:


Embed 404 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 cPanel) 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 interesante este artículo?

Suscríbete para recibir consejos exclusivos para WordPress, Joomla y PrestaShop



Luis Méndez Alejo

Miembro del equipo técnico de Webempresa.
Coordinador de contenidos en el Blog y en Youtube.
Google+


Plugin Optimización de Imágenes Gratuito para WordPress