Mejorar el SEO con Prerender.io

En la lista de Forbes publicada recientemente sobre las principales estadísticas de sitios web para 2024, nos enteramos de que actualmente hay aproximadamente 1.090 millones de sitios web activos en Internet (¡!). Entre más de mil millones de sitios web, ¿cómo encontrarán los usuarios (y clientes potenciales) su sitio web? Lo más probable es que empiecen por un motor de búsqueda. Sin embargo, para que el motor de búsqueda lleve a los usuarios a su sitio web, debe hacer sus deberes de SEO.

El SEO se encarga de que su sitio web aparezca bien posicionado en los motores de búsqueda. Si se aplica correctamente, el SEO atrae tráfico a su sitio web. Sin embargo, los sitios creados con marcos de JavaScript modernos, como React o Vue.js, dependen en gran medida de la renderización del lado del cliente, y los motores de búsqueda a menudo tienen dificultades para indexar correctamente este tipo de sitios. Por lo tanto, la visibilidad en los resultados de búsqueda es escasa.

Esto nos lleva al prerenderizado. El prerendering consiste en generar una versión HTML estática de sus páginas web que un motor de búsqueda pueda rastrear e indexar fácilmente. Esta técnica puede tener un impacto dramático en el éxito SEO de su sitio.

En este post, veremos cómo los servicios de prerendering de Prerender.io pueden ayudarte a superar los obstáculos de SEO al utilizar estos frameworks. También te indicaremos cómo implementar el prerendering en el servidor web o en la aplicación.

Entremos.

El reto SEO de los frameworks JavaScript

¿Por qué el SEO es un reto cuando se trata de utilizar frameworks como React o Vue.js? Los robots tradicionales de los motores de búsqueda están diseñados para leer HTML estático. Otros pueden manejar parte del JavaScript y renderizar páginas parcialmente, pero tienen sus limitaciones. Cuando tu sitio se basa mucho en la renderización del lado del cliente, lo más probable es que un motor de búsqueda no rastree y renderice la página hasta el final, por lo que no verá el contenido completo y real para indexarlo.

A modo de ejemplo, Google ofrece la siguiente orientación a los creadores de sitios renderizados del lado del cliente:

La renderización dinámica era una solución provisional y no una solución a largo plazo para los problemas con el contenido generado por JavaScript en los motores de búsqueda. En su lugar, le recomendamos que utilice la renderización del lado del servidor, la renderización estática o la hidratación como solución.

¿Cuál es el impacto en su SEO? Naturalmente, una indexación parcial o retrasada afectará a la clasificación de su sitio web en las búsquedas. Como resultado, su sitio podría experimentar retrasos en aparecer en los resultados de búsqueda, lo que se traduce en oportunidades perdidas de tráfico orgánico. La indexación incompleta o retrasada puede significar que un motor de búsqueda tenga que realizar un segundo rastreo de su sitio, lo que introducirá más retrasos.

Si volvemos al consejo de Google anterior, vemos la recomendación de utilizar "renderizado estático" y, hasta cierto punto, eso es lo que se consigue con el prerenderizado.

Cómo resuelve Prerender.io este problema

Esencialmente, Prerendering salva la brecha entre las capacidades dinámicas de los modernos frameworks JavaScript y la necesidad de contenido HTML estático con el que puedan trabajar los bots de los motores de búsqueda. Veamos cómo funciona con Prerender.io.

Prerender.io ejecuta el JavaScript de tus páginas en un navegador sin cabeza, renderizando el contenido completo. A continuación, guarda este contenido renderizado como HTML estático. Cuando un robot de un motor de búsqueda rastrea su sitio y solicita una página determinada, usted hace que Prerender.io sirva el HTML prerenderizado en lugar de su página con mucho JavaScript. De esta forma, los motores de búsqueda pueden acceder rápida y fácilmente al contenido completo de sus páginas para indexarlas, sin necesidad de procesar JavaScript complejo.

¿Cuáles son algunas de las ventajas de utilizar este enfoque?

