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