Mejores prácticas de SEO para sitios web de comercio electrónico React

React se ha convertido en uno de los marcos de JavaScript líderes en uso en una variedad de sitios web diferentes, y particularmente en sitios de comercio electrónico.

Debido a la forma en que están construidos, los sitios web de React tienen algunas consideraciones específicas en lo que respecta a la optimización de motores de búsqueda (SEO), con un conjunto distinto de mejores prácticas de SEO para las aplicaciones de una sola página (SPA) de React.

En esta guía, veremos cómo garantizar que un sitio de comercio electrónico React esté correctamente configurado para SEO, y algunos de los pros y los contras de usar React en un sitio web de comercio electrónico optimizado para búsquedas.

¿Qué es Reaccionar?

React es una biblioteca de JavaScript que se puede utilizar para crear interfaces de usuario basadas en componentes de interfaz de usuario comunes. Lo mantiene la empresa matriz de Facebook, Meta, junto con una comunidad de desarrolladores de código abierto que incluye empresas e individuos.

Debido a que es de código abierto, React también es de uso gratuito. Puede formar el marco base de una aplicación de una sola página (SPA mencionadas anteriormente) o una aplicación móvil.

¿Por qué React es bueno para el comercio electrónico?

El enfoque de React en la interfaz de usuario significa que es una herramienta útil para crear sitios web de comercio electrónico fluidos y fluidos que colocan la experiencia del usuario (UX) en el centro del diseño.

El contenido se sirve en el lado del cliente y las páginas no necesitan actualizarse, lo que hace que sea más rápido y fácil para los clientes navegar por un sitio web, con menos demoras en el servidor que afectan las velocidades de carga de la página.

La versatilidad de React significa que se puede usar en sitios de comercio electrónico de escritorio y aplicaciones móviles por igual, lo que lo convierte en una de las opciones más fáciles para los desarrolladores que desean crear aplicaciones web progresivas.

¿Pueden los motores de búsqueda rastrear sitios web de React?

Al igual que con cualquier sitio web optimizado para búsqueda, es importante comprender cómo los robots (y especialmente Googlebot) ven el contenido en un sitio de React.

En general, Google rastrea el sitio web en dos etapas, identificando el contenido a medida que avanza.

Rastrear el código fuente

Primero, Googlebot rastreará el sitio web y recuperará el código fuente, incluido el HTML, los encabezados de página, etc.

Renderizar el DOM

En segundo lugar, Googlebot representa el modelo de objetos de dominio (DOM), incluido cualquier JavaScript utilizado en la página; puede identificarlo con las herramientas para desarrolladores integradas de Chrome y las funciones equivalentes en otros navegadores.

React es un marco JavaScript del lado del cliente, lo que significa que Googlebot puede tener dificultades para identificar páginas. Esto se debe a que, a diferencia de un sitio web tradicional, React no envía solicitudes al servidor cuando navega de una página a otra, lo que dificulta que Google vea las diferentes páginas.

Puede configurar React para usar la representación del lado del servidor, pero Googlebot seguirá sin mostrar los archivos JavaScript y otros recursos basados ​​en el servidor cuando navegue por su sitio. Debido a esto, es importante configurar su sitio web de comercio electrónico React para SEO de acuerdo con las mejores prácticas.

Problemas comunes de SEO con React

Hay varios problemas comunes de SEO con los sitios web de comercio electrónico de React:

Contenido no descubierto / lento para indexar

Googlebot asigna un "presupuesto de procesamiento" a cada sitio web que rastrea y, por lo general, se marchará una vez que se haya gastado ese presupuesto. Esto garantiza que los sitios web más pequeños obtengan su parte de la atención del rastreador y evita bucles de rastreo infinitos, por ejemplo, en sitios web que generan URL dinámicas durante la navegación.

Debido a que los sitios web de React funcionan como SPA, se debe procesar todo el sitio antes de que se pueda rastrear todo su contenido. Esto puede retrasar el descubrimiento de contenido y consume recursos adicionales del lado del rastreador, lo que puede llevar a que se rastreen e indexen menos páginas.