• SEO mejorado: Debido a que Prerender.io puede proporcionar a los motores de búsqueda HTML completamente renderizado, su contenido será indexado correctamente y con prontitud. Esto mejora su ranking de búsqueda y aumenta la visibilidad del sitio.
• Cargas de páginas más rápidas: Cuando utilizas Prerender.io para servir HTML estático a un bot de un motor de búsqueda, reduces la carga de tus servidores. Con rastreadores de innumerables motores de búsqueda en constante operación, descargar sus peticiones a Prerender.io puede mejorar los tiempos de carga de la página y mejorar la experiencia de usuario para sus usuarios reales.
• Mejor experiencia del usuario: Una carga de páginas más rápida y una indexación más precisa aumentarán las posibilidades de que los usuarios encuentren su sitio rápidamente y disfruten de una experiencia de navegación más positiva. 

Ya hemos visto el qué, el cómo y el por qué. Ahora pasemos a los detalles prácticos.

Implementación de Prerender.io en su aplicación web

Para integrar Prerender.io en tu aplicación web, los dos enfoques más directos serían hacerlo a nivel del servidor web o a nivel del código de la aplicación. Vamos a considerar cada uno de ellos con más detalle.

Método 1: En el servidor web

Si estás desplegando una aplicación Node.js en Linode, es probable que estés utilizando la aplicaciónNode.js one-click marketplace app para ayudarte a ponerla en marcha rápidamente. Después de crear un nuevo Linode, la aplicación le ayudará a poner en marcha Nginx, Node.js, NPM y PM2.

Para utilizar Prerender.io con Nginx, puedes seguir la guía de integración para Nginx. En primer lugar, crearás una copia de seguridad del archivo nginx.conf de tu sistema. Utilizarás el módulo ngx_http_map_module para crear algunas variables basadas en los valores de otras variables.

Editarás tu archivo nginx.conf para insertar secciones del archivo de configuración de ejemplo Nginx de Prerender.io. En primer lugar, añadirás los siguientes bloques de mapa a tu sección http.

map $http_user_agent $prerender_ua {         default       0;         "~*Prerender" 0;         "~*googlebot"                               1;         "~*yahoo!\ slurp"                           1;         "~*bingbot"                                 1;         "~*yandex"                                  1;         "~*baiduspider"                             1;         "~*facebookexternalhit"                     1;         "~*twitterbot"                              1;         "~*rogerbot"                                1;         "~*linkedinbot"                             1;         "~*embedly"                                 1;         "~*quora\ link\ preview"                    1;         "~*showyoubot"                              1;         "~*outbrain"                                1;         "~*pinterest\/0\."                          1;         "~*developers.google.com\/\+\/web\/snippet" 1;         "~*slackbot"                                1;         "~*vkshare"                                 1;         "~*w3c_validator"                           1;         "~*redditbot"                               1;         "~*applebot"                                1;         "~*whatsapp"                                1;         "~*flipboard"                               1;         "~*tumblr"                                  1;         "~*bitlybot"                                1;         "~*skypeuripreview"                         1;         "~*nuzzel"                                  1;         "~*discordbot"                              1;         "~*google\ page\ speed"                     1;         "~*qwantify"                                1;         "~*pinterestbot"                            1;         "~*bitrix\ link\ preview"                   1;         "~*xing-contenttabreceiver"                 1;         "~*chrome-lighthouse"                       1;         "~*telegrambot"                             1;         "~*google-inspectiontool"                   1;         "~*petalbot"                                1;     }     map $args $prerender_args {         default $prerender_ua;         "~(^|&)_escaped_fragment_=" 1;     }     map $http_x_prerender $x_prerender {         default $prerender_args;         "1"     0;     }     map $uri $prerender {         default $x_prerender;         "~*\.(js|css|xml|less|png|jpg|jpeg|gif|pdf|txt|ico|rss|zip|mp3|rar|exe|wmv|doc|avi|ppt|mpg|mpeg|tif|wav|mov|psd|ai|xls|mp4|m4a|swf|dat|dmg|iso|flv|m4v|torrent|ttf|woff|woff2|svg|eot)" 0;     }

La primera map examina el agente de usuario de una petición HTTP. Si el agente de usuario está en la lista de bots de motores de búsqueda, se activan otras variables y configuraciones para preparar la redirección a Prerender.io.

A continuación, dentro del location añada lo siguiente para reescribir la URL y anteponer el prefijo prerenderio/ camino:

if ($prerender = 1) {   rewrite (.*) /prerenderio last; }

