Cómo manejar la representación de JavaScript


JavaScript y SEO: Todo lo que necesita saber sobre JavaScript SEO y renderizado

Como manejar la representacion de JavaScript

Por: Bartosz Goralewicz

19 de junioel2018

1659298036 531 Como manejar la representacion de JavaScript

Con las posibilidades aparentemente infinitas de JavaScript, los sitios web comunes basados ​​solo en HTML y CSS se están convirtiendo en cosa del pasado. Pero si bien JavaScript permite una experiencia dinámica para los usuarios, también crea un campo minado para los desarrolladores. Debido a esto, JavaScript SEO se ha convertido en algo imposible de ignorar, particularmente cuando se trata de asegurarse de que Googlebot analice la representación correcta de JavaScript.

¿Cómo funciona JS?

Para aquellos que no están familiarizados con JavaScript, aquí hay una introducción rápida.

Junto con HTML y CSS, JavaScript es una de las tres tecnologías principales de desarrollo web. HTML se usa para crear páginas estáticas (lo que significa que el código se muestra en el navegador tal cual y no puede cambiar según las acciones del usuario), mientras que JavaScript hace que una página web sea dinámica. Un programador puede usar JavaScript para cambiar los valores y las propiedades de una etiqueta HTML cuando el usuario hace clic en un botón o elige un valor de un cuadro desplegable. JavaScript se coloca en la página junto con el código HTML y funciona junto con el código.

Representación del lado del cliente y del lado del servidor

Hay dos conceptos que debemos mencionar cuando hablamos de JavaScript. Y es muy importante comprender las diferencias entre ellos: renderizado del lado del servidor y renderizado del lado del cliente.

Tradicionalmente, como es el caso de las páginas HTML estáticas, el código se representa en el servidor (representación del lado del servidor). Al visitar una página, Googlebot obtiene el contenido completo y «listo», por lo que no necesita hacer nada más que descargar los archivos CSS y mostrar la información en su navegador.

JavaScript, por otro lado, generalmente se ejecuta en la máquina cliente (representación del lado del cliente), lo que significa que Googlebot inicialmente obtiene una página sin ningún contenido, y luego JavaScript crea el DOM (Document Object Model) que se usa para cargar el renderizado. contenido. Esto sucede cada vez que se carga una página.

Obviamente, si Googlebot no puede ejecutar y mostrar JavaScript correctamente, no podrá mostrar la página y el contenido principal que desea que vea. Y aquí es donde surgen la mayoría de los problemas con JavaScript SEO.

Ahora veamos cómo puede evitar estos problemas.

Cómo verificar si su sitio web se muestra correctamente

Lograr que Googlebot represente correctamente su sitio requiere que se concentre en representar adecuadamente tanto los enlaces como el contenido de su sitio web. Si no genera enlaces, Googlebot tendrá dificultades para orientarse en su sitio. Y si no representa correctamente el contenido de su sitio web, Googlebot no podrá verlo.

Aquí hay algunas opciones para ayudarlo a mejorar su futuro SEO de JavaScript.

1. El comando ‘sitio:’

En primer lugar, el sitio: El comando le mostrará cuántas páginas de su sitio web están indexadas actualmente por Google. Si muchos de ellos aún no están en el índice, podría ser una señal de problemas de renderizado con enlaces internos.

En segundo lugar, es posible que desee verificar si su contenido cargado con JavaScript ya está indexado por Google.

Para hacer eso, necesita encontrar una cierta línea de texto que no se presenta en su código HTML inicial y solo se carga después de que se ejecuta JavaScript. Después de eso, busca esta línea de texto en el índice de Google usando el comando ‘sitio:tudominio.com’.

1659298037 724 Como manejar la representacion de JavaScript

Tenga en cuenta que esto no funcionará con el comando cache:, ya que las versiones en caché de sus páginas contienen solo el código original, aún no procesado.

2. El GoogleBot de hoja perenne

