Todo lo que necesitas saber sobre JavaScript SEO

Pregúntale a cualquier programador y te dirá lo que piensa acerca de JavaScript.

Desde el momento de su lanzamiento, JavaScript (JS) ha sido el lenguaje de programación más popular utilizado por los desarrolladores web en todo el mundo. Una encuesta reciente realizada por Stack Overflow entre desarrolladores web revela que JavaScript es el lenguaje de programación preferido durante ocho años seguidos.

JS permite a los desarrolladores web crear aplicaciones web a gran escala con facilidad. Tiene una capacidad excepcional para actualizar dinámicamente las páginas y hacerlas más interactivas. Además, los marcos de JavaScript como AngularJS, ReactJS, Vue y NodeJS reducen significativamente la cantidad de tiempo y esfuerzo necesarios para desarrollar sitios basados ​​en JS. No es de extrañar que JavaScript sea la base del 96 por ciento de los sitios web a nivel mundial.

Sin embargo, los sitios basados ​​en JS parecen tener una relación de amor y odio con Google. JavaScript puede controlar y alterar HTML fácilmente para hacer que las páginas web sean dinámicas e interactivas, mejorando así la UX del sitio. Sin embargo, a los motores de búsqueda les resulta difícil lidiar con JS, lo que deja la mayor parte del contenido de JavaScript sin indexar.

Profundicemos un poco más en por qué JavaScript hace que el trabajo de Google sea más difícil y qué puede hacer para que su contenido JS sea compatible con los bots.

¿Cómo afecta Javascript al SEO?

JavaScript permite que las páginas se carguen rápidamente, ofrece una interfaz rica y es fácil de implementar; sin embargo, la fluidez del navegador cambia según la interacción del usuario, lo que dificulta que los motores de búsqueda entiendan la página y asocien un valor al contenido.

Los motores de búsqueda tienen sus limitaciones al mostrar páginas web que tienen contenido JavaScript. Google realiza un rastreo inicial de la página e indexa lo que encuentra. A medida que hay recursos disponibles, los bots vuelven a representar JS en esas páginas. Esto significa que el contenido y los enlaces que dependen de JavaScript corren el riesgo de no ser vistos por los motores de búsqueda, lo que podría dañar el SEO del sitio.

Fuente

Sin embargo, Google sabe que JavaScript llegó para quedarse. Como resultado, el gigante de los motores de búsqueda ha dedicado gran parte de sus recursos para ayudar a los profesionales de búsqueda a optimizar sus sitios basados ​​en JS.

Mire esta serie de videos sobre JavaScript SEO de Google que puede ayudar a que su contenido JS sea más reconocible en línea.

Los expertos en SEO necesitan organizar sus páginas web basadas en JS en un formato que Google aprecie. Con un poco de comprensión de cómo los motores de búsqueda procesan el contenido JS, se puede hacer que JavaScript y SEO trabajen juntos para mejorar la clasificación de su sitio.

¿Cómo procesan JavaScript los motores de búsqueda?

Los bots de Google procesan JS de forma diferente a una página que no es JS. Los bots los procesan en tres fases, a saber, rastreo, indexación y representación. Estas fases se pueden entender fácilmente gracias al gráfico de Google Developers a continuación:

Fuente

gateando

Esta fase se trata de la visibilidad de su contenido. Es un proceso complicado que involucra subprocesos, a saber, conjuntos de semillas, colas de rastreo y programación, importancia de URL y otros.

Para empezar, los bots de Google ponen en cola las páginas para rastrearlas y renderizarlas. Los bots usan el módulo de análisis para obtener páginas, seguir enlaces en las páginas y renderizar hasta un punto en el que se indexan las páginas. El módulo no solo muestra las páginas, sino que también analiza el código fuente y extrae las URL en los fragmentos <a href=”…”>.

Los bots verifican el archivo robots.txt para ver si se permite o no el rastreo. Si la URL está marcada como no permitida, los bots la omiten. Por lo tanto, es fundamental revisar el archivo robots.txt para evitar errores.

Representación

El proceso de mostrar el contenido, las plantillas y otras características de un sitio al usuario se denomina representación. Hay renderizado del lado del servidor y renderizado del lado del cliente.

Representación del lado del servidor (SSR)

Como sugiere el nombre, en este tipo de representación, las páginas se rellenan en el servidor. Cada vez que se accede al sitio, la página se representa en el servidor y se envía al navegador.

En otras palabras, cuando un usuario o bot accede al sitio, recibe el contenido como marcado HTML. Esto generalmente ayuda al SEO, ya que Google no tiene que representar el JS por separado para acceder al contenido. SSR es el método de renderizado tradicional y puede resultar costoso en lo que respecta al ancho de banda.

Representación del lado del cliente

La representación del lado del cliente es un tipo de representación bastante reciente que permite a los desarrolladores crear sus sitios totalmente representados en el navegador con JavaScript. Entonces, en lugar de tener una página HTML separada por ruta, la representación del lado del cliente permite que cada ruta se cree dinámicamente directamente en el navegador. Aunque este tipo de representación es inicialmente lenta, ya que realiza varias rondas en el servidor, una vez que se completan las solicitudes, la experiencia a través del marco JS es rápida.