Por último, añada el bloque de ubicación para el prerenderio/ camino:

location /prerenderio {   if ($prerender = 0) {     return 404;   }   proxy_set_header X-Prerender-Token YOUR_TOKEN;   proxy_set_header X-Prerender-Int-Type Nginx;   proxy_hide_header Cache-Control;   add_header Cache-Control "private,max-age=600,must-revalidate";   #resolve using Google's DNS server to force DNS resolution and prevent caching of IPs   resolver 8.8.8.8 8.8.4.4;   set $prerender_host "service.prerender.io";   proxy_pass https://$prerender_host;   rewrite .* /$scheme://$host$request_uri? Break;}

Este location indica a Prerender.io que renderice la página de destino y sirva el HTML estático. Para la autenticación, asegúrese de reemplazar YOUR_TOKEN con el token real de tu cuenta de Prerender.io. En el caso de que Prerender.io ya haya renderizado esta página en el pasado, puede servir una versión en caché (dependiendo de cómo se configurar la caché en su cuenta de Prerender.io).

La guía de integración Nginx de Prerender.io es bastante completa. Si utiliza Apache en lugar de Nginx, puede consultar la guía de integración del servidor web Apache .

Los cuatro pasos básicos para integrar Prerender.io

En términos generales, independientemente del enfoque, la integración de Prerender.io en su aplicación implica los siguientes pasos:

1. Detectar rastreadores. Inspeccionar la cabecera del agente de usuario en las peticiones. En el ejemplo anterior de Nginx , sólo tenemos que mirar la cabecera $http_user_agent variable.
2. Redirigir a prerender.io. Reenvía las peticiones de los bots a Prerender.io para su renderización.
3. Modificar las rutas de petición. Asegúrese de que las rutas de solicitud tienen el formato correcto para Prerender.io, que espera la URL completa como ruta.
4. Gestionar el almacenamiento en caché. Encuentre el equilibrio entre aprovechar Prerender.io para servir páginas HTML estáticas en caché (para mayor velocidad) y dirigir Prerender.io para que vuelva a almacenar en caché el contenido actualizado de su sitio (para mayor frescura). Consulte la guía sobre almacenamiento en caché de Prerender.io.

Método 2: En el código de su aplicación (Node.js Express)

Si tienes una aplicación que utiliza un framework JavaScript (como React, Vue.js o Angular) para el front-end, entonces puedes configurar el servidor de aplicaciones para que tu front-end realice los cuatro pasos básicos enumerados anteriormente.

Si usas Express para servir tu front-end, entonces puedes aprovechar el middleware pre-construido de Prerender.io, que hará todo esto por ti. Puedes ver la guía de integración con Node de Prerender.io para más detalles. Para desglosarlo para usted, esto es lo que está involucrado:

Instale el paquete Node.js :

npm install prerender-node --save

Añada el siguiente código a su archivo principal index.js o app.js donde está definida su aplicación de servidor Express:

app.use(require('prerender-node').set('prerenderToken', 'YOUR_TOKEN'));

De nuevo, para la autenticación, asegúrese de sustituir YOUR_TOKEN con tu token de cuenta real de Prerender.io.

A continuación, reinicie su servidor Express.

¡Eso es todo!

Conclusión

Prerender sus páginas puede ayudarle a resolver los desafíos de SEO cuando se utilizan marcos modernos de JavaScript y renderización del lado del cliente. Prerender.io renderiza tus páginas con antelación y luego entrega ese HTML estático a los rastreadores de los motores de búsqueda. De esta manera, puede asegurarse de que su contenido es totalmente accesible para los robots de los motores de búsqueda, lo que resulta en una indexación precisa y una mejor clasificación en los resultados de búsqueda. Al resolver este problema de SEO, su sitio web tendrá una mayor visibilidad y un aumento del tráfico orgánico.

Cuando combina estas técnicas de prerrenderizado con las soluciones de cloud computing de Akamai, fáciles de gestionar, tendrá sitios optimizados para SEO en funcionamiento en muy poco tiempo. Para obtener más consejos y guías sobre cómo sacar el máximo partido a los servicios de cloud computing de Akamai a la hora de implementar sus aplicaciones, consulte nuestra amplia biblioteca de documentos.