11 octubre 2015

Cómo personalizar tu página de error en Blogger [Freebies+Videotutorial]

Como personalizar la pagina de error de blogger



¿Te has dado cuenta ya de lo aburrida y fea que resulta la página de error que trae Blogger por defecto? Y lo peor de todo, no es eso, sino que te está haciendo perder visitas y tiempo de estancia de tus lectores en el blog.

Hoy te traigo 3 fantásticas propuestas con las que podrás personalizar la tuya, para que no tardes ni un minuto más en ponerle remedio.







POR QUÉ ES NECESARIO PERSONALIZAR LA PÁGINA DE ERROR 404



Vamos a ponernos en la piel del lector, imagina que acabas de encontrar un artículo muy interesante en Facebook resolviendo un problema que hace tiempo te traía de cabeza y por fin te muestra la solución que estabas buscando. Emocionada, haces clic sobre el enlace o la imagen y te aparece un texto seco que te anuncio que la página que buscabas, no se encuentra en el blog...

Primeramente, tu reacción es desanimarte porque de buenas a primeras,te has quedado sin la solución a tu problema o sin saciar tu curiosidad hacia la información que te prometían.

Y ahora, pregunto ¿cual es el siguiente paso que darías ante esta situación?

Probablemente, te largarías en busca de tu solución al buscador de Google (adios, muy buenas) o con un poco de suerte, si eres de las que no tiran la toalla a la primera, investigarías si existe algún buscador en ese blog, para intentarlo por última vez ¿verdad?.

Pero lo que suele suceder en la mayoría de los casos, por desgracia, es la primera opción. Así que toca ponerse las pilas, para evitar que las visitas que acudan a un enlace roto, salgan despavoridas de nuestro blog.



Una página de error sin personalizar, te está haciendo perder visitas en tu blog. Tuitéalo



CÓMO LOGRAR QUE TU PÁGINA DE ERROR SE CONVIERTA EN UN ACIERTO


Lo primero es saber qué es un enlace roto y porqué se genera. Hay veces que se debe a que copiamos mal la dirección de nuestro enlace a la hora de publicar, por ejemplo, en nuestras distintas redes sociales. Con una letra que nos comamos, es suficiente para que la información no llegue al lector.

Igualmente el lector, puede caer en ese descuido y el resultado sería el mismo. Otras veces, puede ocurrir que hayamos migrado el blog a otro dominio y no hayamos redireccionado correctamente los artículos al nuevo servidor, o que se ha cambiado el enlace de un contenido y la persona que se ha topado con el error 404, llegue a través de haber clicado en el antiguo enlace. Por eso, jamás se recomienda cambiar el enlace de un artículo publicado, a no ser claro, que te tomes la molestia de redireccionarlo correctamente.

Todos estos incidentes, si son continuos, pueden acabar en una bajada de visitas a nivel seo, por eso es importante solucionarlos cuanto antes mejor. La opción más inteligente para ponerle remedio es visitar frecuentemente tus herramientas webmaster (ahora llamada Google Search Console) y echarle un ojo a los posibles enlaces rotos que tengas en tu blog.

Si no estás muy puesta en el manejo de esta valiosa herramienta, te aconsejo que te pongas a la tarea (si le das importancia a tu blog), porque tiene muchas ventajas para mantener tu blog optimizado de cara al seo y además "te canta" las palabras o frases con las que tu blog aparece en los resultados de búsqueda. Aquí te dejo un completo tutorial sobre Google Search Console, estupendamente explicado por Alejandro Caballero, con el que comprobarás, que no es nada complicado, estar a buenas con el seo de tu blog.


No te quiero dar el peñazo con el seo, porque sé (porque a mí me pasa) que si el trabajo que desarrollas en tu blog, no tiene nada que ver con este tema, te suena a tostón gordo en jerga china...
A mí tampoco me entusiasma el seo, pero es necesario (como las visitas al médico de vez en cuando) para controlar que todo esté bien.

Así que si quieres que tus contenidos se lean y lleguen, cada vez a más personas altamente interesadas en tus contenidos, debes tener un mínimo control sobre el seo de tu blog o contratar a alguien que lo haga por ti. O eso, o una mega estrategia en redes sociales y marketing bestial, pero te digo desde ya, que para la mayoría de los blogs, el volumen gordo de visitas, suele venir a través de las consultas en los buscadores y eso, es una gran ventaja, porque lo que quiere decir es que si han venido a parar a tu sitio desde ahí, es porque buscaban algo relacionado con tu contenido.