Volviendo a lo que sucede después de que se ha rastreado una página, los bots identifican las páginas que deben procesarse y las agregan a la cola de procesamiento a menos que la metaetiqueta de robots en el código HTML sin formato le indique a Googlebot que no indexe la página.

Las páginas permanecen en la cola de procesamiento durante unos segundos, pero pueden tardar algún tiempo, según la cantidad de recursos disponibles.

Fuente

Una vez que los recursos lo permiten, Google Web Rendering Service (WRS) procesa, analiza y compila las páginas y ejecuta JavaScript en la página. El bot analiza el HTML renderizado en busca de enlaces nuevamente y pone en cola las URL que encuentra para rastrearlas. El HTML renderizado se utiliza para indexar la página.

Indexación

Una vez que WRS obtiene los datos de API y bases de datos externas, el indexador de cafeína en Google puede indexar el contenido. Esta fase implica analizar la URL, comprender el contenido de las páginas y su relevancia, y almacenar las páginas descubiertas en el índice.

Cómo optimizar JavaScript para SEO

JavaScript, cuando se implementa incorrectamente, puede arruinar su SEO. Siga estas mejores prácticas de Javascript SEO para mejorar la clasificación de su sitio.

Sea persistente con sus esfuerzos de SEO en la página

Todas las reglas de SEO en la página que intervienen en la optimización de su página para ayudarlos a clasificarse en los motores de búsqueda aún se aplican. Optimice sus etiquetas de título, meta descripciones, atributos alternativos en imágenes y etiquetas de meta robot. Los títulos únicos y descriptivos y las meta descripciones ayudan a los usuarios y a los motores de búsqueda a identificar fácilmente el contenido. Preste atención a la intención de búsqueda y la ubicación estratégica de las palabras clave relacionadas semánticamente.

Además, es bueno tener una estructura de URL compatible con SEO. En algunos casos, los sitios web implementan un cambio pushState en la URL, lo que confunde a Google cuando intenta encontrar el canónico. Asegúrese de verificar las URL para tales problemas.

Asegúrate de que tu JavaScript aparezca en el árbol DOM

La representación de JavaScript funciona cuando el DOM de una página se ha cargado lo suficiente. El DOM o Document Object Model muestra la estructura del contenido de la página y la relación de cada elemento con los demás. Puede encontrarlo en "Inspeccionar elemento" del navegador en el código de la página. DOM es la base de la página generada dinámicamente.

Si su contenido se puede ver en el DOM, es probable que Google esté analizando su contenido. Verificar el DOM lo ayudará a determinar si los bots de los motores de búsqueda están accediendo o no a sus páginas.

Los bots omiten la representación y la ejecución de JS si la etiqueta meta robots contiene inicialmente noindex. Googlebot no activa eventos en una página. Si el contenido se agrega a la página con la ayuda de JS, debe hacerse después de que se haya cargado la página. Si el contenido se agrega al HTML al hacer clic en el botón, al desplazarse por la página, etc., no se indexará.

Finalmente, cuando use datos estructurados, use JavaScript para generar el JSON-LD requerido e inyéctelo en la página. Además, aprenda sobre los principales trucos de SEO en la página que debe implementar desde el principio.

Evite bloquear el acceso de los motores de búsqueda al contenido de JS

Para evitar el problema de que Google no pueda encontrar contenido JS, algunos webmasters usan un proceso llamado encubrimiento que entrega el contenido JS a los usuarios pero lo oculta de los rastreadores. Sin embargo, este método se considera una violación de las Directrices para webmasters de Google y podría ser sancionado por ello. En su lugar, trabaje para identificar los problemas clave y hacer que el contenido de JS sea accesible para los motores de búsqueda.

A veces, el host del sitio puede bloquearse involuntariamente, lo que impide que Google vea el contenido de JS. Por ejemplo, si su sitio tiene algunos dominios secundarios que sirven para diferentes propósitos, cada uno debe tener un archivo robots.txt separado porque los subdominios se tratan como un sitio web separado. En tal caso, debe asegurarse de que ninguna de estas directivas de robots.txt esté bloqueando el acceso de los motores de búsqueda a los recursos necesarios para la representación.

Use códigos de estado HTTP relevantes

Los rastreadores de Google usan códigos de estado HTTP para identificar problemas al rastrear una página. Por lo tanto, debe usar un código de estado significativo para informar a los bots si una página no debe rastrearse o indexarse. Por ejemplo, podría usar un estado HTTP 301 para decirles a los bots que una página se ha movido a una nueva URL, lo que le permite a Google actualizar su índice en consecuencia.

Consulte esta lista de códigos de estado HTTP y sepa cuándo usarlos:

Fuente

Arreglar contenido duplicado

Cuando se usa JavaScript para sitios web, puede haber diferentes URL para el mismo contenido. Esto provoca problemas de contenido duplicado, a menudo causados ​​por mayúsculas, ID o parámetros con ID. Asegúrese de encontrar dichas páginas, elija la URL original/preferida que desea indexar y establezca etiquetas canónicas para evitar que los motores de búsqueda se confundan.

