Saltar al contenido

Posicionamiento de sitios web y JavaScript

La creación de sitios web requiere el uso de muchas tecnologías y soluciones. El rápido desarrollo de la industria y las crecientes expectativas de los usuarios hacen necesario encontrar nuevas formas de presentar el contenido. La apariencia de los sitios web y la forma en que se representa su contenido, desafortunadamente, no siempre coincide con las expectativas de Google, que ha tenido problemas con la representación de páginas basadas en JavaScript durante mucho tiempo. Hasta el día de hoy, el posicionamiento del sitio web JS requiere un enfoque especial …  

Teoría, ¿o qué es esta creación – JavaScript?

El sitio web tiene la forma de código que los navegadores leen y se procesan como se indica. Los siguientes elementos del sitio web se agregan mediante etiquetas HTML. La apariencia de la página requiere agregar un archivo adicional, escrito en css. Los estilos más comunes se encuentran en el archivo style.css.

Los sitios web creados en HTML y CSS son relativamente simples. La creación de sitios web complejos requiere el uso de soluciones técnicamente más avanzadas, lo que permite la entrega de contenido dinámico, la representación HTML a nivel del servidor y el procesamiento de la información de los usuarios y su almacenamiento en una base de datos. El uso de tecnologías adicionales también hace que la forma de proporcionar información en el sitio web sea más atractiva.

La creación de aplicaciones dinámicas es posible gracias a una amplia gama de lenguajes de programación, ampliando la funcionalidad de los sitios web. Uno de los lenguajes de programación más populares en los últimos años ha sido JavaScript. Esto lo confirma, entre otras cosas, el informe The 2020 State of the Octoverse que resume las actividades de los desarrolladores dentro de la plataforma GitHub.

JavaScript se creó a fines de 1995. Inicialmente, se usaba principalmente para validar la información ingresada por el usuario (por ejemplo, la exactitud de una dirección de correo electrónico en un formulario), hoy le permite crear sitios web dinámicos. Gracias a los scripts, el sitio web «vive» y reacciona a las acciones del usuario: la galería de imágenes se vuelve interactiva, las ventanas emergentes se pueden cerrar y Google Analytics recopila información sobre el tráfico en el sitio. JS también es responsable de otros elementos sin los cuales los sitios web no parecen cumplir con los estándares modernos:
– desplazamiento infinito (es decir, cargar elementos posteriores, por ejemplo, productos sin volver a cargar la página),
– comentarios y valoraciones,
– enlace interno,
– «las mejores» listas de productos o artículos.

La elección de JavaScript como tecnología en la que se basará el sitio web permite colocar en él elementos descargados de fuentes externas, por ejemplo la API de Google Maps o API de redes sociales.

El código JavaScript está en un archivo guardado como .js (generalmente script.js); se inserta un enlace en la sección del encabezado de la página o inmediatamente antes de la etiqueta del cuerpo final (que se recomienda). Sin embargo, algunos fragmentos de código también se colocan directamente entre las etiquetas html (por ejemplo, el script responsable de Google Analytics), lo que permite que se ejecute el código (es decir, la aparición de una acción específica en la página) antes de que se cargue toda la estructura HTML y CSS. . Desafortunadamente, estos tratamientos suelen tener un impacto negativo en la velocidad de reproducción del sitio web, por lo que vale la pena utilizar esta opción de forma limitada.

Dentro de los sitios web construidos de acuerdo con este estándar, primero se carga la estructura HTML, que luego se complementa con código CSS. Finalmente, el código JS se ejecuta de acuerdo con la secuencia de los siguientes elementos en el archivo, de arriba a abajo.

¿Representación del lado del cliente o representación del lado del servidor?

JavaScript es un lenguaje específico: se puede ejecutar en el lado del servidor (lado del servidor) y en el lado del navegador (lado del cliente). Ambas opciones le permiten crear una aplicación web moderna que sea atractiva para los usuarios y los robots web.

