Prácticas recomendadas de SEO de JavaScript y herramientas de depuración

JavaScript es una gran opción para hacer que las páginas de un 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 incorrectamente.

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 usar 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.

Anuncio publicitario

Continuar leyendo a continuación

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

El sitio web no se puede rastrear: errores de JS SEO ¿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 dentro del sitio web.

Como resultado, un sitio web con enlaces que Googlebot no puede seguir no podrá utilizar el poder de los enlaces internos.

Anuncio publicitario

Continuar leyendo a continuación

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

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 incorrectamente.

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” en 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

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 involuntariamente intentaran matar 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 el robot de Google ve varias páginas iguales, puede elegir solo una de ellas y canonizar 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.

Anuncio publicitario

Continuar leyendo a continuación

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 donde 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á.

Anuncio publicitario

Continuar leyendo a continuación

Ver: Martin Splitt de Google sobre la indexación de páginas con Infinite Scroll.

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:

Your relevant anchor text

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’
  • #URL de la página

Anuncio publicitario

Continuar leyendo a continuación

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.

Consulte: Google SEO 101: Qué hacer y qué no hacer con los enlaces y JavaScript.

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’:

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:

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 recoja 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 muestra la ruta a la imagen de destino.

Anuncio publicitario

Continuar leyendo a continuación

Durante el reciente evento en vivo de Google Search Central, hice 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

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.
  • Imagenes
  • Etiqueta canónica.
  • Título y meta descripción.
  • Etiqueta meta robots.
  • Datos estructurados.
  • hreflang.
  • Cualquier otra etiqueta importante.

Debe asegurarse de que el HTML renderizado muestre la información correcta.

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.

Anuncio publicitario

Continuar leyendo a continuación

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 en qué medida un sitio web depende de JavaScript para ofrecer el contenido

Lo primero que suelo hacer cuando veo un sitio web que se basa en JavaScript es marcar Deshabilitar JavaScript y volver a cargar la página:

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.

Anuncio publicitario

Continuar leyendo a continuación

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 necesita 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 compatible con 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:

Comprobación de HTML de la herramienta de prueba compatible con dispositivos móviles de Google

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

Anuncio publicitario

Continuar leyendo a continuación

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

Herramienta de prueba de resultados enriquecidosHerramienta 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 Googlebot utiliza para evaluar el contenido de su página:

Herramienta de inspección de URL en Google Search ConsoleLa 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?

Anuncio publicitario

Continuar leyendo a continuación

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

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 porque 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:

Una descripción general de los cambios de JavaScript en la página

Nota: asegúrese de marcar móvil HTML renderizado frente a escritorio.

Anuncio publicitario

Continuar leyendo a continuación

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:

Cargue una vista móvil en la herramienta de inspección de Chrome y luego use la extensión Ver fuente renderizadaComprobación de representación de JavaScript

Creo que esta es la herramienta de depuración 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):

Comprobación de representación de JavaScript

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.

Anuncio publicitario

Continuar leyendo a continuación

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 usar 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:

Utilice la extensión SEO Pro para ver la etiqueta de título y otras etiquetas importantes que se encuentran en HTML renderizado.

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.

Anuncio publicitario

Continuar leyendo a continuación

Todas las capturas de pantalla fueron tomadas por el autor, marzo de 2021