SEO de JavaScript: mejores prácticas y herramientas de depuración

JavaScript tiene sus beneficios cuando se usa correctamente. Conozca las mejores prácticas y herramientas de JS SEO para la depuración de JavaScript aquí.

JavaScript es una gran opción para hacer que las páginas del sitio web sean más interactivas y menos aburridas.

Pero también es una buena forma de acabar con el SEO de un sitio web si se implementa de forma incorrecta.

Aquí hay una verdad simple: incluso las mejores cosas del mundo necesitan una forma de ser encontradas.

No importa qué tan bueno sea su sitio web, si Google no puede indexarlo debido a problemas de JavaScript, está perdiendo oportunidades de tráfico.

En esta publicación, aprenderá todo lo que necesita saber sobre las mejores prácticas de SEO de JavaScript, así como las herramientas que puede utilizar para depurar problemas de JavaScript.

Por qué JavaScript es peligroso para el SEO: ejemplos del mundo real

“Desde que rediseñamos nuestro sitio web en React, nuestro tráfico se ha reducido drásticamente. ¿Qué pasó?»

Esta es solo una de las muchas preguntas que escuché o vi en los foros.

Puede reemplazar React con cualquier otro marco JS; No importa. Cualquiera de ellos puede dañar un sitio web si se implementa sin tener en cuenta las implicaciones de SEO.

A continuación, se muestran algunos ejemplos de lo que potencialmente puede salir mal con JavaScript.

Ejemplo 1: la navegación del sitio web no se puede rastrear

¿Qué pasa aquí?

Los enlaces en la navegación no están de acuerdo con los estándares web. Como resultado, Google no puede verlos ni seguirlos.

Por qué está mal:

  • Hace que a Google le resulte más difícil descubrir las páginas internas.
  • La autoridad dentro del sitio web no se distribuye correctamente.
  • No hay una indicación clara de las relaciones entre las páginas del sitio web.

Como resultado, un sitio web con vínculos que el robot de Google no pueda seguir no podrá utilizar el poder de los vínculos internos.

Ejemplo 2: la búsqueda de imágenes ha disminuido después de una implementación incorrecta de la carga diferida

¿Qué pasa aquí?

Si bien la carga diferida es una excelente manera de disminuir el tiempo de carga de la página, también puede ser peligrosa si se implementa de manera incorrecta.

En este ejemplo, la carga diferida impidió que Google viera las imágenes en la página.

Por qué está mal:

  • Es posible que Google no descubra el contenido «oculto» bajo la carga diferida (si se implementa de forma incorrecta).
  • Si Google no descubre el contenido, el contenido no se clasifica.

Como resultado, el tráfico de búsqueda de imágenes puede sufrir mucho. Es especialmente importante para cualquier empresa que dependa en gran medida de la búsqueda visual.

Ejemplo 3: el sitio web se cambió para reaccionar sin tener en cuenta el SEO

¿Qué pasa aquí?

Este es mi ejemplo favorito de un sitio web que audité hace un tiempo. El propietario vino a verme después de que todo el tráfico se derrumbara. Es como si hubieran intentado matar sin querer su sitio web:

  • Las URL no se podían rastrear.
  • Las imágenes no se podían rastrear.
  • Las etiquetas de título eran las mismas en todas las páginas del sitio web.
  • No había contenido de texto en las páginas internas.

Por qué está mal:

  • Si Google no ve ningún contenido en la página, no clasificará esta página.
  • Si varias páginas tienen el mismo aspecto para el robot de Google, puede elegir solo una de ellas y canonicalizar el resto.
  • En este ejemplo, las páginas del sitio web se veían exactamente iguales para Google, por lo que las desduplicaron y usó la página de inicio como una versión canónica.

Algunas cosas que necesita saber sobre las relaciones entre Google y JavaScript

Cuando se trata de cómo Google trata su contenido, hay algunas cosas principales que debe saber.

Google no interactúa con su contenido

El robot de Google no puede hacer clic en los botones de sus páginas, expandir / contraer el contenido, etc.

El robot de Google solo puede ver el contenido disponible en HTML renderizado sin ninguna interacción adicional.

Por ejemplo, si tiene una sección de texto expandible y su texto está disponible en el código fuente o en HTML renderizado, Google lo indexará.