En fin, que no te doy más la murga, que si, que tienes razón, que tú venías a ver como poner una página de error en tu blog, y yo te estoy largando un vademécum sobre seo, sin ninguna contemplación, pero es que me parece vital que lo sepas. A lo que iba, una opción es descubrir enlaces rotos a través de Search Console, pero existe otra posibilidad, quizás más cómoda, que te ahorrará andar pasándote por allí frecuentemente y es lograr que los lectores te comuniquen los enlaces rotos.


 Y aquí entra la 1ª propuesta:

Incluir en tu página de error, un enlace hacia tu página de contacto, para que te puedan notificar el fallo.

 Consigue que te comuniquen el enlace roto.



 2ª propuesta:

Dirigir a las visitas perdidas a un índice con todos tus contenidos publicados.

 Muéstrales todo lo que tienes para ellos


¿No tienes página de contacto? pues deberías, entonces sería genial que pudieras guiar al lector que se ha encontrado con un enlace roto a una parte de tu blog, donde le puedas ofrecer todos tus contenidos para que busque lo que más le interese, es decir, al índice de tu blog. De esta manera, no sólo consigues facilitar su búsqueda, sino que además le das la opción de descubrir otros contenidos que le puedan interesar y consigues alargar su estancia en tu sitio ¿perfecto, no? todo el mundo sale ganando 



 3ª propuesta:

Incluir un enlace al Indice y a la página de Contacto.







Las 2 opciones son buenas, entonces ¿por qué  elegir una si puedes tener las dos? El único pero que te puede surgir, es que te falte una de ellas...o te falten las dos (ahí ya vamos de cabeza) que espero que no. Pero bueno, yo (previsora que soy) te he preparado un modelo para cada propuesta ¿qué te parece? no será por falta de opciones, así que vamos al lío.



PROPUESTA "CUÉNTAME COMO PASÓ"


Si has elegido la opción de dirigirlos a tu página de contacto, aquí tienes la imagen que podrás personalizar para que se convierta en tu página de error. Tan sólo tienes que pinchar en la que te interese (según tengas el sidebar a izquierda o derecha) para iniciar la descarga. Una vez que se haya descargado, pasa a ver el videotutorial y te cuento, cómo redimensionarla, cambiarle el color e instalarla en tu blog:




pagina error contacto derecha pagina error contacto izquierda



PROPUESTA "NO TE VAYAS TODAVÍA"


"No te vayas por favor, que no te puedes perder todo esto" si has elegido enviarlos al índice para que descubran lo interesante que son tus contenidos, pincha sobre la imagen que se adapte a la posición de tu sidebar y te enviará al enlace de descarga. Una vez descargada, dale al play en el vídeo que tienes un poco más abajo y mira cómo puedes personalizarla e instalarla en tu blog:



pagina error indice derecha pagina error indice izquierda



PROPUESTA "LO BUENO, SI DOBLE, DOS VECES BUENO"


Si has decidido incluir la imagen con  ambos enlaces, en ese caso deberás comprobar primero cual es el ancho máximo de tus entradas, porque aquí no podrás redimensionar la imagen al tamaño que tú quieras, ya que variarían las coordenadas de los enlaces y se descuadraría todo. Por eso, te he preparado 3 códigos con los anchos más habituales, para que elijas el que más se adapte al ancho de tu entrada.





Pero antes, mira el vídeo para que sepas hacerlo bien y después, copia el código que más te interese, de los que encontrarás bajo el vídeo:







PÁGINA DE ERROR PARA UN ANCHO MÍNIMO DE 540PX



<div id="error404">
<img border="0" src="http://i62.tinypic.com/23hqhkw.jpg" usemap="#Map" />
<map id="Map" name="Map"> 
<area coords="103,244,206,264" href="DIRECCION-PAGINA-CONTACTO" shape="rect"></area>
<area coords="339,243,443,265" href="DIRECCION-PAGINA-INDICE" shape="rect"></area>
</map></div>





PÁGINA DE ERROR PARA UN ANCHO MÍNIMO DE 620PX