Corrija el contenido y las imágenes con carga diferida

La velocidad del sitio es fundamental para el SEO. La carga diferida es una de las mejores prácticas de UX que difiere la carga de contenido no crítico o no visible, lo que reduce el tiempo de carga inicial de la página. Pero además de hacer que las páginas se carguen más rápido, también debe asegurarse de que los rastreadores de los motores de búsqueda puedan acceder a su contenido. Estos rastreadores no ejecutarán su JavaScript ni se desplazarán por la página para generar contenido cargado de forma diferida, lo que afectará negativamente su SEO.

Además, las búsquedas de imágenes también son una fuente de tráfico orgánico adicional. Entonces, si tiene imágenes con carga diferida, los motores de búsqueda no las seleccionarán. Si bien la carga diferida es excelente para los usuarios, debe hacerse con cuidado para evitar que los bots pierdan contenido potencialmente crítico.

Usar herramientas JS SEO

Hay una gran cantidad de herramientas disponibles que pueden ayudarlo a identificar y solucionar problemas con el código JavaScript. Aquí hay algunos que puede usar a su favor.

• Función de inspección de URL. Esta herramienta se encuentra en Google Search Console. Puede mostrarle si los rastreadores de Google pudieron o no indexar o rastrear sus páginas.
• Rastreadores de motores de búsqueda. Estas herramientas le permiten probar y monitorear de manera efectiva cómo los motores de búsqueda rastrean sus páginas.
• Información sobre la velocidad de la página. Page Speed ​​Insights de Google comparte detalles sobre el rendimiento de su sitio y ofrece recomendaciones sobre cómo se puede mejorar.
• Sitio: Comando. Esta herramienta lo ayuda a ver si Google ha indexado correctamente su contenido. Todo lo que necesita hacer es ingresar este comando en Google - sitio: [URL del sitio web] "fragmento de texto o consulta"

Desafíos SEO de JavaScript

A estas alturas, ya tiene una idea clara de cómo los motores de búsqueda procesan el contenido de JavaScript y qué puede hacer para configurar su sitio web en la vía rápida hacia el éxito de SEO. Sin embargo, hay algunos otros desafíos que enfrentan los expertos en SEO y los webmasters. La mayoría de estos se derivan de los errores cometidos por ellos al optimizar sus sitios web basados ​​en JavaScript.

1. Archivos JavaScript y CSS no minimizados

Si está utilizando herramientas de SEO para auditar su sitio web JS, probablemente se haya encontrado con una advertencia sobre problemas con Javascript y CSS no minimizados. Durante un período de tiempo, los archivos JS y CSS se sobrecargan con líneas de código innecesarias, espacios en blanco, comentarios en el código fuente y alojamiento en servidores externos, lo que ralentiza su sitio web. Asegúrate de deshacerte de las líneas innecesarias, los espacios en blanco y los comentarios para reducir el tiempo de carga de las páginas, mejorar la tasa de participación y potenciar el SEO.

2. Uso de hash en las URL

¿Recuerdas lo que dijo John Mueller sobre las malas URL en un evento de SEO?

“Para nosotros, si vemos una especie de hash allí, eso significa que el resto probablemente sea irrelevante. En su mayor parte, dejaremos eso cuando intentemos indexar el contenido…”

Sin embargo, varios sitios basados ​​en JS generan URL con un hash. Esto puede ser desastroso para tu SEO. Asegúrese de que su URL sea compatible con Google. Definitivamente no debería verse así:

www.example.com/#/about-us O

www.ejemplo.com/sobre#nosotros

3. No verificar la estructura del enlace interno

Google requiere enlaces <a href> adecuados para encontrar URL en su sitio. Además, si los enlaces se agregan al DOM después de hacer clic en un botón, los bots no podrán verlos. La mayoría de los webmasters se pierden estos puntos, lo que hace que su SEO sufra.

Tenga cuidado de proporcionar el enlace 'href' tradicional, haciéndolos accesibles para los bots. Verifique sus enlaces utilizando la herramienta de auditoría de sitios web, SEOprofiler para mejorar la estructura de enlaces internos de su sitio.

Consulte esta presentación de Tom Greenway durante la conferencia Google I/O para obtener orientación sobre una estructura de enlace adecuada:

Conclusión

Sin duda, JavaScript amplía la funcionalidad de los sitios web. Sin embargo, JavaScript y los motores de búsqueda no siempre van de la mano. JavaScript afecta la forma en que los motores de búsqueda rastrean e indexan un sitio, lo que afecta su clasificación. Por lo tanto, los profesionales de búsqueda deben comprender cómo los bots de los motores de búsqueda procesan el contenido JS y tomar las medidas necesarias para garantizar que JavaScript encaje bien en su estrategia de SEO.

Si tiene un sitio web basado en JS y no puede encontrar su contenido en Google, es hora de abordar los problemas. Utilice la información y los consejos compartidos en esta publicación para optimizar JavaScript para SEO y aumentar sus ganancias.