En primer lugar y para los menos avezados, una página 404 es aquella a la que se redirigen todas las peticiones de páginas de un dominio, cuando esa dirección no existe. Dicho de otra manera, es aquella página a la que llegamos cuando el navegador ha sido capaz de comunicarse con el servidor, pero no existe la dirección solicitada. Y realmente no sólo ocurre esto con las páginas, sino también con cualquier fichero que se solicite. Ese fallo se conoce como Error 404 o HTTP 404 y de ahí el apodo de este tipo de páginas.
Su utilidad es evitar en lo posible perder tráfico, ya que si alguien accede a tu sitio desde un enlace redactado con alguna errata o mediante un resultado de búsqueda sobre una página que has borrado, no verá en su navegador mas que un escueto mensaje y lo más probable es que elija otro resultado y no se ponga a buscar por todo el dominio. En este enlace un ejemplo.
Para que esto funcione en Blogger, lo primero es comprobar que tenemos la línea <b:include data='top' name='status-message'/> en nuestra plantilla. Si no la tenéis, ya estáis tardando en situarla debajo de esta otra que he marcado en gris. Debe aparecer en dos sitios, en la parte normal y en la destinada a dispositivos móviles (Expandir plantillas de artilugios):
<div class='blog-posts hfeed'>
<b:include data='top' name='status-message'/>
<b:include data='top' name='status-message'/>
Esa línea es la que nos muestra el mensaje "Mostrando entradas con la etiqueta xxxxxx. Mostrar todas las entradas", pero también es ahora la que nos da el siguiente mensaje cuando accedemos a una página errónea:
La novedad es que desde hace unos días, ese mensaje se puede personalizar desde el Escritorio para que salga el texto que queramos:
Pero lo más interesante no es que podamos cambiar el texto, sino que también podemos meter en ese formulario código HTML y JavaScript. O sea, que con poco se puede hacer algo más personalizado. Esta captura es de momento mi opción y pinchando en ella la podéis ver en acción (¿Cómo era eso de '...me ha salido un pareado'?).
El código que utilicé es simple, una imagen flotando a la derecha, un encabezamiento, un texto con enlace a la página de Inicio y una pequeña lista con un par de opciones para que el usuario pueda seguir buscando por el blog. Si no queréis que salga todo el texto seguido, no olvidéis utilizar <br/> para los saltos de línea::
<img border="0" style="float:right;" src="http://1.bp.blogspot.com/s1600/chuck.gif" /><h1>¡Vaya! Parece que a Chuck Norris no le gustó esa dirección</h1>
<br/>
<p>De todas formas, antes de discutir con él la conveniencia o no de su eliminación, comprueba que tecleaste bien la URL en tu navegador.</p>
<b>Abajo encontrarás un enlace para ir a la página de <a href="/">Inicio</a>, pero desde la barra lateral también puedes:</b><br/>
<ul>
<li>Buscar una información concreta</li>
<li>Navegar por las distintas categorías del blog</li>
</ul>
<br/>
<p>De todas formas, antes de discutir con él la conveniencia o no de su eliminación, comprueba que tecleaste bien la URL en tu navegador.</p>
<b>Abajo encontrarás un enlace para ir a la página de <a href="/">Inicio</a>, pero desde la barra lateral también puedes:</b><br/>
<ul>
<li>Buscar una información concreta</li>
<li>Navegar por las distintas categorías del blog</li>
</ul>
Y para que los estilos por defecto no afectaran al diseño de este mensaje, además añadí tras el include que vimos al principio, una especie de reset que anulara los estilos de Blogger para el status. Como estos estilos sólo son para la página de error, los metí a su vez dentro de una condición que detecta cuando estamos en ese tipo de páginas. Las dos últimas clases las necesité particularmente para el encabezado y la lista:
<b:include data='top' name='status-message'/>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>
<b:if cond='data:blog.pageType == "error_page"'>
<style type='text/css'>
.status-msg-wrap { position: relative; width: 100%; margin: 30px auto; padding: 10px;font-size: 100%; }
.status-msg-wrap a { padding: none; text-decoration: inherit; }
.status-msg-border {display:none; }
.status-msg-body { position: relative; width: 100%; padding: 0; text-align: inherit; z-index: auto; }
.status-msg-body h1 { font-size:150%; }
.status-msg-body li { list-style-type: circle;margin-left:50px; }
</style>
</b:if>
Una última cosa. Por el diseño de mi blog prefiero que siga sin salir el "Mostrando entradas con la etiqueta...", así que simplemente metí también el include dentro del condicional y de esta manera, los mensajes de este tipo seguirán sin salir, excepto cuando hay un 404.
Más información y otros ejemplos en Ciudad Blogger, Vagabundia, Emilio Cobos, Utopia Blogs, MBT y Blogger Plugins (los dos últimos en inglés).
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
En cuanto tenga un rato me pongo a ello, gracias por la información. Aunque no creo que me quede nada como esto: http://petshopboxstudio.com/blog/inspiration/40-illustrative-404-web-page-you-must-visit/
ResponderEliminarGracias Malapata. Una fuente de inspiración nunca viene mal ;)
Eliminarjajaja tu pagina de error es una de las mas simpaticas que he visto, aunque yo jamas de los "jamases" le discutiria nada a Chuck Norris, no señor!
ResponderEliminarMejor me regreso por donde vine y tecleo bien :)
Muy buena tu 404 ;)
ResponderEliminarSaludos.
Me gusta tu pagina. Lol
ResponderEliminarMuy buena e divertida. :D
Un Abrazo. :)
jaja, te quedó padre, sin quitar todos los elementos :)
ResponderEliminarLo que mencionas creo que es importante: condicionar el CSS para que sólo se cargue en la página de error, de otro modo se carga desde el principio y hace el CSS más extenso, tal vez no sea tanto, pero no se necesita desde ahí...
Saludos ;)
Creo que no es demasiado correcto poner estilos en el HTML, pero como tú dices, se mejora un poco la carga.
EliminarMuy interesante, la página de error 404. Como me gusta investigar, probar y toquetear. Directamente te hago un copy-paste y unos pequeños arreglillos y ya tenemos un trabajo de I+D+I y todo solucionado.
ResponderEliminarMe gusto con Chuck Norris.
ResponderEliminarMe gustaría Compartir enlaces de referencia.
Saludos
Supongo que te refieres a hacer intercambio de enlaces. Si es así, no es mi costumbre.
EliminarWOW new design...cool \m/
ResponderEliminarhttp://beben-koben.blogspot.com/404
hihihi...cheers :)
Yours is funny too :)
EliminarHola no se donde preguntarlo, pero en herramientas del webmaster me dice que tengo mas de 500 paginas con error 404, por lo cual me gustaria saber como arreglarlo, es un fallo que tuve hace poco al actualizar el blog y se me duplicaron las entradas.
ResponderEliminarGoogle fue más rápido en indexarlas que tú en borrarlas, porque supongo que ya no las tendrás duplicadas. Bueno, si ya lo tienes arreglado es cuestión de tiempo que Google las desindexe y ya no te saldrá el aviso en Webmasters Tools... al menos con tantas.
EliminarHola. Probablemente es porque no tienes incluido eso del status-message que se cita al principio del post.
ResponderEliminarPrueba a añadir esta clase a tu CSS con las reglas que prefieras:
ResponderEliminarh2.pagetitle {PROPIEDADES}
Y si el problema no estaba en el status-message, por favor cuéntanos dónde andaba el problema.
Visto ;)
ResponderEliminarsaludos Oloman ... puede ser que ya no funcione ??? o yo nomas tengo inconvenientes...estaba funcionando bien y no e modificado la plantilla.
ResponderEliminarno dejo el link de mi pagina por motivos de spam .
gracias .
Hola Gabriel. No sé si pudo fallar justo cuando lo viste, pero ahora mismo he comprobado página de error y sigue funcionando correctamente.
EliminarGracias ...funciona correctamente ...
EliminarHola Oloman!
ResponderEliminarOptimicé mi página de error y hay algo que no puedo solucionar. Son nuevamente las distancias enormes, ahora entre la imagen con la leyenda (404 page not found) y el pie del blog. Ideas de como arreglarlo?
Este es un ejemplo de página de error: http://creativo2cero.blogspot.com.ar/2015/03/historia-y-jhjh-de-las-redkes.html
Sí. Se me ocurre algo.
EliminarAñade al CSS de tu página de error esto:
.status-msg-hidden {
display: none;
}
;)
Gracias!, solucionado!
EliminarTe pregunto de curioso, hay alguna forma de hacer invisible la imagen 404 error que coloque en mi blog, dentro de los resultados de búsqueda arrojados por el buscador interno de mi blog?
Saludos!
¿Aparece la imagen cuando utilizas el buscador interno? Raro me parece.
EliminarDe todas formas no sé cómo se puede ocultar frente al buscador si es que es así.
Si, aparece, veremos si se me ocurre algo jaja
ResponderEliminarAhora estoy luchando con el responsive, casi lo termino! :D
Oloman, me gustaría colocar un script que redireccione desde la page 404 al inicio de mi blog, blogger sanciona scripts de este tipo?
ResponderEliminarSaludos.
Y en tal caso, sabes de algún script que haga eso?
EliminarCristina, de SEO sé lo justo, así que no te puedo confirmar si penaliza esa acción o no. De todas formas me parece más correcto para todos (usuarios incluidos), que salga el aviso 404 para saber que la dirección a la que se accedió no existe. Allí ya puedes poner un enlace a Inicio.
EliminarClaro, bueno, lo tendré en consideración!
ResponderEliminarAbrazo desde Buenos Aires!
¡Hola de nuevo Oloman!
ResponderEliminarComo verás, siempre que te escribo es por algún problema, si algú día nos vemos te pago algo ;)
El caso es que tengo configurado la página 404, pero no funciona, en vez de salir la página que tengo configurada, me sale una que pone "No hay más artículos sobre ."
Ya no sé donde mirar ni que hacer, no hay manera de que funcione. No se si tendrá que ver que he cambiado a un dominio .es.
Me puedes hacer ver la luz.
Muchas gracias y saludos.
http://www.mondejarfoto.es/
Me respondo a mi mismo, pero por tu entrada "Blogger: Cambiar el rótulo 'Mostrando entradas con la etiqueta...'" donde viene la solución a mis problemas. Muchas gracias de todos modos
EliminarDe nada XD
EliminarHola Oloman: Me podrías dar una mano con lo siguiente? Resulta que, hace un tiempo, cargué en el lugar correspondiente a mi blog (tal y como lo señalas en este post), el siguiente código de página de error 404. Hasta ahora, no me hacía demasiados problemas pues, cuando pasaba mi página por una sitio para webmaster (por ej., el WebSite Auditor de PowerSuite) me decía algo así como "Felicidades Ud. tiene una página 404 configurada correctamente" (o algo así). Pero, sin embargo, dicha página, Nunca funcionó (je!). Cuando marcabas mi sitio con algo "erróneo", sencillamente entrabas a mi página pero, "cortada" (es decir, veías el encabezado y el pié) Pero, si lo deseabas, igual, podías "navegarla". Pero, desde que, hice clic en "Redirigir a HTTPS" en mi blog de blogger, en dicho WebSite Auditor, empezó a aparecer que ..."no esta configurada correctamente"..., je! (aunque no sé si esto tenga algo que ver o no:)) Desde ya, muchas gracias. Saludos! PD: Por las dudas, antes de enviarte esto, volví a chequear que ..."eso del status-message que se cita al principio del post"...estuviera las 2 veces que mencionas:)
ResponderEliminarLa culpa de que no se vea esa imagen que pusiste para ilustrar el error en la dirección, es de este CSS:
Eliminar.status-msg-wrap {
visibility: hidden;
display: none;
}
Si quitas eso (o lo contrarrestas con CSS contrario), comprobarás que sí se ve.