Cómo modificar cualquier página con JavaScript para mejorar el SEO de una web.
Se suele mencionar mucho JavaScript en el SEO por temas de mejoras en el WPO o incluso de renderizado. También se suele mencionar este lenguaje de programación, porque hacer SEO en Frameworks de JS (JavaScript) requiere un enfoque distinto y un conocimiento mayor al promedio.
Sin embargo, no se suelen mencionar tanto las características y ventajas que tiene el uso de JavaScript y cómo podemos hacer uso de él para mejorar o cambiar cualquier aspecto de nuestra web a modo de parche.
En este artículo, te voy a explicar todo desde el principio y cómo te puedes valer de esto para cambiar absolutamente cualquier web, por qué funciona y cómo hacerlo con un conocimiento medianamente avanzado. Pero también te diré, al final, un truco para poder aplicar esto en cualquier web de una forma escalable, independientemente del nivel de SEO o programación que tengas.
JavaScript, por defecto, es un lenguaje de cara al usuario. Esto quiere decir, que es un lenguaje de programación que funciona y se ejecuta en el ordenador (concretamente navegador) del usuario. Es decir, no será el hosting ni el servidor de la web, sino el visitante desde su móvil y ordenador el que ejecutará el lenguaje de programación y las modificaciones pertinentes.
Se puede entender, por esto mismo, que esto repercute en una carga y un consumo para aquel que rastree la página, ya que la responsabilidad de esto recae en el usuario. Es por este motivo, que cuando ejecutamos un rastreo de nuestra web con JavaScript, se tarda mucho más que cuando rastreamos la web sin JavaScript, y esto es clave para entender cómo lo hace Google, porque el tiempo son recursos y dinero. (Ahrefs por cierto, lleva rastreando con JS desde 2018).
JavaScript también permite, gracias a funcionar desde el lado del usuario, que este pueda interactuar con la página web.
Para que nos hagamos una idea, podríamos decir que JavaScript es un “lenguaje parche”. El servidor primero nos arroja todos los archivos, HTML, CSS, JS y multimedia.
Una vez que nos llega la estructura de HTML, el usuario comienza a ejecutar el JS, cuando desde el HTML, se le dice que ejecute dichos Scripts y, estos, comienzan a interactuar y a modificar el propio código de HTML.
Digamos que el código de HTML que te llega es el DOM, que es lo que podemos ver cuando le damos a CTRL+U o añadimos view-source: a la URL que estamos investigando
Sin embargo, ese código no tiene por qué ser el mismo que vemos en el inspector de elementos de nuestra web:
Ya que el JS puede modificar el HTML de nuestra web, lo cual a los SEOs nos puede ser de gran utilidad para modificar contenido que de otra forma no podríamos cambiar.
Si estos cambios son ejecutados “rápidamente” por medio de JavaScript, Google será capaz de procesarlo.
Para saber si Google procesa o no los cambios de una forma correcta, lo podemos comprobar en el inspector de URLs de nuestra Search Console y, si no tenemos acceso, podemos utilizar el testeador de datos estructurados de Google, y aunque no esté hecho con ese propósito, puedes ver el HTML final con el Page Inspect de ahrefs.
Si bien Google puede renderizar y procesar JavaScript, tenemos que tener claros unos aspectos para poder sacarle todo el potencial a JavaScript.
El hecho de que como hemos comentado, el JavaScript se ejecute en el usuario, quiere decir que podemos insertar JavaScript y modificar la web a nuestro antojo independientemente de con qué lenguaje de programación esté hecho.
Esto quiere decir que si tenemos una web con un plugin de Cookies que nos añade un h1, o trabajamos en una web en una tecnología que no nos deja modificar el código, aun así podemos cambiar y modificar el resultado final.
Solo necesitamos que se cumplan ciertas condiciones que no podremos salvar sólo con JS en caso de no aplicarse:
Si se cumplen estas condiciones, en principio Google tratará de renderizar la URL y sólo tendrá en cuenta el DOM final, que se puede calcular aproximadamente en el resultado que tiene la web unos 5 segundos después de ser cargada, por lo que en este caso el WPO también es importante.
Debemos tener algún espacio desde el back o algún lugar de nuestra web, donde cargar un archivo JavaScript externo, o poder añadir las etiquetas Scripts por medio de HTML.
Es importante tener en cuenta, como he mencionado anteriormente, que para que tenga efecto el cambio que queremos realizar en nuestra web, el Script se debe ejecutar a posteriori.
¿Cómo debería hacerse? Si no quieres tener nada que ver con código, puedes verlo en la parte final del artículo donde explico como hacer estos cambios sin saber nada de programación.
Si sabes de programación o tienes curiosidad sobre cómo se hace, te lo explico aquí mismo.
En JavaScript para realizar algún cambio en algún elemento, tiene que saber cómo seleccionarlo.
Voy a añadir ejemplos de cómo modificaríamos un enlace de distintas formas por medio de JS:
Imaginemos que tenemos este enlace:
<a href="https://example.com" class="example-link" target="_blank" rel="nofollow">Haz clic aquí</a>
Pues, por medio de JavaScript podríamos hacer distintas cosas:
Recuerda que si no saber como inyectar JavaScript en tu web, lo puedes ver en este artículo sobre cómo modificar una web sin saber programación. O desde el Tag Manager como explico después de los ejemplos.
// Seleccionamos el enlace con la clase "example-link"
const link = document.querySelector('.example-link');
// Modificamos el texto usando innerHTML
link.innerHTML = 'Este es el nuevo Anchor Text';
// Seleccionamos el enlace con la clase "example-link"
const link = document.querySelector('.example-link');
link.outerHTML = `<div class="container">${link.outerHTML}</div>`;
// Seleccionamos el enlace con la clase "example-link"
const link = document.querySelector('.example-link');
link.href = 'https://nuevo-enlace.com';
// Seleccionamos el enlace con la clase "example-link"
const link = document.querySelector('.example-link');
link.removeAttribute('target');
// Seleccionamos el enlace con la clase "example-link"
const link = document.querySelector('.example-link');
if (newLink.rel === 'nofollow') { newLink.rel = 'noopener'; }
Como se puede observar, se puede hacer prácticamente cualquier modificación sobre cualquier elemento, lo único que hay que saber es cómo seleccionarlo y cómo cambiarlo utilizando los propios comandos de JavaScript.
Esto es un ejemplo real de un Script que sustituye los Headings de la conocida plataforma onetrust de una forma mucho más simple que por medio de la propia plataforma. Simplemente debes asegurarte de que tu Script cargue después que el de onetrust.
// Seleccionar el elemento contenedor por ID
const container = document.getElementById('onetrust-pc-sdk');
if (container) {
// Seleccionar todos los headings h1, h2, h3, h4 dentro del contenedor
const headings = container.querySelectorAll('h1, h2, h3, h4');
headings.forEach(heading => {
// Crear un nuevo elemento div
const div = document.createElement('div');
// Copiar todos los atributos del heading al div
Array.from(heading.attributes).forEach(attr => {
div.setAttribute(attr.name, attr.value);
});
// Copiar el contenido del heading al div
div.innerHTML = heading.innerHTML;
// Reemplazar el heading con el div en el DOM
heading.replaceWith(div);
});
}
Si, por lo que sea, no sabes cómo modificarlo dentro de la web, o no tienes acceso, podrías hacerlo por medio del propio Tag Manager, ya que al fin y al cabo es un Script que permite insertar otros Scripts y te permite añadir el tuyo propio.
Como te dije antes, aquí viene la solución, si no sabes de programación, para poder modificar con JavaScript los elementos de tu web.
Con Patches de Ahrefs se puede modificar, utilizando el mismo principio, pero sin necesidad de saber de JavaScript.
Con el plan Max de ahrefs, en la categoría de Site Audit puedes utilizar Patches para modificar elementos sin la necesidad de saber de JavaScript.
El principio y la ejecución es la misma, pero ya no tienes que pensar para ver y obtener el resultado final.
Gracias a JavaScript, y a cómo renderiza Google a día de hoy una web, podemos modificar un elemento a pesar de que esta web no se haya programado adecuadamente o no nos permitan cambiarlo desde la base, es decir que lo podemos hacer independientemente del FrameWork o del CMS. Ahorrando un montón de tiempo en modificar el core de una web o dependiendo de los tiempos a veces ilógicos que pueden tener ciertos departamentos de IT.
Si bien es cierto que no es perfecto, ya que el cambio se hace cuando se ejecuta el JS y a veces puede tener un efecto visual no deseado de cara al usuario, es una herramienta o táctica más que podemos añadir a nuestros proyectos para tener menos limitaciones a la hora de implementar nuestras estrategias, ya que cualquier elemento en cualquier entorno web es modificable y legible por parte de Google.
Te falta mi máster. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB
¡Accede al Máster de SEO Técnico!