Por el contrario, si tiene una sección en la que el contenido no está disponible inicialmente en el código fuente de la página o DOM y se carga solo después de que un usuario interactúa con él (por ejemplo, hace clic en un botón), Google no verá este contenido.

Google no se desplaza

Googlebot no se comporta como un usuario habitual en un sitio web; no se desplaza por las páginas. Entonces, si su contenido está «oculto» detrás de una cantidad infinita de pergaminos, Google no lo verá.

Google no ve el contenido que se procesa solo en un navegador frente a un servidor.

Es por eso que la representación del lado del cliente es una mala idea si desea que Google indexe y clasifique su sitio web (y lo desea si necesita tráfico y ventas).

Ok, ¿JavaScript es realmente tan malo?

No si JavaScript se implementa en un sitio web utilizando las mejores prácticas.

Y eso es exactamente lo que voy a cubrir a continuación.

Prácticas recomendadas de JavaScript SEO

Agregar enlaces de acuerdo con los estándares web

Si bien los «estándares web» pueden parecer intimidantes, en realidad, solo significa que debe vincular a páginas internas utilizando el atributo HREF:

<a href=”your-link-goes-here”>Su texto de ancla relevante</a>

De esta manera, Google puede encontrar fácilmente los enlaces y seguirlos (a menos que les agregue un atributo nofollow, pero esa es una historia diferente).

No utilice las siguientes técnicas para agregar enlaces internos en su sitio web:

window.location.href=‘/page-url‘

