Service Workers & el SEO

Descubre cómo los Service Workers pueden mejorar la optimización para motores de búsqueda (SEO) en tu sitio web. Conoce las mejores prácticas y estrategias para implementar Service Workers en español y mejora el rendimiento y visibilidad de tu página.

Es importante comprender el papel de los trabajadores de servicio y cómo pueden influir en el ranking de tu sitio web en los motores de búsqueda. A continuación, examinaremos cada uno de estos temas con más detalle.

¿Qué es un Service Worker?

Un service worker es una API de JavaScript. Una característica adicional opcional que permite que tu sitio web funcione sin conexión. Los service workers pueden ser considerados como una capa intermedia/proxy entre los navegadores web (lado del cliente) y los servidores web (lado del servidor). Con su capacidad para almacenar datos sin conexión, se utilizan para mejorar la confiabilidad y permitir capacidades sin conexión como notificaciones push y acceso sin conexión. Los service workers se utilizan típicamente para construir aplicaciones web progresivas (PWA) que pueden funcionar sin conexión. Trabajan en segundo plano en un hilo separado y pueden realizar tareas incluso cuando el usuario no está navegando por tu sitio web.

¿Por qué se utilizan los Service Workers?

Los Service Workers son una característica importante en el desarrollo web y se utilizan por diversas razones. Estas son las principales:

1. 1. Almacenar contenido para hacerlo disponible sin conexión (en aplicaciones web progresivas)

Una de las ventajas clave de los Service Workers es su capacidad para almacenar contenido y hacerlo accesible sin conexión a internet. Esto es especialmente útil en aplicaciones web progresivas (PWA) donde los usuarios pueden acceder al contenido incluso cuando no tienen acceso a una conexión de red.

1. 1. Mejorar el tiempo de carga

Los Service Workers pueden ayudar a mejorar significativamente el tiempo de carga de un sitio web. Al almacenar en caché ciertos recursos, como archivos CSS, JavaScript e imágenes, los Service Workers pueden reducir la necesidad de descargar estos archivos cada vez que un usuario visita el sitio. Esto resulta en una experiencia de carga más rápida y una mayor eficiencia.

1. 1. Sincronización en segundo plano

Los Service Workers permiten la sincronización en segundo plano, lo que significa que pueden realizar tareas incluso cuando el usuario no está interactuando con el sitio web. Esto es especialmente útil para aplicaciones que requieren actualizaciones periódicas de contenido o datos, como feeds de noticias o redes sociales. Los Service Workers pueden sincronizar automáticamente los datos en segundo plano, proporcionando una experiencia más fluida y actualizada para los usuarios.

1. 1. Permitir notificaciones push

Los Service Workers también son responsables de habilitar las notificaciones push en la web. Esto permite a los sitios web enviar notificaciones a los usuarios incluso cuando no están visitando activamente el sitio. Estas notificaciones pueden informar sobre nuevos mensajes, actualizaciones importantes o cualquier otra información relevante para el usuario.

En resumen, los Service Workers desempeñan un papel fundamental en la mejora de la experiencia del usuario en la web. Almacenar contenido sin conexión, mejorar el tiempo de carga, permitir la sincronización en segundo plano y habilitar las notificaciones push son solo algunas de las formas en que los Service Workers brindan funcionalidades avanzadas y mejoran la eficiencia de las aplicaciones web.

¿Cómo funcionan los Service Workers?

Los Service Workers son una tecnología que permite a los sitios web funcionar sin conexión y mejorar el rendimiento al almacenar en caché los recursos necesarios. A alto nivel, los Service Workers funcionan de la siguiente manera:

1. Se solicita el sitio web.
2. El Service Worker se registra mediante una función de JavaScript. Se puede especificar si el Service Worker debe aplicarse a todas las páginas del dominio o solo a algunas específicas.
3. El navegador descarga y ejecuta el archivo del Service Worker.
4. Cuando la instalación está completa, el Service Worker puede ser utilizado en el futuro.
   Las páginas que ya están abiertas en el navegador deben recargarse antes de poder ser procesadas utilizando el Service Worker que acaba de ser inicializado.
5. A partir de ese momento, el Service Worker se ejecuta desde la caché. Esto también garantiza que el usuario pueda utilizar el sitio sin conexión (o solo ciertas funcionalidades del mismo) una vez que el sitio, incluido el Service Worker, se haya inicializado en línea. Además, el Service Worker se descarga cada 24 horas siempre que haya una conexión a Internet.

Pros: ¿Pueden los Service Workers ayudar a mejorar el SEO?