La representación del lado del servidor (SSR) es el método más popular para mostrar páginas web. El navegador envía información al servidor, que envía la respuesta en forma de HTML renderizado, que se muestra en nuestra pantalla. La velocidad de respuesta depende, entre otros:
– conexión a Internet,
– ubicación del servidor (distancia desde el ordenador desde el que se envió la consulta),
– tráfico en una página determinada (cuántas consultas se envían al mismo tiempo),
– de la optimización del sitio web, p. Ej. caché y la posibilidad de almacenar algunos archivos en la caché del navegador).

Cada clic posterior provoca la necesidad de volver a cargar la página: el servidor envía una respuesta que contiene HTML con los mismos elementos que la subpágina anterior.

La representación del lado del cliente le permite generar respuestas en el lado del cliente, generalmente el navegador web. En este caso, en respuesta a la solicitud del navegador, el servidor envía un archivo JavaScript, que es responsable de crear la estructura HTML y agregarle contenido. En el caso de pasar a la siguiente subpágina, no es necesario volver a cargar el sitio web: JS descarga el contenido necesario del servidor y complementa el esqueleto HTML previamente renderizado. La respuesta del servidor es más rápida y la conexión a Internet está menos cargada.

La representación del lado del cliente suele ser más rápida, pero debido a la necesidad de ejecutar todo el código JS, la primera carga del sitio web puede ser más larga que con SSR. Representación del lado del cliente: la representación de una vista solo para un navegador determinado puede causar problemas con el posicionamiento efectivo del sitio web.

Google vs JS: un camino lleno de baches hacia el éxito

Las posibilidades que ofrece el código JavaScript tuvieron un impacto significativo en su popularidad. JS permite, entre otros, crear páginas dinámicas, basadas en una plantilla escrita en html + css, complementada con datos descargados, por ejemplo, de bases de datos. Además, el potencial de este lenguaje le permite manipular plantillas, crear elementos adicionales y renderizar la página «sobre la marcha», mientras el programa se está ejecutando. Según este principio, en los primeros años de su existencia, el creador de sitios Wix – renderizó sitios web basados en código JS.

Desafortunadamente, como mencioné anteriormente, esta solución no conduce a una clasificación alta en el motor de búsqueda de Google. Los robots de red de la compañía Mountain View durante muchos años no pudieron analizar bien las páginas de JavaScript, lo que a su vez resultó en la incapacidad de competir en SERP. En los últimos años, Google ha declarado mejorar sus capacidades en esta área, pero la efectividad de leer los archivos de código no siempre es satisfactoria.

El posicionamiento de las páginas de JavaScript requiere, en primer lugar, saber cómo Googlebot procesa el código JS. Para las páginas estáticas, el diagrama de flujo del robot es bastante simple.

Google comprueba si puede introducir una dirección determinada (el acceso de los robots se puede bloquear en el archivo robots.txt o etiqueta en <head>), luego descarga los datos de la página – estructura HTML y al mismo tiempo comprueba lo que hay en todos los enlaces en el código. Luego, se leen los archivos CSS y se envía la página para su indexación. Este proceso es diferente para las páginas de JavaScript.

Como ves, el camino que debe recorrer Googlebot es mucho más complicado. Después de descargar el archivo HTML, descarga el código CSS y JS que es necesario para representar la página. Luego lo complementa con recursos de fuentes externas (si las hubiera) y renderiza la página. La apariencia de la página y los elementos necesarios de su estructura están contenidos en el código JS, lo que permite manipular fragmentos individuales y adaptarlos a las necesidades del usuario.

Procesar el código antes de indexarlo puede llevar mucho tiempo y Google no garantiza que obtendrá toda la información que queríamos incluir en la página. Tiene que ver con la cantidad de URL que el robot escanea durante el día, el llamado «presupuesto de rastreo». Tener en cuenta las necesidades del robot de Google le permite rastrear eficazmente debajo de la página, lo que se traduce en la visibilidad del sitio en los resultados de búsqueda.

Dibujar una ruta de Googlebot brinda una descripción general clara de la complejidad del posicionamiento de páginas basadas en JavaScript. Desafortunadamente, no informa sobre los riesgos y problemas que pueden surgir durante los siguientes pasos.

Páginas JS: ¿qué ve Google?

Los sitios web basados principalmente en código JavaScript siempre han sido un gran desafío para los robots de Google. Su nivel de indexación está aumentando, pero aún no son tan altos como podríamos desear.