Googlebot es el rastreador que visita las páginas web para incluirlas en el índice de búsqueda de Google. La pregunta número uno que Google recibió de la comunidad en eventos y redes sociales fue si podían hacer que Googlebot fuera perenne con la última versión de Chromium. Al momento de escribir, GoogleBot se ejecuta en la última versión de Chrome, 74.

Este es un cambio de juego para SEO, porque ahora puede verificar cómo Google realmente representa una página en lugar de adivinar y esperar lo mejor.

1659298037 389 Como manejar la representacion de JavaScript Nuevas funciones adicionales de la última creación de Google

3. Herramientas de desarrollo de Chrome

Algunas partes de su sitio web basado en JavaScript pueden programarse para ejecutarse con la acción de un determinado usuario: un clic, un desplazamiento, etc. Sin embargo, Googlebot no es un usuario. No hará clic ni se desplazará hacia abajo, por lo que simplemente no verá el contenido que está cargando en estas acciones.

La forma más rápida y sencilla de verificar si todos los elementos basados ​​en JavaScript están cargados sin ninguna acción del usuario es mediante Chrome DevTools:

  1. Abre tu sitio web en Chrome
  2. Abra la pestaña Elementos en DevTools
  3. Vea cómo se representó su página mirando a través del DOM de la página real creado por el navegador; asegúrese de que todos los elementos cruciales de navegación y contenido ya estén presentes allí.

Recomiendo verificarlo en Chrome 41. Esto le dará la confianza de que Googlebot técnicamente puede ver el elemento.

Por supuesto, también puedes comprobarlo en tu versión actual de Chrome y hacer algunas comparaciones.

1659298037 727 Como manejar la representacion de JavaScript

4. Búsqueda y procesamiento de Google Search Console

Otra herramienta útil, que puede darnos una idea de cómo Google renderiza nuestro sitio web, es la función Fetch and Render en Google Search Console.

Primero, tienes que copiar y pegar tu URL. Luego haga clic en ‘Obtener y renderizar’ y espere un momento. Esto le permitirá ver si Googlebot puede mostrar su página y ver cualquier artículo, copia o enlace relacionado.

1659298037 955 Como manejar la representacion de JavaScript

Aquí también puedes usar Prueba de compatibilidad con dispositivos móviles de Googleque le mostrará los errores de JavaScript y el código de la página renderizada.

5. Análisis de registros del servidor

Lo último a lo que puede recurrir para verificar cómo Googlebot rastrea su sitio web es el análisis de registros del servidor. Al observar detenidamente los registros del servidor, puede verificar si Googlebot visitó URL específicas y qué secciones rastreó o no Googlebot.

Hay muchos elementos que puede analizar gracias a los registros del lado del servidor. Por ejemplo, puede verificar si Googlebot visita sus artículos más antiguos; de lo contrario, probablemente haya un problema con los enlaces, que podría deberse a problemas con JS.

También puede verificar si Googlebot ve todas las secciones de su sitio web; de lo contrario, esto también podría deberse a problemas de renderizado.

Los registros del servidor no le mostrarán cómo Googlebot ve las páginas. Solo puede comprobar si se visitaron las páginas y qué códigos de respuesta se enviaron. Se necesitará un análisis adicional para determinar si JavaScript causó o no algún problema.

Además, al mirar los registros del servidor, puede verificar si Googlebot solicitó su JavaScript crucial para renderizar HTML o si lo ignoró por completo.

Posibles problemas en la renderización de su sitio web

Incluso si su página se procesa correctamente mediante Fetch and Render en Search Console, esto no significa que pueda sentarse y relajarse. Todavía hay otros problemas de los que debe estar atento.

Comencemos con algunos de los mayores problemas que podrían alterar seriamente sus planes de SEO de JavaScript…

1. Tiempos de espera

