Reten a los visitantes más tiempo en tu blog y mejora la experiencia de tu blog configurándolo para que abra los enlaces a sitios externos en nuevas pestañas.
Usar links a sitios web externos como referencias o descargas de recursos es una excelente práctica para dar valor agregado al material en tu blog, es algo que todos hacemos. Pero hay un problema, por defecto cuando un usuario hace clic en uno de estos links externos será llevado allí abandonando tu blog y si quisiera volver podría costarles unos cuantos clicks(toques al botón volver del navegador.
Entonces, no solo te interesa solucionar esto para retener usuarios sino también para mejorar su experiencia en tu blog, lo que hará que se queden más tiempo.
Para prevenir que los lectores abandonen tu blog posiblemente sin leer ninguna de tus entradas, puedes hacer que los links a sitios externos se abran en una nueva pestaña. De esta manera con sólo cambiar de pestaña el usuario podrá volver a tu blog, sin necesidad de usar el botón atrás.
Esto puede hacerse de manera manual cuando creamos un link a un sitio externo si marcamos la opcion Abrir este vinculo en una ventana nueva.
 |
| Cuadro de diálogo de Blogger para crear links. |
O también, puedes modificar el HTML del hipervinculo agregando target="_blank"
 |
| Modo HTML del editor de Blogger. |
Ahora imagínense tener que hacer esto con cada link externo que coloquemos en cada nueva entrada al igual que editar todas las entradas anteriores en el blog. 😓
Por suerte puede ser automatizado con un simple script cortesía de Technotraps. Con el, todos los enlaces a sitios web externos serán abiertos automáticamente en nuevas pestañas.
Como abrir enlaces externos en una nueva pestaña
1. En primer lugar vamos a Temas y luego a Editar HTML de la plantilla.
 |
| Editar HTML. |
2. Ubicamos la etiqueta <head> la cual está al principio del HTML.
3. Debajo de la etiqueta pegamos el código del script.
<script async='async' src='https://code.jquery.com/jquery-3.2.1.slim.min.js' type='text/javascript'></script>
<script async='async' type='text/javascript'>
$(document).ready(function() {
$("a[href^='http://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
$("a[href^='https://']").each(
function(){
if(this.href.indexOf(location.hostname) == -1) {
$(this).attr('target', '_blank');
}
}
);
});
</script>
- La librería y el script son compatibles con HTTPS, utilizan también el atributo async para cargar de forma asincrónica con la pagina web y así no ralentizar el tiempo de carga.
- La librería jquery es la versión slim y minified disponible en https://code.jquery.com/
- Si ya tienes la librería jQuery instalada en tu blog, no agregues el texto en rojo.
- Para saber si tienes jQuery, simplemente presiona Ctrl + F para habilitar el cuadro de búsqueda, escribe jQuery, si no aparece, copia todo el texto incluyendo lo que está en rojo.
4. Presiona guardar y ahora todos los links a sitios externos en tu blog se abrirán en nuevas pestañas.
 |
| Enlace externo abre ahora en nueva pestaña. |
Ciertamente esto no es un tutorial exhaustivo sobre cómo crear un enlace externo en HTML ni tampoco califica como seo de enlaces externos, pero sí ayudará a retener a los usuarios en tu blog y posiblemente reducir en algo el porcentaje de rebote.
Con esta sencilla modificación lograrás que los usuarios no salgan corriendo de tu sitio debido a un link externo y que si lo desean puedan volver fácilmente. El script es tan ligero y simple que no impactará en el rendimiento ni tiempo de carga de tu sitio.
No solo eso, si al usuario le gusta tu blog, querrá abrir ese enlace en una nueva pestaña para poder volver fácilmente a tu sitio, pero ello implica un click derecho o pulsación larga sobre el enlace, con el tiempo el usuario aprenderá que no necesita hacer eso en tu blog pues ya lo haz hecho por él, y entonces habrás mejorado la facilidad de uso de tu blog.
Recuerda que la experiencia de los usuarios lo es todo. Hasta la próxima ¡Comparte!
Gracias Hermano sigue funcionando en 2019
ResponderEliminarHasta donde se si, no ve porque no. Sin emabrgo no lo tengo implementado aqui en tecnoriales.com ya.
Eliminar