Presentación de Fernando Maciá y Ramón Saquete en Enpresa Digitala sobre los aspectos SEO de las Progressive Web Applications o PWA en mayo de 2018.

1. SEO en 2018
Indexabilidad de PWA
Ramón Saquete/Fernando Maciá
Human Level Communications

2. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

3. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

4. ¿Qué es una PWA?
Progessive Web App es un
termino acuñado por
Google, a finales del 2015,
para dar nombre e impulsar
el desarrollo de las webs
responsive que tienen
funcionalidades y
características de una
aplicación móvil. Estas
webs, pueden funcionar
como si fueran Apps, de
forma indistinguible para el
usuario de una aplicación
móvil nativa.
@fernandomacia

5. ¿Qué es una PWA?
“Básicamente, es un
sitio Web mobile
que genera una
experiencia de
usuario similar a la
de una app nativa”
@fernandomacia

6. ¿Qué es una PWA?
Es una idea que no es nueva: el WHATWG empezó a
establecer las APIS para poder implementar PWAs en
2005, con el estándar Web applications 1.0
(renombrado a HTML5 en 2014)
@fernandomacia

7. HTML Living Standard en WhatWG.org
@fernandomacia

8. ¿Qué es una PWA?
Steve Jobs animando a desarrollar PWAs en 2007:
@fernandomacia
https://youtu.be/ZlE7dzoD6GA?t=1m

9. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

10. Características que debe tener una PWA
Confiable: carga instantáneamente incluso en malas
condiciones de red.
Rápida: usa varias técnicas de WPO para que la
respuesta sea rápida, tenga animaciones fluidas y el
scroll no pegue saltos.
Atractiva: parece una aplicación más con una
experiencia de usuario inmersiva.
Y además…
@fernandomacia

11. Características que debe tener una PWA
Desarrollada según la estrategia progressive
enhancement
En desarrollo hay dos estrategias para lidiar con la
compatibilidad de nuevas funcionalidades entre navegadores:
Si el navegador no puede ejecutar determinada
funcionalidad, no se da una alternativa (más ligero)
@fernandomacia

12. Características que debe tener una PWA
Conectividad mejorada con service workers (antes
AppCache) para trabajar sin conexión o con redes de
mala calidad.
@fernandomacia

13. Características que debe tener una PWA
Es responsive: se adapta a cualquier formato de
pantalla.
Incentiva las visitas recurrentes al poder añadirse
desde las opciones del navegador (sólo Google
Chrome, Firefox y Opera de momento) como
aplicación móvil con su propio acceso directo
Para esto debemos crear un archivo manifest.json
Ejemplo de generadores manifest.json:
https://tomitm.github.io/appmanifest/
https://app-manifest.firebaseapp.com/
@fernandomacia

14. Creación del archivo manifest.json
@fernandomacia

15. Características que debe tener una PWA
Incentiva las visitas recurrentes: Google Chrome
pide automáticamente al usuario que se añada como
aplicación, si se cumplen unos requisitos.
@fernandomacia

16. Características que debe tener una PWA
Requisitos actuales para mostrar el banner de
instalación:
El usuario ha visitado la página 2 veces, con al menos 5
minutos de diferencia entre las visitas.
Ha registrado un service worker (por lo tanto tiene HTTPS).
Existe el archivo manifest.json y este contiene:
• Un icono de 192x192 en formato png
• El nombre y el nombre corto (name y short_name)
• La URL de inicio (start_url)
El programador puede capturar el evento de mostrar
el banner y decidir mostrarlo en otro momento,
cuando hay un mayor nivel de engagement.
@fernandomacia

17. Añadir como app: sólo Android/ChromeOS
@fernandomacia

18. Características que debe tener una PWA
Buenas prácticas
@fernandomacia

19. Características que debe tener una PWA
Rápida: usando todo tipo de técnicas de WPO para
que la carga sea instantánea, que la pantalla no pegue
saltos al cargar, que la respuesta de la interfaz sea
inmediata, etc.
Entre las técnicas de WPO que se usan hay que
destacar AJAX (ahora API Fetch). Veremos los
problemas de indexabilidad que esto plantea más
adelante.
Segura: debe tener HTTPS. Esto también es necesario
para poder instalar service workers.
@fernandomacia