Aunque no se especifican los tiempos de espera exactos, se dice que Google no puede esperar un script de más de 5 segundos. Nuestros experimentos en Elefante confirma esta regla. Si la secuencia de comandos se carga durante más de 5 segundos, Google generalmente no indexará el contenido que se necesita para generar.

Fetch and Render le mostrará si Google puede procesar la página, pero no incluirá los tiempos de espera. Es importante recordar que Fetch and Render es mucho más indulgente que un Googlebot estándar, por lo que deberá dar un paso adicional para asegurarse de que los scripts que está entregando puedan cargarse en menos de 5 segundos.

2. Limitaciones del navegador

Como mencioné anteriormente, Google usa una versión un tanto obsoleta de su navegador para mostrar sitios web: el Chrome 41 de tres años. Y dado que JavaScript SEO y la tecnología detrás de él han evolucionado y continúan evolucionando muy rápido, algunos de sus Es posible que las funciones que funcionan en las últimas versiones de Chrome no sean compatibles con Chrome 41.

Por lo tanto, la mejor solución es descargar el navegador Chrome 41 (en el momento de escribir este artículo, la versión que utiliza Google para la representación web) y familiarizarse con él. Consulte el registro de la consola para ver dónde se producen los errores y solicite a sus desarrolladores que los corrijan.

3. Contenido que requiere la interacción del usuario para cargar

Sé que ya dije esto, pero realmente es necesario repetirlo: Googlebot no actúa como un usuario. Googlebot no hace clic en los botones, no expande «leer más», no ingresa pestañas, no llena ningún formulario… solo lee y sigue.

Esto significa que todo el contenido que desea representar debe cargarse inmediatamente en el DOM y no después de que se haya realizado la acción.

Esto es particularmente importante con respecto al contenido y los menús de «leer más», por ejemplo, en un menú de hamburguesas.

¿Qué podemos hacer para ayudar a Googlebot a representar mejor los sitios web?

La representación de sitios web de Googlebot no es una calle de un solo sentido. Hay muchas cosas que los desarrolladores pueden hacer para facilitar el proceso, lo que ayuda a destacar las cosas que desea que Googlebot represente y les brinda a los desarrolladores una buena noche de ensueño sobre el SEO de JavaScript exitoso.

Evite los enlaces ‘OnClick’

Los motores de búsqueda no tratan ‘onclick=»window.location=»‘ como enlaces ordinarios, lo que significa que en la mayoría de los casos no seguirán este tipo de navegación, y los motores de búsqueda definitivamente no los tratarán como señales de enlaces internos.

Es primordial que los enlaces estén en el DOM antes de hacer clic. Puede verificar esto abriendo las Herramientas para desarrolladores en Chrome 41 y verificar si los enlaces importantes ya se han cargado, sin ninguna acción adicional del usuario.

1659298038 171 Como manejar la representacion de JavaScript

Evitar # en las URL

los # el identificador de fragmento no es compatible e ignorado por Googlebot. Entonces, en lugar de usar el ejemplo.com/#url estructura de URL, trate de mantener el formato de URL limpio: ejemplo.com/url.

1659298038 576 Como manejar la representacion de JavaScript

URL únicas por una pieza única de contenido

Cada pieza de su contenido debe estar ubicada «en algún lugar» para que un motor de búsqueda la indexe. Por eso es importante recordar que si cambia dinámicamente su contenido sin cambiar una URL, está impidiendo que los motores de búsqueda accedan a él.

Evitar errores JS

HTML es muy indulgente, pero JavaScript definitivamente no lo es.

Si su sitio web contiene errores en los scripts JS, simplemente no se ejecutarán, lo que puede provocar que el contenido de su sitio web no se muestre en absoluto. Un error en la secuencia de comandos puede causar un efecto dominó que genera muchos errores adicionales.

Para verificar el código y mantener su JavaScript libre de errores, puede volver a usar Chrome DevTools y revisar la pestaña Consola para ver qué errores ocurrieron y en qué línea del código JavaScript.

