Como sabe, la optimización de motores de búsqueda de aplicaciones de una sola página no es una tarea fácil y su solución puede requerir costos laborales significativos, habilidades especiales de los desarrolladores y costos financieros del cliente. ¿Qué soluciones ofrece la comunidad para que el motor de búsqueda del sitio web
React sea lo más rápido y económico posible?
Algunos lugares comunes sobre SEO
Alrededor del 92% del tráfico proviene de la primera página de resultados de consultas de motores de búsqueda, y el 75% del tráfico proviene de los primeros cinco sitios web.
Google ocupa más del 90% del mercado de motores de búsqueda.
Search Engine Optimization (SEO) es el proceso de estructuración y organización de un sitio para aumentar el volumen y mejorar la calidad de su tráfico al aumentar su posición y la frecuencia de aparición en los resultados de los motores de búsqueda, centrándose en las palabras clave que revelan los detalles del sitio.
El objetivo principal del proceso de SEO es mejorar la visibilidad del sitio en Internet y aumentar el tráfico del sitio web.
Los motores de búsqueda se basan en el almacenamiento en caché incesante del contenido del sitio web. Debido al hecho de que el proceso está automatizado, es muy importante que el contenido esté estructurado y formateado de una manera que la máquina entienda. El proceso de SEO incluye la optimización del rendimiento del sitio web, el procesamiento de su contenido para aumentar la relevancia del contenido para las palabras clave, así como proporcionar al sitio herramientas para ayudar a los robots de búsqueda a comprenderlo.
Esto puede parecer bastante simple, pero en el caso de los sitios creados en React, este no es siempre el caso.
Reaccionar y SEO
Brevemente sobre SPA
Una aplicación de página única o SPA es una aplicación web o sitio web que interactúa con el usuario cambiando dinámicamente las páginas actuales, en lugar de cargar nuevas páginas desde el servidor. SPA trabaja rápido porque La mayoría de los recursos (HTML + CSS + Scripts) se cargan solo una vez a lo largo de su vida. La aplicación recibe y devuelve solo datos.
Un ejemplo de tecnología que se puede utilizar para crear SPA es ReactJS , una biblioteca que está bien optimizada para trabajar en navegadores personalizados ( más información aquí ) .
Principales problemas de SPA con SEO
SPA es, de hecho, un programa JavaScript que se ejecuta en un navegador, y si un robot web de búsqueda no sabe cómo ejecutar scripts, no podrá obtener una página correctamente representada e indexarla.
Google en octubre de 2015 hizo un anuncio importante de que sus bots ejecutarán archivos JS en sitios web si se les otorga el derecho de hacerlo. Y, aunque esta afirmación suena muy positiva, y sus robots de búsqueda se están volviendo más sofisticados, confiar en su capacidad para ejecutar JavaScript es arriesgado . El robot de Google puede rechazar JavaScript por muchas razones ( más detalles aquí ):
- incumplimiento de la regla de "5 segundos de oro" (más detalles aquí y aquí);
- la imposibilidad de rastrear un sitio: los sistemas de Google deberían poder rastrear un sitio, dada su estructura (más detalles aquí);
- la imposibilidad de analizar el sitio: los sistemas de Google no deberían experimentar problemas durante el análisis del sitio utilizando las tecnologías utilizadas para formar sus páginas (más aquí);
- errores en el código, etc.
Los bots de otros motores de búsqueda como Yahoo, Bing, Baidu, etc. no admiten JavaScript y ven las páginas SPA en blanco.
Por estas razones, debe buscar formas de representar el sitio SPA en el lado del servidor para dar una oportunidad garantizada para que los robots de búsqueda vean su contenido en la forma correcta.
Soluciones SEO para sitios web SPA
Hay dos formas principales de resolver los problemas de SEO que enfrentan los sitios web de SPA:
- SPA isomórfico (universal);
- Pre-renderizado.
Herramientas de mejora de SEO
adicionales para sitios web de React:
- React Router v4 : componente para crear "rutas" amigables con SEO en aplicaciones React;
- React Helmet : quizás el componente más importante para proporcionar aplicaciones SEO React, que permite administrar las metaetiquetas de la aplicación y se caracteriza por su facilidad de uso.
¿Cómo ayuda isomorphic React con SEO?
Un sitio de Reacción isomórfica detecta automáticamente si JavaScript del lado del cliente está deshabilitado. Si JavaScript está deshabilitado, el script se ejecuta en el servidor y el resultado (HTML + CSS estático) se envía al cliente. En este caso, todos los atributos y contenidos necesarios para SEO están presentes en el momento del arranque.
Si JavaScript está habilitado, el sitio de reacción isomórfica en el caso más simple puede cargarse de la manera habitual, cuando todo se procesa en el navegador, o de manera inteligente : la representación parcial se realiza en el lado del servidor, lo que significa que solo la primera representación DOM se realiza en el servidor, y todas las posteriores se realizan directamente en navegador En otras palabras, el navegador recibe el DOM y JavaScript originales totalmente renderizados, y cuando el estado de la aplicación cambia, es responsable de todas las actualizaciones posteriores.
Se cree que una solución isomórfica es el mejor método para resolver problemas de SEO de aplicaciones web SPA, pero lo desafortunado es que tales soluciones para React SPA, en este momento, son difíciles de implementar :
- Las placas de reacción populares React, por ejemplo create-react-app , react-boilerplate no admiten isomorfismo. Dan Abramov , desarrollador de create-react-app :
En última instancia, la representación del lado del servidor es muy difícil de agregar de manera significativa, sin tomar decisiones críticas. Por el momento, no vamos a tomar tales decisiones;
- las placas isomorfas existentes son difíciles de aprender;
- Las soluciones existentes son imperfectas:
- a menudo el código en el servidor y en el cliente tiene muchas diferencias;
- en caso de una coincidencia casi completa de la base del código, el código se vuelve lento y propenso a fallas.
Parece que muchos desarrolladores apoyarán la opinión expresada por MrCheater en la discusión del artículo "Aplicaciones de reacción isomorfa : rendimiento y escala" :
El tema de las "aplicaciones web isomorfas" tiene muchos enemigos. Por desgracia Aunque es fácil entender por qué, todo es muy difícil de programar, cientos de artículos sobre este tema, pero el resultado sigue siendo un cliente aterrador que pesa 3 megabytes. Pero algún día pronto todos los problemas y enfoques para su solución se estandarizarán, y tendremos una aplicación isomorfa de una sola página ligera.
Resolver problemas de SEO a través de la representación
La representación previa es el proceso de presentación previa de páginas en un sitio web para prepararlas para que las vea un robot web de búsqueda. El servicio de preintercepción intercepta las solicitudes al sitio web, determina el tipo de cliente mediante la solicitud del "agente de usuario" y, si la solicitud fue realizada por el bot web, el servicio devuelve la versión estática almacenada en caché del sitio. Si la solicitud fue realizada por un bot web que no es de búsqueda, se carga la página normal. La representación previa solo se utiliza para optimizar el trabajo con los bots web y, posiblemente, los navegadores obsoletos. Los servicios de Prerender como Prerender.cloud y similares utilizan navegadores sin cabeza, a menudo Headless Chrome . Este enfoque le permite utilizar los marcos de JavaScript más recientes, como React, Ember y Angular, para crear un sitio web y no depender de la representación del lado del servidor.
Ventajas de la representación previa:
- el prerender es capaz de ejecutar todo tipo de JavaScript moderno y produce HTML estático;
- prerender es compatible con las últimas innovaciones web;
- se requiere una modificación mínima de la base de código de la aplicación web, si es que existe ;
- se reducen los costos de desarrollo y mantenimiento del sitio web ;
- Facilidad de implementación.
Desventajas de la representación previa :
- no es adecuado para páginas que muestran datos que cambian con frecuencia;
- no es aceptable para páginas que contienen datos personales del usuario. Sin embargo, tales páginas no son muy útiles para SEO y no deben indexarse;
- en el caso de un sitio grande con un número significativo de páginas, el proceso de representación previa puede llevar un tiempo considerable;
- Los servicios de pre-pago son pagados.
Prerenders, donde conseguirlos
La comunidad ha desarrollado un número significativo de pre-procesadores: ver, por ejemplo, aquí.
Entre muchas opciones, OpenSource Prerender es interesante: una versión de código abierto de prerender utilizada en el servicio prerender.io , que se puede implementar en su propio servidor compatible con Node.js.
Otra cosa interesante es que no requiere un servidor, el prerender es el Prerender SPA Plugin , que se conecta simplemente modificando webpack.config.js, por ejemplo, create-react-app o react-boilerplate . El proceso de representación previa se lleva a cabo en el proceso de "construcción" del sitio y el resultado se coloca en index.html.
Puede usar servicios listos para usar que brindan servicios de representación previa, se proporciona una lista de algunos aquí y aquí.
Aquí también puede familiarizarse con la experiencia práctica de trabajar con pre-procesadores.
De particular interés es el servicio Roast.io , que proporciona servicios de CDN y de representación previa (!) . El servicio también automáticamente (si no hay ninguno) agrega metaetiquetas "el enlace de captura de pantalla se despliega" que mejoran la visualización del sitio web en las redes sociales.
El servicio se encuentra en AWS CDN , se ejecuta en el protocolo HTTPS, configurado para SPA y React en particular, es muy fácil de usar. Hay una opción de alojamiento gratuito (10 GB de ancho de banda, 500 páginas SSR).
Entonces
La representación previa, al no ser una solución ideal, parece preferible para una parte importante de los desarrolladores de aplicaciones React debido al hecho de que:
- no se requiere completar el código de la aplicación; puede usar de forma segura su repetitivo favorito;
- hay una amplia selección de implementaciones: "middleware", "webpack", "CDN + prerender", "opensource" y pago;
- la introducción de la representación previa es un proceso simple, especialmente en el caso de implementaciones de " presentación previa CDN +" ;
- Existe un gran apoyo de Google en forma de Headless Chrome ;
- El desarrollo de aplicaciones y los costos de soporte se reducen.
- Hay opciones para el uso gratuito de los servicios web de prerender.
Sin embargo , debe pensar en una versión isomorfa (universal) del sitio si:
- La aplicación web muestra datos que cambian con frecuencia;
- Una aplicación web contiene cientos de páginas, porque el proceso de representación previa puede llevar una cantidad considerable de tiempo.
Si el sitio web contiene solo páginas estáticas (HTML + CSS), entonces no se requiere isomorfismo ni representación previa .