<div id="error404">
<img border="0" src="http://i62.tinypic.com/1zey4qw.jpg" usemap="#Map" />
<map id="Map" name="Map"> 
<area coords="116,280,234,305" href="DIRECCION-PAGINA-CONTACTO" shape="rect"></area>
<area coords="392,280,509,305" href="DIRECCION-PAGINA-INDICE" shape="rect"></area>
</map></div>





PÁGINA DE ERROR PARA UN ANCHO MÍNIMO DE 750PX



<div id="error404">
<img border="0" src="http://i60.tinypic.com/33yg9op.jpg" usemap="#Map" />
<map id="Map" name="Map"> 
<area coords="141,340,280,374" href="DIRECCION-PAGINA-CONTACTO" shape="rect"></area>
<area coords="474,340,613,370" href="DIRECCION-PAGINA-INDICE" shape="rect"></area>
</map></div>


Una vez que hayas instalado con éxito tu página de error, descubrirás un feo recuadro gris tras tu flamante página ¡oh, desastre a la vista!. Es el típico recuadro que trae Blogger por defecto, pero no te preocupes, que tiene fácil solución. Si has seguido atentamente el videotutorial, sabrás que debes dirigirte a Plantilla>Personalizar>Avanzado>Añadir CSS y pegar los códigos que te muestro a continuación. Y problema resuelto, haz clic en Aplicar plantilla y ya tendrás tu página de error totalmente preparada para guiar a tus visitas desorientadas.


.status-msg-body {
background: #fff;
}


.status-msg-border{
border: 0px solid #fff;
}



TODO ESTO ESTÁ MUY BIEN, PERO ME GUSTARÍA PERSONALIZAR YO MISMA MI PÁGINA DE ERROR


Si tienes mano diseñando y prefieres hacerlo tú misma al estilo "Juan Palomo", te he preparado 4 enlaces de recopilaciones de ingeniosas páginas de error 404, para que la inspiración no sea un problema a la hora de crear la mejor página de error para tu blog. Sumando todos los enlaces, tienes un total de 148 páginas para sacar ideas (ahí es nada), así que, aquí las tienes a tu disposición:





 14 propuestas originales de páginas de error 404


Y si prefieres algo más sencillo, que no implique diseñar en un editor de imágenes, también puedes obtener muy buenos resultados con un poco de CSS  Laura de Miss Lavanda, te lo explica requetebien en este post.




Con estas 5 plantillas gratuitas + 149 ideas para inspirarse, ya no hay excusas para no personalizar la página de error . Tuitéalo



Bueno, ahora sí que sí,  te has quedado sin excusas para seguir perdiendo visitas con la fría página de error de Blogger. Así que, ¿a qué estás esperando? 3,2,1....¡al turrón!!



Y comienza el turno de cháchara ¿qué te ha parecido?¿te han resultado útiles estas páginas de error para tu blog?¿ya habías personalizado la tuya?¿crees que los gifts deberían tener un botoncito de stop? yo también... te espero en los comentarios.


Que tengas un gran día.




Si quieres aprender más sobre diseño gráfico, quizás te interese el Curso de Photoshop para Blogueras Creativas, con el que podrás perfeccionar tu manejo de Photoshop, a la vez que desarrollas tu marca y creas el blog que deseas tener. Es un curso muy completo, en el que sin duda, habrá un antes y un después en tus diseños. Échale un vistazo:






P.D: (un último consejito), no olvides unirte a la Comunidad Demo 2.0, porque te esperan contenidos, guías, descargables y secretillos de gran valor exclusivos para mis chicas, que no verás en el blog, como esta super-guía para que aprendas a usar imágenes en la red (sin buscarte problemas) en la que además tendrás acceso a millones de imágenes gratuitas para usar en tu blog, sin ningún miedo.



¿Qué me dices? ¿te apuntas? si es así, encantada de contar contigo 

 ¡No esperes más y únete!

4 comentarios:

  1. Muchas gracias Maria Susana, para mí es una alegría hacerlos sobre todo si os resultan útiles. Buen Viernes!

    ResponderEliminar
  2. Muy interesante. Le echaré un vistazo e intentaré personalizar mi página de error 404. Gracias

    ResponderEliminar
    Respuestas
    1. Gracias Anchama, cuantas menos visitas se vayan, mejor. Ya me contarás ;)

      Eliminar

demo