No bloquee JS en robots.txt

Bloquear archivos JS es una práctica muy antigua, pero aún sucede con bastante frecuencia. Incluso a veces se presenta de forma predeterminada en algunos CMS. Y aunque el objetivo es optimizar el presupuesto de rastreo, bloquear archivos JS (y hojas de estilo CSS) se considera una práctica muy mala. No me lo quites, esto es lo que Google tiene que decir sobre el tema:

«Recomendamos asegurarse de que Googlebot pueda acceder a cualquier recurso incrustado que contribuya significativamente al contenido visible de su sitio o a su diseño…»

Así que ni sueñes con bloquear los rastreadores de los motores de búsqueda con algo como esto:

1659298038 870 Como manejar la representacion de JavaScript

De lo contrario, su SEO de JavaScript tendrá un verdadero éxito.

avance

Cuando descubra que Google tiene un problema al procesar su sitio web de JavaScript, puede usar la representación previa.

La renderización previa proporciona un documento HTML de renderizado JavaScript listo para usar de su sitio web. Esto significa que Googlebot no recibe HTML de procesamiento de JavaScript, sino HTML puro. Al mismo tiempo, el usuario que visita el sitio obtiene la misma versión rica en JavaScript de su página.

La solución más popular es usar servicios externos para la renderización previa, como Prerender.io, que es compatible con todos los marcos JS más importantes.

Esencialmente, renderiza HTML de una manera que también incluye todo el JavaScript potencial; solo necesita agregar un middleware o un fragmento a su servidor web.

El camino del siglo XXI

Una cosa es presentarle esta lista de pautas y consejos, pero otra completamente diferente es demostrar el proceso sobre cómo se pueden implementar. Usando una herramienta de los líderes en el mercado llamada WebSite Auditor, vamos a analizar un sitio de muestra en busca de errores comunes de JavaScript.

En esta herramienta se incluyen recomendaciones sobre cómo abordar otros problemas que encontrará en JavaScript, que sin duda serán útiles para quienes no tengan una experiencia de toda la vida en el manejo del lenguaje.

Comprobación de errores de JavaScript en Website Auditor

WebSite Auditor puede ejecutar JavaScript y rastrear contenido generado dinámicamente, exactamente como lo hacen los navegadores modernos (y Google). Eso significa que si su sitio está construido en AJAX (con una plataforma como Wix o Squarespace) o usa JavaScript para generar parte de su contenido, WebSite Auditor puede procesarlo, rastrearlo y analizarlo por completo, eliminando todo el trabajo pesado.

¿Por qué no probarlo y descargarlo gratis?

Resumen

El tema de JavaScript SEO es el tema más dinámico en el mundo de SEO y definitivamente merece su atención, especialmente porque se está desarrollando tan rápidamente. Los problemas descritos en este artículo son solo una pequeña parte de lo que puedes investigar para asegurarte de que Googlebot está representando correctamente tu sitio web. Si está interesado en obtener una imagen más grande, consulte Elephate’s Guía definitiva para JavaScript SEO.


1659298039 202 Como manejar la representacion de JavaScript
Por: Bartosz Goralewicz

Bartosz Goralewicz es cofundador de Elefante, que recientemente fue galardonada como «Mejor pequeña agencia de SEO» en los European Search Awards de 2018. Elephate cree en allanar nuevos caminos en la industria de SEO a través de campañas de SEO audaces y precisas para clientes, experimentos de SEO y estudios de casos. Bartosz lidera un equipo altamente especializado de expertos técnicos en SEO que trabajan en la optimización técnica profunda de grandes estructuras internacionales. El SEO técnico no es solo el trabajo de Bartosz, sino una de sus mayores pasiones, razón por la cual le gusta viajar por el mundo para compartir este entusiasmo con gente de SEO de ideas afines.

Deja un comentario

Tu dirección de correo electrónico no será publicada.

Ir arriba