20. Características que debe tener una PWA
Con notificaciones push: son una nueva forma de ofrecer
publicidad y aportar valor a los usuarios (https://
tests.peter.sh/notification-generator/) en Chrome.
@fernandomacia

21. Características que debe tener una PWA
Debemos solicitar
permiso al usuario
para mostrarle
notificaciones que
deben ir dirigidas a
sus intereses. Para
hacerlo, tres
criterios: oportuno,
preciso y relevante
Actualmente no
funciona en Edge
@fernandomacia

22. Características que debe tener una PWA
Descubribles: al contrario que las apps nativas se
pueden indexar y enlazar (vinculable).
@fernandomacia

23. https://preview.pwabuilder.com
@fernandomacia

24. Otras características de una PWA
Estas aplicaciones son multiplataforma (se pueden
ejecutar en cualquier dispositivo) por lo que ahorra el
coste de desarrollar una aplicación para cada
dispositivo.
Para videojuegos y otras aplicaciones con un alto
coste computacional, no son tan rápidas como las
aplicaciones nativas pero con WebAssembly
(tecnología en desarrollo) la diferencia va a ser muy
poca.
Son aplicaciones que además de ofrecer contenidos
cuentan con funcionalidades que podemos ver en
cualquier aplicación móvil o incluso de escritorio.
Pueden acceder a la cámara, micrófono, GPS,
acelerómetro, etc.
@fernandomacia

25. Características que debe tener una PWA
Lista de características completa:
https://developers.google.com/web/progressive-web-apps/
checklist
Extensión Lighthouse para comprobar si tu PWA
cumple los puntos:
@fernandomacia

26. Características que debe tener una PWA
Si no queremos instalar la extensión, Lighthouse
también esta integrado en Google Chrome en la
pestaña Audits de las herramientas de desarrollador:
@fernandomacia

27. Podemos comprobar funcionalidades con caniuse.com
@fernandomacia

28. Comprobamos funcionalidades disponibles en
WhatWebCanDo.Today (Chrome)
@fernandomacia

29. Comprobamos funcionalidades disponibles en
WhatWebCanDo.Today (Safari)
@fernandomacia

30. Comprobamos funcionalidades disponibles en
WhatWebCanDo.Today (Firefox)
@fernandomacia

31. Comprobamos funcionalidades disponibles en
WhatWebCanDo.Today (Opera)
@fernandomacia

32. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

33. ¿Cómo afectan al SEO?
Las webs tienen más visitas que las aplicaciones
@fernandomacia
Fuente: comScore Mobile Metrix, Junio 2016

34. ¿Cómo afectan al SEO?
Pero los usuarios pasan más tiempo en las aplicaciones
@fernandomacia
Fuente: comScore Mobile Metrix, Junio 2016

35. ¿Cómo afectan al SEO?
La tendencia ha ido en aumento y además los usuarios
son más fieles
Por lo tanto una PWA debería mejorar el tiempo que
pasa el usuario dentro de la web.
@fernandomacia

36. ¿Cómo afectan al SEO?
Casos de éxito al pasar a PWA (https://
developers.google.com/web/showcase/
2016/aliexpress)
AliExpress:
•https://m.aliexpress.com
•+104% nuevos usuarios.
•+82% de conversión en Safari.
•2X páginas visitados por sesión.
•+74% en tiempo que pasan los usuarios por sesión.
@fernandomacia

37. ¿Cómo afectan al SEO?
eXtra Electronics (e-commerce: resultados al
implementar notificaciones push):
•+12% CTR.
•+100% de ventas debido a los usuarios que llegan de
notificaciones push, sobre pasando a las que conseguían por
campañas de email.
•4X visitas recurrente.
Jumia (e-commerce: notificaciones push para
carritos abandonados)
•38% de ratio de apertura de notificaciones.
•9X más conversiones de carritos abandonados.
•7.85% conversiones de carritos abandonados y recuperados
por notificaciones push contra un 4.5% de la app nativa.
@fernandomacia