Google muestra las páginas de manera diferente al navegador promedio y usa la página de una manera diferente a la del usuario. El algoritmo de funcionamiento se centra principalmente en los elementos necesarios para renderizar el sitio web. Puede omitir aquellos que considere menos importantes y, como resultado, ignorarlos durante la indexación. Esto es problemático especialmente en una situación en la que estos fragmentos contienen el contenido de la página, que estaba destinado a convertirse en un boleto a posiciones altas en los resultados de búsqueda. Los datos que dependen de las cookies están particularmente expuestos al riesgo de permanecer invisibles: si el contenido se sirve en su base, es probable que Google no lo alcance. Los problemas adicionales también son la velocidad a la que se ejecuta el código: una mala optimización puede extender todo el proceso y hacer que el robot lo abandone.

El segundo problema es la falta de actividad del robot de Google al visitar el sitio web: Google no se desplaza por la página, no hace clic donde está el usuario y bloquea la reproducción automática de video. A diferencia de otros visitantes del sitio, es posible que no llegue a todo el contenido preparado y no tenga una imagen completa del sitio.

La información sobre cómo Google representa nuestro sitio se puede obtener mediante la Prueba de optimización móvil. Después de ingresar la dirección, Mobile Test descargará la subpágina indicada por nosotros y devolverá información sobre el proceso de representación, incluidos mensajes sobre problemas. También aparecerá una vista previa de la página renderizada a la derecha.

También puede consultar la página en Google Search Console – «Comprobación de URL». Ambas formas de control de la representación del sitio le permiten obtener los datos necesarios para introducir cambios y mejorar la indexación del sitio basada en JS.

Aplicaciones de una sola página: React, Vue.js y otros marcos

El fuerte énfasis en la velocidad de entrega de datos y la popularidad de las tecnologías utilizadas en aplicaciones móviles ha dado como resultado la creciente popularidad de los sitios web de aplicaciones de una sola página. Este tipo de sitio web tiene un archivo html, que se utiliza para representar subpáginas posteriores. El contenido se descarga dinámicamente desde el servidor a través de solicitudes JS.

Los SPA son rápidos y bien recibidos por los usuarios. Durante la visita, el navegador descarga todos los elementos estáticos, el contenido restante se lee durante la visita. Las transiciones entre los sucesivos fragmentos de la página son dinámicas, evitamos el momento de recargar la página. Desde la posición del usuario, se ve igual que en el caso de las páginas más tradicionales, p. Ej. Los enlaces en el menú tienen una forma familiar, pero después de hacer clic en ellos, el navegador no descarga datos del siguiente archivo html; de hecho, permanece en el index.html básico, y el contenido que se descarga es de la base de datos y se representa con JS.

Para construir Apps de Página Única se utiliza el modelo AJAX, que permite la comunicación con el servidor de forma asincrónica, lo que no requiere que el documento se actualice con cada interacción del usuario con el sitio. Las páginas se crean con lo que Wikipedia denomina el marco de «marco de aplicación». El marco es responsable de la estructura de la aplicación, el mecanismo de operación, los componentes y las bibliotecas necesarias. Los marcos más populares incluyen React, que se utiliza para crear interfaces de aplicaciones. Vue.js y Ember.js también se utilizan con frecuencia. El marco desarrollado y promovido por Google se llama «Angular». Los marcos más populares permiten la representación del lado del servidor de sitios web (lo que se recomienda desde la perspectiva de un rastreo fácil de páginas por parte del robot de Google) y tienen en cuenta los requisitos de los navegadores móviles.

Como mencionamos anteriormente, Google no siempre puede lidiar con este tipo de sitios, lo que hace que el posicionamiento de alguna aplicación de página única basada en JavaScript sin la optimización adecuada puede ser imposible. Un buen ejemplo es el sitio web. El sitio web proporciona mucha información histórica (tomada de Wikipedia), pero Google no ve su potencial.

