Ofuscar enlaces es una técnica SEO que se está haciendo muy popular.
Puede ser útil ofuscar enlaces cuando la usabilidad de la web exige que haya muchos enlaces salientes, pero no queremos incluir esos enlaces porque van a hacernos dispersar la fuerza y autoridad de cada enlace.
El SEO quiere que solo haya un enlace saliente y el diseño y usabilidad quiere que cada párrafo tenga su enlace.
Este conflicto de intereses se puede solucionar con esta técnica de ofuscar enlaces con JQuery.
Veamos como ofuscar enlaces.
En primer lugar vamos a insertar una lista con varias líneas, donde la primera contiene un enlace. El resto va a presentar el enlace cuando movamos el puntero por la pantalla.
De esta forma el bot de Google va a cargar todo el contenido y solo va a encontrar un enlace saliente. En cambio un usuario va a mover el ratón y va a poder clicar en cada una de las líneas.
<ul class="checkmark">
<li><a href="#">PLAN DE ENTRENAMIENTO ONLINE</a></li>
<li><span class="convertible" data-u="/entrada2/">ASESORAMIENTO A MEDIDA</span></li>
<li><span class="convertible" data-u="/entrada3/">PLAN DE ADELGAZAMIENTO PERSONALIZADO</span></li>
<li><span class="convertible" data-u="/entrada4/">REVISIÓN SEMANAL DEL PLAN</span></li>
<li><span class="convertible" data-u="/entrada5/">SESIÓN ONLINE SEMANAL</span></li>
</ul>Hemos creado una UL con una clase que mostrará un check al inicio de cada línea. En la primera línea insertamos el enlace «#» y el contenido del texto.
En la segunda fila encapsulamos en una etiqueta span una clase «convertible» y una variable con el enlace ofuscado. No hay etiqueta «a href» por lo que el robot no la identifica como una etiqueta de enlace.
Para que esto funcione en el body de la página vamos a introducir el código JQuery que hará la magia.
Pero antes vamos a subir el frameware a nuestro hosting y vamos a llamarlo desde el header de nuestro wordpress con este script.
<script src="/wp-admin/js/jquery.min.js"></script>Script en el body
Ahora ya podemos insertar en el body nuestro script para ofuscar enlaces.
<script>
$(function(){
$("body").on('mouseover',function(){
$('.convertible').each(function(){
var u =$(this).attr('data-u');
var contenido = $(this).html();
$(this).replaceWith(
$('<a href="'+u+'">'+contenido+'</a>')
);
});
});
});
</script>- En primer lugar hacemos que se ejecute el script cuando se cargue toda la página, metiendo todo el script dentro de una función.
- A continuación insertamos en el «body» la función que se activa cuando se mueve el ratón.
- Cuando esto pase vamos a pasar por todas las etiquetas que contengan la clase «.convertible» y en cada pasada asignamos a la variable «u» el atributo que contiene el «data-u» y en la variable «contenido» el valor del texto del la etiqueta.
- Por último reemplazamos las etiquetas por un «a href» con la URL y el contenido. De esta forma se convierten en enlaces.
Esta técnica de ofuscación de enlaces no es muy recomendable, aunque puede ser una solución cuando no podemos solucionar problemas de usabilidad. Mi recomendación es que se haga una buena estructura transaccional donde el correcto enlazado interno facilite el posicionamiento de las páginas que van convertir.
Ocultar texto con un desplegable.
Esta es la continua lucha entre diseñadores y desarrolladores SEO. El diseñador quiere poco contenido para que la web no quede recargada, pero el SEO necesita texto para que Google le eche cuentas.
La solución también está en JQuery. Un desplegable que se activa con un clic puede hacer visible el texto que permanece oculto para el lector pero no para el robot de Google.
Para que esto funcione vamos a crear una clase ·leermas» con la función «display:none» y activaremos esa clase cuando hagamos clic en el botón.
<script>
$(function(){
$('#leermas').addClass('leermas');
$('#btn-mas').mouseenter(function(){
$('#leermas').fadeIn();
$(this).remove();
});
});
</script>De esta forma añadimos la clase «leermas» cuando se haga clic en el botón. Por último ocultamos el botón.
En el párrafo introducimos la clase encapsulada en una etiqueta «span».
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam orci tellus,
eleifend id euismod blandit, placerat in mi. <span id="leermas"><br>Cras suscipit nibh odio, gravida ultricies leo commodo eget. Nullam orci lectus, porttitor et malesuada nec, volutpat ac purus. Phasellus bibendum interdum bibendum. Pellentesque non dignissim magna, eu faucibus ligula.</span>
<a id="btn-mas">+</a></p>Antes de cerrar el párrafo introducimos un enlace con la clase «botonLeerMas» que será el que accione el script, desplegando el texto y ocultando el botón.