38. ¿Cómo afectan al SEO?
Babe’s (agregador de noticias: implementan PWA más
optimizada que la App nativa):
• Los usuarios pasan el mismo tiempo ahora en la App nativa que
en la web.
• 3 artículos leídos por sesión en la web y 4 en la App nativa.
5miles (compra venta de segunda mano:
implementan PWA rápida, con notificaciones Push y
añadir el icono al escritorio móvil):
• -50% de tasa de rebote.
• +30% de tiempo gastado en el sitio.
• +30% de conversión de usuarios que provienen del icono del
escritorio móvil.
• 15% de ratio de apertura de notificaciones push.
@fernandomacia

39. ¿Cómo afectan al SEO?
Aumento de visitas debido al aumento de fuentes de
tráfico directo y publicidad, y a la mejora de
rendimiento y experiencia de usuario:
• Icono de aplicación móvil o icono de aplicación de escritorio (de momento
sólo en Chrome OS para escritorio o iOS desde Safari)
• Notificaciones push
@fernandomacia

40. ¿Cómo afectan al SEO?
Las nuevas fuentes de tráfico directo se miden igual que
cualquier otro tipo de campañas:
Añadiremos al manifest y las URLs de las notificaciones PUSH los
parámetros de seguimiento de campañas de Google Analytics
start_url:
“https://www.humanlevel.com/?
utm_source=web_app_manifest&utm_campaign=pwa_install_v20170922”
https://ga-dev-tools.appspot.com/campaign-url-builder/
El desarrollador puede lanzar registros de eventos de Google
Analytics para las solicitudes aceptadas y rechazadas del banner
de instalación en la home.
@fernandomacia

41. ¿Cómo afectan al SEO?
Problemas con Google Analytics:
No podremos medir las visitas offline y la visualización
de notificaciones.
El desarrollador podría no implementar correctamente
el registro de vistas en páginas cargadas con la API
Fetch (AJAX) o, peor aún, podría implementarlo de
forma que no fueran indexables.
@fernandomacia

42. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

43. Comprobar la indexabilidad
Las PWAs constan de un shell que no cambia durante
la navegación y una parte de contenido que se recarga
con la API Fetch. Este tipo de estructura se puede
implementar con frameworks de desarrollo SPA como
Angular, React, Vue, etc.
@fernandomacia
Cabecera y Menú de navegación
Sidebar
Pie
Contenido principal

44. Comprobar la indexabilidad
En general, para saber si un enlace dentro de una Web
es indexable:
Comprobar que el atributo HREF tiene una URL amigable.
Probar si esa URL funciona desactivando JavaScript y
pinchando en el enlace.
Una URL será indexable si:
Si aparece en algún enlace del sitio
La URL devuelve 200 OK.
Ojo con el cloaking:
No será considerado cloaking, si accediendo a la URL
directamente vemos lo mismo que pinchando en el enlace
dentro del sitio.
@fernandomacia

45. Comprobar la indexabilidad
@fernandomacia

46. Comprobar la indexabilidad
Junto a la indexabilidad es interesante estudiar
la accesibilidad:
Será accesible si al cambiar el contenido con la API
Fetch cambia la URL en la barra del navegador con la
API del historial.
Esta URL debe devolver la página completa al acceder a
ella directamente.
Si la URL no cambia no podremos guardarla en favoritos
ni compartirla.
@fernandomacia

47. Comprobar la indexabilidad
@fernandomacia

48. Comprobar la indexabilidad
¡Cuidado con la API del historial! Los desarrolladores
pueden inventar URLs que pueden no existir.
Ejemplo: http://www.thegillowfamily.co.uk/
Incluso puede parecer que un sitio usa AJAX indexable
y accesible cuando no es ninguna de las dos cosas.
Ejemplo: http://html5demos.com/history
Para detectarlo
Probar a acceder directamente a las URLs
Desactivar JavaScript y comprobar si el sitio sigue siendo
navegable.
@fernandomacia