Si bien en el caso de una web de este tipo la falta de presencia en Google no es tan significativa, en el caso de una tienda puede afectar significativamente el interés de los clientes. Las páginas creadas con marcos populares, React, Vue.js o Angular, le permiten introducir elementos necesarios para aparecer en el índice de Google y ofrecer contenido de una manera que le permita competir en términos de posición.

Posicionamiento y optimización de páginas JS

Las soluciones habilitadas por el código JavaScript tienen un impacto positivo en la velocidad del sitio web y su recepción por parte de los usuarios. Sin embargo, ver la página por parte de los clientes potenciales es solo la mitad de la batalla: la mayoría de ellos llegan a nuestra URL solo cuando la encuentran en los resultados de búsqueda de Google.

La optimización de páginas web con mucho código JavaScript requiere cambios que parecen obvios para las páginas estáticas.

Acceso para robots de red
Como se mencionó anteriormente, Googlebot primero verificará si la URL que encuentra es accesible para él. Esto se aplica a todos los recursos que contiene, incluidos los archivos JS y CSS. La representación de Google de las páginas JS requiere acceso completo al código, así que evite bloquear estos recursos en su archivo robots.txt.

URL
Uno de los problemas que se pueden encontrar al optimizar un sitio basado principalmente en JS es la falta de enlaces «tradicionales» a las páginas siguientes del sitio. El robot de Google se centra solo en los enlaces colocados en el atributo href, en la etiqueta <a>.

Otro problema con las URL típicas de los sitios con mucho JS es el uso de URL con «#». La cruz le permite evitar la necesidad de desplazarse por el documento y pasar directamente al fragmento seleccionado.

Una solución a estos problemas es utilizar la API de historial de HTML5. Le permite manipular el historial del navegador, p. Ej. cambie la dirección en la barra de direcciones del navegador y cambie el contenido, sin tener que volver a cargar la subpágina. La API está integrada en la mayoría de los marcos (incluido React Router), lo que facilita mucho la creación de sitios web que permitan el posicionamiento en Google. Nota: estas soluciones no serán efectivas con versiones antiguas de navegadores.

Entre otros problemas con las URL, también vale la pena señalar un gran potencial de páginas duplicadas, con direcciones que difieren en el caso de letras o barras al final. Colocar un enlace canónico en la sección <head> soluciona este problema. La dirección que contienen será información inequívoca para Google.

Sitemap.xml
El elemento que hace que la indexación del sitio sea mucho más fácil son los archivos que contienen enlaces a todas las direcciones dentro del dominio: mapa del sitio. El mapa del sitio es una lista a la que deben incluirse todas las direcciones a las que queremos invitar al bot.

Redirecciones y el problema de los errores aparentes 404
Uno de los elementos importantes del proceso de optimización del sitio web es detectar las URL rotas y dirigirlas a las nuevas y correctas. Los redireccionamientos 301, 302, etc. se realizan dentro del servidor. Sin embargo, en el caso de la aplicación de página única, esta solución no se puede aplicar. Como sugiere el Centro de ayuda de Google, y como lo demuestran las pruebas de Search Engine Land, el uso adecuado del código JS funcionará de manera similar.

Redirigir JS le permitirá redirigir la dirección a la siguiente subpágina, pero no dará la respuesta típica de las redirecciones realizadas en el servidor. Sin embargo, desde el punto de vista de la presencia en los resultados de búsqueda, esto no es un problema. La redirección reemplaza efectivamente la dirección anterior por una nueva que puede ir más allá en la clasificación.

window.location.replace reemplaza el documento actual con el de la dirección dada. La dirección y el contenido del documento original no se almacenarán en caché. Este tipo de procedimiento es otro ejemplo del uso efectivo de la API de historial HTML5 mencionada anteriormente.

Otros códigos de respuesta de servidor importantes para robots de red incluyen 404, «No encontrado». En el caso de las páginas JS (aunque este problema también ocurre con páginas estáticas mal configuradas), la falta de un documento en la dirección indicada será leído por el servidor como una respuesta correcta 200. Como resultado, el índice del motor de búsqueda puede encontrar direcciones inexistentes sin contenido. Para superar este problema e informar a los robots sobre la necesidad de mirar otras subpáginas, vale la pena complementar el código con un fragmento que le permita obtener la respuesta deseada del servidor.