Sí pueden, aquí tienes una demostración de cómo la instalación de service workers en un sitio web puede mejorar el rendimiento de la página. Básicamente, al agregar service workers, el autor logró aumentar la puntuación de Lighthouse móvil de 67 a 92.

Los service workers son scripts en segundo plano que se ejecutan de forma independiente al sitio web principal y pueden realizar tareas como cachear archivos, interceptar solicitudes de red y enviar notificaciones push. Estas características ayudan a mejorar el rendimiento y la experiencia del usuario.

Al utilizar service workers, es posible mejorar la velocidad de carga de un sitio web al almacenar en caché los archivos estáticos necesarios para su funcionamiento. Esto significa que el sitio se carga más rápido, lo cual es fundamental para el SEO, ya que Google considera la velocidad de carga como un factor de clasificación.

Otro beneficio de los service workers es que pueden trabajar offline. Esto significa que, incluso si el usuario pierde la conexión a internet, el sitio web seguirá siendo accesible y funcional. Esto puede ser especialmente útil en aplicaciones web progresivas y sitios donde la conexión a internet puede ser intermitente.

Además, los service workers permiten enviar notificaciones push a los usuarios. Esto puede ser utilizado para enviar actualizaciones relevantes o recordatorios a los usuarios, lo que ayuda a mantenerlos comprometidos con el sitio web.

En resumen, los service workers son una herramienta útil para mejorar la velocidad de carga, la capacidad offline y la capacidad de envío de notificaciones push en un sitio web. Estas características pueden tener un impacto positivo en el SEO al mejorar la experiencia del usuario y la velocidad de carga del sitio.

Desventajas: ¿Pueden los Service Workers afectar al SEO?

Los Service Workers pueden realizar cambios en el HTML de la página. Elementos como etiquetas de título, canónicas, etc. pueden ser eliminados o modificados. Un ejemplo famoso de cómo los Service Workers pueden interferir con el SEO fue reportado por el propio Google en la conferencia «Better Together» de Ryte, donde todo el sitio web no fue indexado, excepto la página de inicio. Martin analizó la situación de la siguiente manera:

• Se verificaron los enlaces internos de la página de inicio a las páginas internas y se encontraron las etiquetas y atributos de enlace correctos (sin atributos noindex o nofollow en los enlaces internos).
• Se verificó el código de estado HTTP de las páginas internas y las páginas devolvieron 200.
• Se probaron las páginas internas con la herramienta de prueba de amigabilidad móvil. ¡Esto mostró que la URL estaba bloqueada!
• A continuación, Martin verificó el archivo robots.txt para ver si la página estaba bloqueada para rastrear, pero no lo estaba.
• Luego volvió a verificar el código de estado y era 200, pero la página se entregaba mediante un service worker…
• Martin abrió una de las páginas no indexadas en modo incógnito y se encontró con un error 404.

Aparentemente, todos los visitantes que llegaban a la página por primera vez se encontraban con esto. Solo cuando los usuarios volvían a llamar a la página por segunda vez podían ver el contenido real de la página. Por supuesto, un motor de búsqueda solo solicita la página una vez y, por lo tanto, obtendría errores 404 de manera consistente cada vez que intente rastrear una página.

La forma en que se configuraron los Service Workers en esa situación hizo que las páginas devolvieran errores 404 y no se indexaran. El sitio web estaba configurado de tal manera que si un usuario visita la página de inicio por primera vez, los Service Workers se instalan en la caché, y por lo tanto, pueden navegar y ver otras páginas internas sin problemas. Pero si el usuario llega al sitio web por primera vez a través de una página interna y no de la página de inicio, los Service Workers no se instalan, por lo que el usuario debe actualizar la página para que se instalen los Service Workers.

Esta situación hizo que Google no pudiera ver las páginas internas, ya que rastrea las páginas sin una caché.

Cómo verificar cómo los trabajadores de servicio están afectando tu sitio web y SEO

La forma más fácil es utilizar las herramientas de desarrollo de Chrome: una vez que hayas verificado el bypass para la red y hayas recargado la página, si ves algún contenido faltante en la página o un error 404, esto significa que la forma en que se han configurado los trabajadores de servicio en el sitio web está afectando al SEO. El siguiente paso es llevarlo al equipo de desarrollo.

También puedes ir a la pestaña de red en las herramientas de desarrollo y verificar qué solicitudes específicas fueron desencadenadas por un trabajador de servicio. Encuentra las solicitudes con un icono de engranaje junto a ellas.

¿Las Progressive Web Apps utilizan Service Workers?

Sí, las Progressive Web Apps utilizan service workers para brindar a los usuarios una experiencia similar a la de una aplicación móvil nativa. De hecho, los service workers son un componente esencial para construir una progressive web app.