Bookmarklets personalizados para SEO y tareas de Marketing Digital

En cualquier trabajo hay tareas rutinarias, procesos que haces día tras día incluso varias veces. Poder hacer estas tareas de forma semi-automática o en menos tiempo marca la diferencia para ser más efectivo en tu trabajo.

Los bookmarks, marcadores o favoritos son aquellos enlaces que guardas en la barra de tu navegador. Podemos editar estos marcadores e insertar un pequeño script para realizar tareas más rápido.

Este artículo está basado en un post de Glen Allsopp

https://detailed.com/chrome-bookmarklets-seo/

Abrir varias url’s a la vez

En el caso de que tengas que abrir diariamente un par de páginas concretas, la solución de guardarte dichas url’s como hacemos normalmente es la solución más sencilla. El problema empieza cuando acumulas cientos de enlaces en la barra de marcadores y tienes que ir buscando y haciendo clic en cada uno de ellos.

En estos casos podemos abrir las páginas que queramos en diferentes pestañas con un solo clic.

Consejo: En ocasiones algunas extensiones de Chrome afectan al funcionamiento de los bookmarks que creemos. Si tienes errores, prueba a deshabilitarlos.

Imaginemos que diariamente tengo que chequear el Analytics de 5 clientes (o Search Console, Google Ads…). Todos los días reviso el tráfico por canales, tráfico de las landing, páginas vistas, conversiones y eventos. En total 5 url’s por 5 clientes = 25 páginas.

Veamos como podríamos crear un bookmark que abriera cada una de esas pestañas a golpe de clic. Para ello, solo tienes que seguir estos pasos:

1 – Ve a Administrador de marcadores

2 – Clic en Añadir nuevo marcador

3 – Introducir el siguiente código en url

javascript:(function(){
	window.open('https://analytics.google.com/analytics/web/#/report/acquisition-channels/....inserta la url completa de tu informe....');
	window.open('https://analytics.google.com/analytics/web/#/report/content-landing-pages/....');
	window.open('https://analytics.google.com/analytics/web/#/report/content-pages/...');
	window.open('https://analytics.google.com/analytics/web/#/report/conversions-goals-overview/...');
	window.open('https://analytics.google.com/analytics/web/#/report/content-event-overview/...');
        .......etc.....
})();

¡Listo! Cada día podré revisar los datos directamente sin tener que ir navegando por la interfaz de Analytics, Google Ads… y repitiendo los mismos pasos diariamente.

Auditar un dominio

Cada vez que analizamos un dominio consultamos la información que arrojan diferentes herramientas: Ahrefs, Semrush, Sistrix… etc.

Al final, el número de ventanas y el tiempo de abrir y acceder a la información que nos interesa puede ser de varios minutos.

Una vez más, podemos configurar un script para abrir y analizar un dominio con todas las herramientas que queramos con un clic. Para ello:

Repite los pasos 1 y 2 del punto anterior cada vez que quieras añadir un bookmark

1 – Introduce el siguiente código

javascript:(function(){	
new Promise(setQuery => {let input = window.prompt('Dominio a auditar:');

if (input) setQuery(input);}).then(query => {
 
window.open('https://es.sistrix.com/' + query);
window.open('https://es.semrush.com/es/info/' + query);
window.open('https://builtwith.com/' + query);
window.open('https://web.archive.org/web/*/' + query);

....etc...
}

);})();

Cada vez que quieres auditar un dominio, solo tienes que clicar en el bookmark que has creado, saltará una ventana de diálogo, introduces el dominio y automáticamente se abren tantas herramientas como hayas configurado en el script.

Scrapear las SERPS de Google

Si necesitas extraer las url’s de los dominios que aparecen para una determinada consulta en Google, este script nos facilita el proceso. Existen varias extensiones de Chrome con las que se puede conseguir lo mismo pero requiere instalarlas en el navegador lo que a la larga en mi opinión es un engorro, al final acabamos teniendo cien mil iconos de extensiones.

Si te vale con los 10 primeros resultados no hace falta que configures nada. Si necesitas más ve a Configuración de búsqueda y elige el nº de resultados que necesitas.

1 – Introduce el siguiente código

javascript:let a = document.getElementsByTagName('a'), arr = '';

for(let i=0; i<a.length; i++) 

