Ya está lista la actualización del plugin de ofuscación de enlaces en WordPress con muchas novedades. En esta actualización he incluido un sencillo panel de control para gestionar las opciones que ahora permite el plugin y que paso a detallar.
Índice del contenido
Opciones de Link Juice Optimizer
En esta nueva versión el plugin permite nuevas opciones, unas por petición popular y otras de añadido propio, así como la subsanación de algún error.
Método de ofuscación utilizado
Creo que esta es la novedad más importante. Pensada para aquellos usuarios más temerosos en cuánto a una posible penalización, he añadido la opción de elegir cómo ofuscar los enlaces. Si nos ceñimos a lo que es ofuscar, solo hablaríamos de hacerlo con el método de base64, pero para que el plugin no pierda su esencia lo he englobado así. Ahora puedes “ofuscar” los enlaces de alguna de las siguientes formas:
- Añadiendo el atributo nofollow al enlace original. El método más white hat, pero también efectivo. El crawler no seguirá ese enlace (aunque perderá link juice por el camino).
- Ofuscando el enlace con <span onclick=”location.href=’url-destino'”>. A medio camino entre la ofuscación (aunque no lo es) y dejar ver que es un enlace, digamos que es un enlace camuflado. Este método preserva el link juice.
- Ofuscando el enlace con <span data-loc=”cadena-de-caracteres-en-base64″>. El leitmotiv del plugin, ofuscar enlaces en base64, la apuesta fuerte contra el crawler. Ni href, ni onclick, nada, ni rastro de que sea un enlace. Este método, obviamente, preserva el traspaso de PageRank.
Elegir la clase CSS del enlace a ofuscar
Aunque no creo que Google pueda (o intente) sacar un patrón en base a que una pequeña cantidad de sitios web (seamos realistas) utilicen en su código una determinada clase CSS, varias personas me han pedido poder cambiar la clase “ljoptimizer” (sigue siendo la predeterminada). Así que desde ahora puedes elegir el nombre de la clase para indicar que el enlace debe ofuscarse.
Elementos extra
A partir de la versión 2.1.0 he incluido la opción de que se pueda ofuscar cualquier enlace mediante su ID, clase CSS o su atributo href.
Por ejemplo: puedes ofuscar el enlace a la URL de la política de privacidad, aparezca donde aparezca, simplemente añadiendo la URL de destino en las opciones.
O en el caso de un enlace que quieres ofuscar pero cuya URL de destino es dinámica, puedes indicar el ID de su elemento padre (<div>, <ul>, <p>, <section>,…) o alguna de sus clases CSS y todos los enlaces que estén contenidos en ese elemento se ofuscarán.
Esto es especialmente útil para elementos de constructores visuales (Elementor, WPBakery, Beaver Builder,…) o para plugins y shortcodes en los que no se puede modificar el código que generan.
Inserción de Código CSS
Si ya has utilizado la primera versión del plugin o has ofuscado de manera manual, habrás tenido que añadir código CSS para que los enlaces ofuscados generados (etiquetas <span>) simulasen la apariencia y comportamiento del enlace al que sustituyen, añadiendo los estilos CSS del mismo. Ahora puedes incluir ese código directamente en un área de texto que, a su vez, será embebido en la etiqueta <head> de tu sitio web. Te recomiendo utilizar la extensión de Google Chrome “CSS Used” (a partir de la versión 77 de Chrome se incluye esta funcionalidad de forma nativa) con la que puedes obtener todos los estilos de un elemento mediante el inspector de elementos del navegador. Luego solo tienes que copiar y pegar el código en este área, sustituyendo eso sí las referencias al elemento “a” por el elemento “span”.
Ofuscar los enlaces de categorías de WooCoomerce
Suficientemente definitorio, lo que provoca marcar esta opción es que, por defecto y de manera global, los enlaces de categorías de WooCommerce serán ofuscados según el método elegido en las opciones comentadas anteriormente. ¡Ojo!, Por limitaciones de las funciones de WooCommerce, esto solo funciona dentro del loop de llamada a categorías, no a la generación individual de cada enlace.
Como digo, es una opción global, sin embargo puede ser sobreescrita de manera individual en cada categoría, de manera que puedas elegir:
- Ofuscar todas las categorías.
- Ofuscar todas las categorías excepto A, B y C.
- No ofuscar las categorías, pero sí D, E y F.
Ofuscar los enlaces de productos de WooCoomerce
De igual forma que la anterior, marcando esta opción puedes ofuscar los productos de WooCommerce dentro del loop. Funciona exactamente como la opción de categorías, de manera global pero anteponiendo el valor elegido en cada producto:
- Ofuscar todos los productos.
- Ofuscar todos los productos excepto A, B y C.
- No ofuscar los productos, pero sí D, E y F.
Ofuscar los enlaces “Añadir al carrito” de WooCommerce
Marcando esta opción se ofuscarán todos los enlaces (botones) “Añadir al carrito” que aparecen debajo de los productos en el loop. Esta opción es global y no puede sobreescribirse para cada producto.
¿Dónde funcionará la ofuscación de enlaces?
Una vez repasadas las opciones de configuración del plugin, veamos dónde y cómo podemos ofuscar enlaces.
Ofuscar enlaces dentro del contenido de post y páginas
Podemos añadir un enlace ofuscado mientras escribimos el contenido de un post o página. En la primera versión del plugin había que añadir manualmente la clase “ljoptimizer” al enlace para que se ofuscará en la parte pública de la web. Esto sigue funcionando (añade “ljoptimizer” o la clase CSS que hayas definido en los ajustes del plugin) tanto si editas contenido en Gutenberg como si lo haces en el editor clásico pero, si como yo, trabajas con éste último, también puedes ofuscar el enlace de manera más sencilla marcando un checkbox al tiempo de añadirlo.
También puedes seguir ofuscando los enlaces en un menú, pero ahora también es más sencillo mediante un checkbox en lugar de hacerlo con las clase CSS. Si cuando añades una nueva opción al menú no aparece el checkbox, guarda el menú y al momento aparecerá.
Ofuscar enlaces en widgets
En la primera versión solo se podían ofuscar enlaces en los widgets de texto y HTML, añadiendo las clase CSS del plugin. Ahora, puedes ofuscar los enlaces que aparezcan en CUALQUIER widget, marcando su checkbox correspondiente, independientemente de si se puede añadir la clase CSS o no, es decir, aunque no puedas modificar modificar manualmente los enlaces que genera el widget.
Ofuscar los enlaces de categorías, productos y botones “Añadir al carrito” de WooCommerce
Como comentaba anteriormente y dependiendo de la configuración que hayas elegido entre las opciones globales y particulares, los enlaces de categorías y productos de WooCommerce serán ofuscados cada vez que aparezcan dentro del loop (página de la tienda, páginas de categorías, productos relacionados,…).
Bloqueo del archivo JS en robots.txt
IMPORTANTE:
Como ya sucedía en la versión anterior del plugin, la recomendación para los más temerosos en cuanto a una posible penalización es el bloqueo del archivo JS que utiliza el plugin para desofuscar los enlaces. Para ello, añade esta línea en el archivo robots.txt de tu sitio web:
Disallow: /wp-content/plugins/link-juice-optimizer/public/js/
Explicación en vídeo
Descargar Link Juice Optimizer
Apoya mi trabajo
Las ideas para desarrollar herramientas gratuitas como este plugin se me ocurren cuando estoy disfrutando de una buena cerveza… Ahí lo dejo 😉
** Versión antigua **
Hace unos días, mientras leía mi timeline de Twitter, apareció un hilo de @madreSEOperiora (te recomiendo seguir esta cuenta si te interesa el SEO celestial) en el que hablaba sobre la optimización del crawl budget (en el mismo hilo tienes la definición):
?♀️OCTAVA parte del #CursoMadreSEOperiora
?Optimización del Crawl Budget (presupuesto de rastreo)
⬇ Dentro hilo ⬇ pic.twitter.com/IX7ga9WZ8s— Madre SEOperiora (@madreSEOperiora) February 21, 2018
En uno de los tweets, explicaba cómo ofuscar enlaces para que Google no pudiera seguirlos y, por tanto, no consumiese recursos del crawler. A lo que yo le respondí que se podía hacer algo más que añadir un evento onclick a la etiqueta <a>:
Yendo un paso más allá, sustituir la etiqueta <a> por un <span>, <p>, <button>,…
— Fede Gómez (@_fede_gomez_) February 21, 2018
Esto lo había visto en un experimento sobre ofuscación que realizó Lino Uruñuela y más tarde en un vídeo de Luis M. Villanueva (supongo que ya los sigues, si no ¡házlo!):
Bien, después de ponerte en situación, vamos con el tema del post.
¿Cómo ofuscar enlaces en WordPress?
Después de darle la réplica a @madreSEOperiora, estuve dándole vueltas y me puse a buscar por si existía un plugin para WordPress que hiciese eso precisamente, ofuscar enlaces, y no encontré ninguno. Así que… lo he creado.
A partir del post de Lino, del que he cogido parte del código y echando un ratillo, he desarrollado Link Juice Optimizer, para que puedas ofuscar enlaces en WordPress y mejorar tu presupuesto de rastreo.
¿Qué enlaces se pueden ofuscar con Link Juice Optimizer?
El plugin permite ofuscar enlaces en 3 partes de nuestro WordPress:
- Elementos de un menú.
- Enlaces dentro del contenido de post y páginas.
- Enlaces dentro del contenido de widgets HTML.
Para ofuscar un enlace, lo único que hay que hacer es aplicarle la clase ljoptimizer, después el plugin hará su trabajo mediante funciones PHP y javascript.
Y un ejemplo de cómo ofuscar un enlace en contenido o en un widget HTML:
<a href="http://destinodelenlace.com" class="ljoptimizer">anchor text del enlace</a>
Puedes ver el resultado en los enlaces al pie de este mismo sitio web (aviso legal, política de privacidad y política de cookies).
¿Qué hace el plugin exactamente para ofuscar los enlaces?
Como has visto más arriba, lo que hace el plugin es reemplazar las apariciones de enlaces que contengan la clase ljoptimizer por una etiqueta <span> con un atributo data-loc, cuyo valor es la dirección URL a la que apuntaba el enlace original, solo que está codificada en base64, y respetando su anchor text.
De manera paralela, un pequeño código javascript “escucha” cuando se hace clic en esa etiqueta, decodifica el atributo data-loc y envía el resultado a la ventana del navegador mediante la función window.location.href.
Un pequeño problema que se genera es que la etiqueta <span> no es clicable de manera nativa, por lo que al situar el ratón encima, el cursor no cambia al típico de la mano de un enlace. Para ello, hay que añadir al menos esta línea de código CSS:
.ljoptimizer {cursor:pointer;}
Aunque para darle el mismo aspecto del enlace al que reemplaza tendrás que indagar en el código fuente de tu sitio web y extraer todas las propiedades que se aplican a dicho enlace para añadirlas a la clase ljoptimizer.
IMPORTANTE:
Aunque quizás es rizar el rizo suponer que Google lea el código javascript y asocie la función que genera el cambio de URL en el navegador y, por tanto, siga interpretándolo como un enlace, para curarnos en salud es recomendable bloquear el archivo ljo_helpers.js. Para ello es necesario añadir esta línea en el archivo robots.txt de su sitio web:
Disallow: /wp-content/plugins/link-juice-optimizer-master/ljo_helpers.js
Si quieres probar el plugin puedes descargarlo aquí: Link Juice Optimizer (versión antigua no disponible)
Si tienes alguna duda puedes dejarme un comentario.
*Actualización: Como les estoy indicando a algunas personas y como comenta también @senormunoz en Twitter, lo ideal es probar el plugin en sitios poco importantes, es decir que no sean money sites, existe riesgo de penalización, pero… ¡qué sería del SEO sin experimentos!
Solo una cosa: como bien dice @_fede_gomez_ mucho cuidado con esto de ofuscar enlaces y no hacerlo nunca en money sites. Esto lo expliqué en el @seosarao del 2011 y se contó también la penalización que habíamos tenido. En el 2011.
— Señor Muñoz (@senormunoz) March 2, 2018
A probar y experimentar. Gracias por el aporte
Gracias por pasarte a comentar Rocío!
Genial, muchas gracias, lo voy a probar, por cierto funciona AMP?
Por cierto, yo hice un codigo un codigo en php para ofuscar las categorias, por si te interesa te lo paso.
Hola Mateo, gracias por comentar!
El plugin no soporta AMP. Los enlaces quedan ofuscados pero no son clicables 🙁
Respecto a tu plugin…, claro. Pásamelo a mi email y lo echo un vistazo.
Lo cierto es que está muy bien pensado, y creo que es necesario, sobre todo porque tampoco he encontrado una solución plugin para ofuscar con esta técnica, que creo que se comentó en el SEOClinic de 2017 en el eShowMadrid. La cuestión es.. mejora notablemente el crawl budget con respecto a las técnicas tradicionales de bloqueo?
Gracias por comentar Miguel Ángel.
¿Si hay mejora de crawl budget? Pues dependerá del la cantidad de URLs del sitio… Para sitios pequeños está claro que quizás no merezca la pena.
Hola Fede, muchas gracias por crear este plugin. Una duda.
Para ofuscar un enlace en el contenido, tengo que ponerle a mano el class=”ljoptimizer” ?
Gracias!
Hola Dani, gracias por comentar. Así es, hay que aplicarle la clase “ljoptimizer” al enlace, sea donde sea (menú, widget o contenido). Y “maquearlo” con CSS.
Voy a probarlo en dos web con algunos enlaces menú, pero poca cosa 🙂
en https://diariodelamancha.com
Muy bien David!! Gracias por pasarte a comentar.
Hola Fede, muy buen plugin, se podría hacer para que funcionara en vínculos de ventanas emergentes como la del plugin asesor de cookies, y por ejemplo para vínculos de botones responder en los comentarios.
Gracias Rafael. Lo de los enlaces en pop-up lo eché un vistazo en su momento, pero se complicaba bastante a la hora de construir una expresión regular con más tres atributos (href, class y target), teniendo en cuenta que pueden aparecer en cualquier orden. Al menos yo no fui capaz de construirla 🙁
Respecto a los enlaces para responder comentarios, es buena idea. Intentaré sacar un rato para incluirlo en el plugin.
Muchas gracias Fede. Se agradece 😉
No hay de qué!!
Hola Fede! Gran idea y gran plugin!
Sin embargo, tengo un problema. Utilizo tu plugin de varias maneras y no soy capaz de que acabe de funcionar el enlace (u ofuscarlo). Lo he probado de todas maneras con el HTML y no hay forma. He utilizado los siguientes códigos y nada:
<a href=”http://destinodelenlace.com” rel=”nofollow”>anchor text del enlace</a>
<a title=”Aviso Legal” rel=”nofollow”>Aviso Legal</a>
¿Puede ser problema de incompatibilidad con los plugins de caché?
Muchas Gracias
Hola Borja, gracias por tu comentario.
En el código te falta añadir la clase ljoptimizer a las etiquetas <a>. He echado un ojo a tu web y en el los enlaces del footer está bien implementado, creo que ya lo has solucionado. Lo único que te falta es añadir el CSS en el cursor para simular el enlace.
Muy buenas Fede.
Un lujo leerte, le he pegado un vistazo a los artículos de tu blog (me he puesto al día) y están muy bien, escribes muy claro y sin dar muchos rodeos.
Ahora me queda la duda de si ofuscar o no…. con esto de las penalizaciones… en fin, veremos a ver cómo avanza el tema
Un saludo!!!
Gracias por comentar Nicolás. Lo suyo es probarlo en un sitio no importante. Ya me contarás si te animas. Saludos!!
Hola,
Una estrategia más conservadora(para sites importantes o de empresa) sería poner no follow en los salientes y no index en la página en cuestión. Estas de acuerdo?
Gracias. Saludos!
Gracias por comentar Roger.
Como casi siempre, depende del proyecto. En cualquier caso (independientemente del noindex), aunque uses nofollow en los enlaces externos lo único que consigues es no pasar autoridad, pero el valor de ese enlace (su correspondiente cuota de pagerank) se pierde por el camino.
Un saludo.
Hola Fede, he instalado el plugin Link Juice Optimizer, y teniéndolo activo no me aparece la opción de poder añadir la clase ljoptimizer en Clases CSS (opcional) a los elementos de la estructura del menú. ¿Hay que realizar algo más para que aparezca esta opción en los elementos de menú? Me gustaría poder ofuscar los enlaces del menú. Gracias
Hola Juan,
Habilta la opción de añadir una clase CSS a un elemento del menú, estando en la pantalla de gestión de menús, arriba a la derecha haz clic en “Opciones de pantalla” y ahí selecciona “Clases CSS”. Después ya aparecerá la opción como en la captura que he incluido en el post.
Gracias Fede, no sabía cómo mostrarlo.
De cara a Google, ¿Qué penalización puede haber si esta ofuscación se utiliza para corregir los problemas de la plantilla con los menús?
Me asusta lo que decís de no utilizarlo en money sites, ¿tan graves pueden llegar a ser estas penalizaciones?
Yo no tendría tanto miedo. En el último Google I/O confirmaron que no siguen enlaces que no tengan atributo href, por lo que se deduce que no lo penalizan. Aquí tienes más info: https://twitter.com/_fede_gomez_/status/1017121784913678337?s=19
Interesante aporte estimado Fede y gracias por compartir tu experiencia.
Hola.
Si los enlaces los genero de manera automatizada a través de aawp. ¿Sabes cómo podría añadir la clase a todos los links autogenerados?
Me temo que solo personalizando las plantillas vía código. Aunque no sé qué opinión tendrá Amazon sobre enlaces ofuscados…
Genial señor Gomez te empiezo a seguir desde Colombia una saludo.
Hola Fede! Enhorabuena por el plugin. Seguro que lo voy a probar. Una cosa, ¿por qué exactamente puede penalizar la ofuscación de enlaces si realmente Google no puede detectarlo?
Enhorabuena por el artículo, nosotros estamos intentando ponerlo en marcha para nuestra empresa, esperamos que nos funcione, muchas gracias de nuevo.
Buenas fede!! Lo he probado en un par de webs y no se porque me rompe los estilos del menú (en todos ellos)
Hola Salva, sí, ya lo comento en el post, al cambiar la etiqueta <a> por <span> hay que aplicar los estilos CSS que tuviera dicha etiqueta para mantener la estética y comportamiento en el enlace ofuscado.
Hola, estaba intentando poner la clase directamente en la plantilla de wordpress, en los filtros que usa wordpress para ordenar los productos según precio, popularidad y demás… de wocommerce pero no me funciona para nada, no se si tienes alguna solución
Hola César, es muy probable que actualice el plugin para tratar más casos como el que comentas. Stay tuned!
Hola Fede, no me entiendo mucho de programacion pero estaba tratando de modificar el plugin, osea para poder cambiar la clase, porqué creo que si todos usamos el mismo plugin para ofuscar con la exacta identica clase pues ya dejamos un footprint bastante evidente. no crees?
Creo que puede ser tambien este un motivo de penalizacion xD … no enserio quiero saber tu opinion.
Hola Diego,
Sinceramente, no creo que Google penlalice una web porque utilice una clase concreta CSS en su código, teniendo en cuenta además que el número de sitios que pueden estar utilizando el plugin deben ser como mucho unos cientos. No obstante, en la próxima actualización se podrá especificar la clase a utilizar para evitar el patrón.
Hola buenas! Lo primero muchas gracias por desarrollar este plugin tan interesante.
Lo he estado probando en un ecommerce que gestiono, pero en esa web en cuestión está como modo catalogo y al activar la opción de ofuscar categorías no los ofusca ¿Puede ser el problema de que este en modo catalogo?
Si es por el modo catálogo puedes probar por unos segundos a desactivarlo y ver si así funciona la ofuscación. Si desactivándolo tampoco funciona debe ser “problema” del theme que tengas instalado y la forma (función dentro del código) en la que hace la llamada a las categorías.
Pedazo de plugin, Fede. Muchas gracias por la aportación
Gran aportación que pienso probar tan pronto como me sea posible. Perdía mucho tiempo tocando directamente el código y esto me facilitará mucho la vida 😛
Un gran artículo. Muchas gracias 🙂
Hola Fede!
Qué tal estás?
Antes que nada darte las gracias por la gran aportación de este plugin. He estado utilizando la versión antigua y poco a poco voy viendo algún resultado 🙂 Gracias de nuevo.
Quería hacerte una pregunta, a ver si pudieses ayudarme.
Estoy trabajando con un Theme prediseñado. Solo tengo que seleccionar opciones e introducir URLs para que cree automaticamente cajas o recuadros con vistas.
La cuestión es que me gustaría ofuscar esos enlaces, pero al no poderle poner la clase ljoptimizer o la que elijas con el plugin, me pregunto si hubiese otra manera.
Gracias y un saludo!
Hola José Manuel, esta semana habrá novedades al respecto… 😉