Retraso de carga
La velocidad de la página es uno de los factores que contribuyen a una buena visibilidad del sitio web. La velocidad óptima de entrega de contenido y otros elementos de contenido permite un uso cómodo del sitio web sin sobrecargar la conexión a Internet del usuario. Una de las soluciones más efectivas es la carga diferida, que retrasa la carga de ciertos elementos del sitio web. Nota: la implementación incorrecta puede bloquear el acceso a recursos importantes del sitio web y, como resultado, evitar que el robot de Google acceda al contenido clave para el posicionamiento.

Al cargar, se debe dar prioridad a la estructura HTML que le permite «construir la página» y su contenido. Los siguientes en la cola son los gráficos, que suelen tener el mayor impacto en la cantidad de datos descargados para cargar su sitio. El uso de la carga diferida le permite hacer visibles los elementos sucesivos en la pantalla en el primero, lo que permite la carga posterior de los fragmentos disponibles después de desplazarse a continuación.

Títulos, descripciones …
No puede hacer un SEO eficaz sin optimizar sus títulos y descripciones. En el caso de las páginas de la aplicación de una sola página, basadas en frameworks como React, Ember o Angular, vale la pena considerar agregar un módulo o biblioteca que permita cualquier modificación de estas etiquetas. En el caso de las aplicaciones creadas en React, la biblioteca elegida con más frecuencia es React Router y React Helmet. El marco de Gatsby basado en React también se está volviendo cada vez más popular.

Prueba y solución de problemas de posicionamiento de aplicaciones JavaScript

El posicionamiento de sitios web basados en Javascript no ha sido posible durante muchos años. El desarrollo de métodos para entregar contenido a los rastreadores web está en consonancia con la mejora de la capacidad de Google para representar y leer sitios JS. Sin embargo, todavía existe un riesgo significativo de errores al indexar el contenido de nuestro sitio web; la solución proporcionada por Google no es perfecta.

La garantía de la aparición en los SERPs es permitir el acceso al sitio por parte de los robots de Google y controlar el contenido mostrado por ellos. Para ello, conviene no limitarse a probar el sitio web, especialmente con la ayuda de las herramientas de Google anteriormente indicadas.

Dynamic rendering – listo para Googlebot

Como parte de la mejora de la relación entre Googlebot y JavaScript, Google en su documentación sugiere utilizar varios trucos que permiten un mejor procesamiento del código JS. Uno de ellos es el renderizado dinámico.

La representación dinámica se basa en identificar al cliente (por ejemplo, un navegador o un robot web) y proporcionarle una respuesta adaptada a sus capacidades técnicas. En la práctica, cuando la consulta la realiza el usuario (navegador web), la página se representará de la forma habitual: se descargará el archivo HTML y se descargará el contenido deseado de la base de datos con la ayuda de una solicitud enviada por un script JS. Cuando el robot de Google solicita una URL determinada, el servidor enviará un renderizado de la página que contiene HTML estático, lo que permitirá una indexación más rápida de su contenido.

Se puede usar una API llamada Rendertron para implementar la representación dinámica, que funciona como un servidor HTTP independiente. Hace que el contenido de las URL sea legible por bots que no ejecutan JavaScript correctamente. Rendertron le permite guardar el archivo renderizado en la caché, lo que acelera significativamente el envío de respuestas al bot. Los datos en la caché se actualizarán automáticamente a los intervalos que especifiquemos.

Los documentos pre-renderizados también son útiles desde el punto de vista de otros clientes: le permiten preparar contenido adecuado para lectores utilizados por personas con discapacidad visual.

Posicionamiento web y JavaScript – resumen

El creciente énfasis en la velocidad de entrega de contenido sin duda resultará en un aumento adicional en la popularidad del lenguaje JavaScript. Google también tiene esto en cuenta y trabaja constantemente para mejorar la indexación del contenido accesible con la ayuda de JS. La optimización adecuada y el uso de soluciones amigables con los bots son la clave para alcanzar posiciones altas en los resultados de búsqueda, incluso para aplicaciones de una sola página y otros sitios basados en JS.

Publicado enEspecialParafraseo de textosReformulador de textosSEO