La representación del lado del servidor y la representación previa pueden aliviar parte de la carga de recursos de los robots, lo que ayuda a mejorar la velocidad con la que aparecen nuevas páginas en el índice.

Los robots de búsqueda tardan en notar el contenido actualizado

Esta es una consecuencia del problema anterior: cuando cambia una página, puede pasar algún tiempo antes de que esos cambios se filtren en los resultados de búsqueda.

Una vez más, esto se debe a cómo se procesan las páginas cuando se usa React, lo que puede hacer que las páginas actualizadas pasen desapercibidas durante más tiempo para los recursos limitados del rastreador de Google.

Las páginas "profundas" se rastrean rara vez (o nunca)

Es menos probable que Googlebot acceda a las páginas ocultas en lo profundo de la jerarquía de su sitio, especialmente si ya ha gastado un presupuesto de procesamiento significativo en un nivel más alto de su jerarquía.

Una vez más, la representación previa puede ser una herramienta valiosa para ayudar a los rastreadores de búsqueda a penetrar más profundamente en la estructura de carpetas de su sitio web, antes de que se queden sin presupuesto de rastreo asignable.

[Ebook] Rastreabilidad

Asegúrese de que sus sitios web cumplan con los requisitos de los motores de búsqueda para la capacidad de rastreo para aumentar el rendimiento de SEO.

Leer el libro electrónico

Cómo optimizar los sitios de comercio electrónico de React

Con algunas de las mejores prácticas para el SEO de comercio electrónico de React, puede darle a su sitio, y a sus páginas individuales, una mejor perspectiva de aparecer en el índice de búsqueda.

URL de página única

La contraparte de mejores prácticas para el problema de las URL dinámicas mencionado anteriormente es dar a cada página su propia URL única y estática en su sitio web. Luego, el contenido se asocia con una única ubicación permanente, una URL canónica para la página, que los motores de búsqueda pueden rastrear, indexar y clasificar con confianza en sus páginas de resultados.

React Router es la forma de lograr esto en los sitios web de React. React Router puede dar a cada página del sitio su propia URL permanente, así como alinear la interfaz de usuario con una URL específica.

reacción isomórfica

Isomorphic React es una forma de habilitar el renderizado del lado del servidor, para aliviar la presión sobre los presupuestos de renderizado de los rastreadores. Funciona detectando cuando JavaScript está deshabilitado en el lado del cliente y creando una forma renderizada en el lado del servidor del HTML del sitio web. Si la representación del lado del cliente está disponible, el sitio web se cargará como un React SPA de la forma habitual.

Al hacer esto, Isomorphic React supera los problemas de visibilidad para los rastreadores de búsqueda, mejorando la capacidad de descubrimiento de las páginas, sin detrimento de la experiencia React fluida y sin problemas para los visitantes humanos con JavaScript del lado del cliente activado.

Pre-renderizado

La renderización previa es otra forma de lograr un resultado similar al de Isomorphic React. Funciona generando una versión en caché del HTML renderizado, a la que los rastreadores pueden acceder en lugar del código fuente no renderizado.

Los visitantes humanos reciben el sitio web React del lado del cliente, brindándoles nuevamente todos los beneficios de un SPA fluido y ultrarrápido. Hay muchos servicios de renderizado previo para elegir, incluidos Google Puppeteer, Prerender.io y SEO4Ajax.

Optimización de metadatos

Finalmente, asegúrese de que su contenido tenga metadatos optimizados, que siguen siendo un elemento importante en el SEO en la página, incluso después de todos estos años.

Además de una URL única y optimizada, cada página debe tener una etiqueta de título única y cualquier otra metaetiqueta relevante, lo que ayuda a las páginas a destacarse y señala a los robots de búsqueda para que asocien la página con un determinado tema o palabra clave principal.

React Helmet es una buena manera de lograr esto, al brindar acceso directo para editar metadatos SEO en los sitios web de comercio electrónico de React. De esta manera, puede combinar las mejores prácticas de SEO de la vieja escuela y las palabras clave clásicas de metadatos, con todos los beneficios de un sitio web de comercio electrónico React moderno y compatible con dispositivos móviles.