if (a[i].ping && !a[i].href.includes('google'))
arr +=('<p>' + a[i].href + '</p>');

let newWindow = window.open();newWindow.document.write(arr) ;newWindow.document.close();

Lo probamos para los resultados para “seguros de coches”.

Una vez hacemos clic en nuestro bookmark se nos abre una ventana con todos los resultados.

Extraer los encabezados

En esta ocasión, si nos interesa saber qué elementos son encabezados (h1, h2, h3…) también podemos utilizar un script.

De momento no he conseguido que los encabezados salgan en orden en una única ventana (como en la extensión Web Developer), en cuanto lo consiga actualizaré el post con el código.

1 – Introduce el siguiente código

javascript:(function(){

let h1 = document.getElementsByTagName('h1'), arr = '';
for(let i=0; i<h1.length; i++) 
arr +=('<p>h1 ' + h1[i].textContent + '</p>'); let newWindow = window.open();newWindow.document.write(arr);newWindow.document.close();

let h2 = document.getElementsByTagName('h2'), arr = '';
for(let i=0; i<h2.length; i++) 
arr +=('<p>h2 ' + h2[i].textContent + '</p>'); let newWindow = window.open();newWindow.document.write(arr);newWindow.document.close();

let h3 = document.getElementsByTagName('h3'), arr = '';
for(let i=0; i<h3.length; i++) 
arr +=('<p>h3 ' + h3[i].textContent + '</p>'); let newWindow = window.open();newWindow.document.write(arr);newWindow.document.close();

let h4 = document.getElementsByTagName('h4'), arr = '';
for(let i=0; i<h4.length; i++) 
arr +=('<p>h4 ' + h4[i].textContent + '</p>'); let newWindow = window.open();newWindow.document.write(arr);newWindow.document.close();

})();

Extraer los links totales

De la misma forma que podemos scrapear la página de resultados de Google y conseguir todas las url’s a golpe de click, podemos conseguir la dirección de todos los enlaces que haya en la página web que estamos.

1 – Introduce el siguiente código

javascript:var a = document.getElementsByTagName('a'), arr = '';

for(var i=0; i<a.length; i++) 

arr +=('<p>' + a[i].href + '</p>');

var newWindow = window.open();newWindow.document.write('<strong>Enlaces totales:' + i + '</strong>');newWindow.document.write(arr);newWindow.document.close();

Ejemplo de lo que obtenemos utilizando el bookmark en la home de Amazon.

Extraer los links externos

Lo que obtenemos con este código son los links a otras webs y a los subdominios de la página en la que estamos.

1 – Introduce el siguiente código

javascript:var a = document.getElementsByTagName('a'), arr = '';
	
for(var i=0; i<a.length; i++) 

	if (!a[i].href.includes(window.location.hostname))

	    {arr +=('<p>' + a[i].href + '</p>')}
        ; 

var newWindow = window.open();newWindow.document.write(arr);newWindow.document.close();

Estos son los links de www.amazon.es.

Exportar los datos extraídos a excel

Para optimizar el proceso aún más, podemos configurar nuestro bookmarklet para poder exportar los datos scrapeados a un excel a golpe de click.

Para ello utilizaremos el siguiente script cortesía de Mike Bostock y nos basaremos en un bookmarklet que compartió Natzir Turrado .

Ejemplo del resultado de scrapear Google para la búsqueda “best seo tools”, con el javascript modificado para enviar los datos a un excel.

1 – Introduce el siguiente código

javascript:(function(){
    let arr ="<html><head><title>Google Scrapping</title></head><body><button onclick=\"tableToExcel('serps')\">Export Google SERPS</button><table%20id=\"serps\"><tr><th>SERPS</th></tr>";
    var a = document.getElementsByTagName('a');   

    for(var i=0; i<a.length; i++) {
        if (a[i].ping && !a[i].href.includes('google')) {
            
            arr +=('<tr><td>' + a[i].href + '</tr></td>');
            }
        };
        arr +="</table>";
        with(window.open()){   document.write(arr);document.body.appendChild(document.createElement('script')).src='https://bl.ocks.org/insin/raw/1031969/tableToExcel.js';document.close();
        
        }})();

Próximamente iré añadiendo más ejemplos de cómo podemos utilizar los bookmarklets personalizados en nuestro día a día. ¿Alguna idea para crear nuevos atajos que nos faciliten la vida?