<a onclick=“goto(‘https://store.com/page-url’)”>

#page-url

Por cierto, la última opción aún se puede usar con éxito en una página si desea llevar a las personas a una parte específica de esta página.

Pero Google no indexará todas las variaciones individuales de su URL con «#» agregado.

Agregar imágenes de acuerdo con los estándares web

Al igual que con los enlaces internos, el uso de imágenes también debe seguir los estándares web para que el robot de Google pueda descubrir e indexar imágenes fácilmente.

Para ser descubierto, una imagen debe estar vinculada desde la etiqueta HTML «src»:

<img src=”image-link-here.png” />

Muchas bibliotecas de carga diferida basadas en JavaScript utilizan un atributo «data-src» para almacenar la URL de la imagen real y reemplazan la etiqueta «src» con una imagen de marcador de posición o un gif que se carga rápidamente.

Por ejemplo:

<img data-src="image-link-here.png" class="inline lazyloaded" src="placeholder-imge.gif"></div>
<img data-src>

almacena información adicional sobre la imagen.

Ayuda con la optimización de la velocidad de la página y funciona bien si se implementa correctamente.

Si desea que Google elija su imagen real en lugar del marcador de posición, cambie la imagen del marcador de posición a la imagen de destino para que muestre la ruta a la imagen de destino.

Durante el reciente evento en vivo de Google Search Central, realicé un estudio de caso en vivo sobre cómo depurar problemas con imágenes cargadas de forma diferida mediante una biblioteca de JavaScript.

Alternativamente, puede eliminar JavaScript mediante la carga diferida nativa. que ahora es compatible con muchos navegadores.

Usar renderizado del lado del servidor (Server-Side Rendering)

Si desea que Google lea y clasifique su contenido, debe asegurarse de que este contenido esté disponible en el servidor, no solo en el navegador de un usuario.

Alternativamente, puede utilizar la representación dinámica, lo que implica detectar motores de búsqueda y ofrecerles páginas HTML estáticas mientras los usuarios reciben contenido HTML + JavaScript en sus navegadores.

Asegúrese de que el HTML renderizado tenga toda la información principal que desea que Google lea

Debe asegurarse de que el HTML renderizado muestre la información correcta, como:

  • Copiar en la página.
  • Imágenes.
  • Etiqueta canónica.
  • Título y meta descripción.
  • Etiqueta meta robots.
  • Datos estructurados.
  • hreflang.
  • Cualquier otra etiqueta importante.

Herramientas para depurar la implementación de JavaScript para SEO

Atrás quedaron los días en los que solo necesitabas mirar el código fuente de una página para comprobar si incluye el contenido correcto.

JavaScript lo ha hecho más complicado, ya que puede agregar, eliminar o cambiar diferentes elementos. Mirar el código fuente no es suficiente; en su lugar, debe verificar el HTML renderizado.

Paso 1: compruebe cuánto depende un sitio web de JavaScript para ofrecer el contenido

Lo primero que suelo hacer cuando veo un sitio web que se basa en JavaScript es comprobar cuánto depende de él. La forma más sencilla de hacer esto es deshabilitar JS en su navegador.

Utilizo la extensión de Chrome Web Developer para eso.

Simplemente abra la configuración, haga clic en Desactivar JavaScript y vuelva a cargar la página:

Una vez que lo hagas, verás cómo se vería una página sin JS.

En el ejemplo anterior, puede ver que no hay contenido disponible sin JavaScript.

Tenga en cuenta que este método solo le brinda una descripción general de cuánto influye JavaScript en la entrega de contenido. No le dice si Google lo indexará o no.

Incluso si ve una página en blanco como la anterior, no significa que nada esté funcionando. Simplemente significa que un sitio web depende en gran medida de JavaScript.

Es por eso que debe probar el HTML renderizado con las herramientas que le mostraré en el siguiente paso.

Paso 2: compruebe si el robot de Google tiene el contenido y las etiquetas correctos
Herramienta de prueba optimizada para dispositivos móviles de Google

La herramienta de prueba optimizada para dispositivos móviles de Google es una de las mejores y más confiables herramientas cuando se trata de verificar HTML renderizado para dispositivos móviles porque obtiene información directamente de Google.

Qué necesitas hacer:

  1. Cargue la herramienta compatible con dispositivos móviles.
  2. Verifique su URL.
  3. Mire la información en la pestaña HTML:

Ahí es donde entra el lado técnico del SEO, ya que tendrás que verificar el código para asegurarte de que tenga la información correcta.

Nota: también puede utilizar la herramienta Prueba de resultados enriquecidos para realizar estas comprobaciones:

Herramienta de inspección de URL en Google Search Console

La herramienta de inspección de URL también le brinda acceso al HTML sin procesar de su página que el robot de Google utiliza para evaluar el contenido de su página:

La herramienta de prueba compatible con dispositivos móviles frente a la herramienta de inspección de URL

Bien, entonces, ¿cuál es la diferencia entre estas herramientas y cuál es la preferida?

La respuesta corta es que no hay diferencia en el resultado, ya que la prueba de optimización para dispositivos móviles y la herramienta de inspección de URL utilizan la misma tecnología principal.

Sin embargo, existen algunas diferencias en otros aspectos:

  1. Para utilizar la Herramienta de inspección de URL, debe tener acceso a la Consola de búsqueda de Google del sitio web que está consultando. Si no tiene dicho acceso, utilice la Prueba de optimización para dispositivos móviles (o Prueba de resultados enriquecidos).
  2. La herramienta de inspección de URL puede mostrarle dos versiones de la misma página: la última versión rastreada y la versión en vivo. Es útil si JavaScript acaba de romper algo y puede comparar la nueva implementación con la anterior.

La prueba de optimización para dispositivos móviles y la prueba de resultados enriquecidos le brindan el resultado solo para la versión actual de su página en vivo.

Otras herramientas de depuración

Ver extensión de Chrome de fuente renderizada

Me encanta esta extensión, ya que muestra la diferencia entre el código fuente y el HTML renderizado. Le brinda una descripción general de los cambios de JavaScript en la página:

Nota: asegúrese de verificar el HTML renderizado para dispositivos móviles en comparación con el escritorio.

Para hacer esto, primero debe cargar una vista móvil en la herramienta de inspección de Chrome y luego usar la extensión Ver fuente renderizada:

Comprobación de representación de JavaScript

Creo que esta es la herramienta de depuración de JS más fácil de usar, ya que ni siquiera es necesario verificar el código.

Verifica los elementos principales en el código fuente de la página por usted y los compara con los mismos elementos en el HTML renderizado (nuevamente, asegúrese de verificar la versión móvil):

En este ejemplo, veo que JavaScript cambia los elementos principales de la página, como la etiqueta de título, los enlaces internos y canónicos.

No siempre es algo malo, pero como profesional de SEO, deberá investigar si estos cambios dañan la página que está revisando o no.

También puede utilizar la extensión SEO Pro para ver la etiqueta de título y otras etiquetas importantes que se encuentran en HTML renderizado, no en el código fuente:

Prefiero usar una combinación de las herramientas mencionadas anteriormente para investigar problemas de SEO de JavaScript o asegurarme de que se implementen las mejores prácticas.