49. Menú
¿Qué es una PWA?
Características que debe tener una PWA
¿Cómo afectan al SEO?
Comprobar la indexabilidad
Indexabilidad en frameworks SPA
@fernandomacia

50. Indexabilidad en frameworks SPA
Frameworks Single Page Aplication: Angular (Google),
React (Facebook), Vue, Meteor, Lazo, Rendr, Ember, etc.
Inicialmente surgen como frameworks para ejecutarse
sólo en el cliente. En el siguiente punto veremos que
esto ya no tiene porque ser así.
Son frameworks que de serie funcionan enviando una
plantilla al cliente que rellenan con los datos que
recogen de peticiones Fetch al servidor, lo que hace
que la primera carga sea más lenta y no sean indexables.
Suponen un cambio radical en la manera de trabajar
respecto a los frameworks MPA: ya no se pinta todo el
HTML en el servidor, si no parte en el servidor y parte
en el cliente.
@fernandomacia

51. Indexabilidad en frameworks SPA
@fernandomacia
Ejemplo de funcionamiento de una primera carga de página:
Navegador
Servidor
Petición fetch
Código
JavaScript
Petición síncrona a /
formacion/
Respuesta con
plantilla HTML y JS
Respuesta con datos

52. Indexabilidad en frameworks SPA
En un principio sólo había una forma de
hacer que una web implementada con
estos frameworks fuera indexable para las
arañas:
Pregenerar las páginas completas en HTML
en el servidor, con una herramienta como
https://prerender.io/, y devolver estas
páginas cuando detectamos que la petición
viene de una araña.
@fernandomacia

53. Indexabilidad en frameworks SPA
@fernandomacia
Ejemplo de generación de HTML al vuelo
Servidor
Araña
que no
ejecuta
JavaScript
Respuesta HTML
completo
Cliente
Prerender.IO
Código
Servidor
Plantilla
HTML
Petición Fetch
JavaScript
/formación/
Datos respuesta
Petición a /
formacion/
Caché HTML
Respuesta HTML
completo

54. Indexabilidad en frameworks SPA
Problemas:
Si llega una petición a una página no
cacheada se genera el HTML al vuelo, con lo
cuál esa página parecerá más lenta de lo
debido para la araña.
Cloaking
Tenemos el problema de la invalidación de
caché.
No podemos detectar todas las arañas.
@fernandomacia

55. Indexabilidad en frameworks SPA
Solución: JavaScript universal o isomórfico
@fernandomacia

56. Indexabilidad en frameworks SPA
@fernandomacia
Frameworks SPA con Universal JavaScript
Datos respuesta
1ª Petición a /formacion/
Respuesta con página completa
Servidor
JavaScript
Cliente/Servidor
JavaScript u otro
lenguaje sólo de
Servidor
Cliente
JavaScript
Cliente/Servidor
JavaScript
Cliente
F
e
t
c
h
D
a
t
o
s
2ª Petición /formación/pwa.html Fetch

57. Indexabilidad en frameworks SPA
Con Universal JavaScript los frameworks SPA se
convierten en frameworks de cliente y servidor al
mismo tiempo.
Mejoran la velocidad de carga respecto al uso de los
mismos frameworks sin Universal JavaScript y a los
frameworks MPA.
Las páginas no dejan de ser indexables.
Es la mejor forma de implementar páginas
indexables con la API Fetch sin tener código
duplicado.
Todo esto los convierte en los frameworks ideales para
implementar PWAs tal y como quiere Google.
@fernandomacia

58. Indexabilidad en frameworks SPA
Cuidado: que exista la posibilidad de usar Universal
JavaScript con estos frameworks, no quiere decir que
todos los desarrolladores lo hagan o lo conozcan.
Debemos comprobar siempre que se cargan la
páginas completas con el JavaScript desactivado
cuando sabemos que se están usando este tipo de
frameworks.
@fernandomacia

59. PWA y WordPress: recursos interesantes
@fernandomacia

61. !61
¿Preguntas?