1.
SEO para PWA
Qué son y cómo optimizarlas
Por Christian Oliveira & Natzir Turrado

2.
Qué vamos a ver
1. Qué son las PWA y cómo funcionan
2. Cómo tratan JS los buscadores actuales
3. Soluciones de renderizado para sitios JS
4. Buenas prácticas para sitios JS y PWA
5. Experimento PWA sin prerender a Google (CSR)
6. Conclusiones

3.
1. Qué son las PWA y cómo funcionan

4.
APP nativas
$ Funnel más largo
Desarrolladores escasos
y más caros
Mantenimiento de
versiones
Mantenimiento de
dispositivos
Inversión en otro canal
Suelen tardar más en
desarrollarse
Native And PWA: Choices, Not Challengers! - https://goo.gl/fq6X2E

5.
APP nativas
How Much Does it Cost to Develop and Build an App - https://goo.gl/uQmoQm
APP SIMPLE BBDD/API APP
MULTI FUNCIÓN
/ EMPRESARIAL
JUEGO
$10K $10K-50K $50K-150K $5K-250K
2-4
semanas
2-3
meses
3-6
meses
varía
mucho

6.
APP nativas
How Much Does it Cost to Develop and Build an App - https://goo.gl/uQmoQm
PERFILES DE
USUARIOS
COMPRAS
IN-APP
GEO
LOCALIZACIÓN
SINCRO ENTRE
DISPOSITIVOS
$7,5K-9,5K $5,5K-15K $7,5K-17K $5,5K-7,5K
EMAIL LOGIN SOCIAL LOGIN INTEGRACIÓN
SOCIAL
SISTEMA DE
RATING
$5,5K-7,5K $2K-3K $2K-15K $5,5K-20K

7.
APP nativas
“En una APP nativa,
cada paso te cuesta
un 20% de tus
usuarios.”
Gabor Cselle, PM en @Google
Every Step Costs You 20% of Users - https://goo.gl/QyaHUn

8.
Mobile Web APPs
$ Mantenimiento
navegadores
No indexable en APP
stores
Difícil RWD
Mantenimiento de
dispositivos
No permiten navegación
offline
Web Development Cost / Rate Comparison - https://goo.gl/tQdXuZ

9.
Y llegamos a las Progressive Web APPs (PWA)
“Experiencia APP”
Transiciones y compras
más rápidas
Notificaciones push
Contenido offline
Botón de pantalla de
inicio
Sin instalación
Fácilmente compartibles
y enlazables
Indexables en buscadores
Experiencia unificada
Indexables en APP stores
Progressive Web APPs - https://goo.gl/jrSk5u
Progressive y Responsive

10.
Las PWA usan frameworks y librerías JavaScript (JS)
Comunidad enorme
Más seguros
Económicos / open
source
Facilitan el trabajo a
desarrolladores
Mejor rendimiento

11.
Las PWA usan frameworks y librerías JavaScript (JS)
Stack Overflow Developer Survey '17 - https://goo.gl/P8S1X7
Top 5 lenguajes de programación Top 5 frameworks, librerías y
otras tecnologías

12.
Cómo funciona una PWA
{i}
JSON
S/MPA Service
Worker

13.
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - https://youtu.be/X6yof_vIQnk
Cache

14.
Cómo funciona una PWA
Service
Worker
req
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - https://youtu.be/X6yof_vIQnk
Cache
req

15.
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - https://youtu.be/X6yof_vIQnk
Cache
req
req

16.
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - https://youtu.be/X6yof_vIQnk
Cache
req
res

17.
Cómo funciona una PWA
{i}
JSON
Web App Manifest - https://goo.gl/SB2ur3

18.
PWAs: building bridges to mobile, desktop, and native (Google I/O '18) - https://youtu.be/NITk4kXMQDw
Qué navegadores soportan las funciones de las PWA
✔ ✔ ✔ ✔ ✔ ✔
✔ ✔ ✔ ✔ ✔ ✔ ✔
✔ ✔ ✔ ✔ ✔ ✔ ✔
✔ ✔
✔ ✔ ✔ ✔
✔ ✔
Añadir a pantalla
de inicio
Service Workers
Notificaciones
Push
Credential
Management API
Payment
Request API
Meta Theme Color
Soportado Beta Desarrollo✔ ✔

19.
La velocidad de una PWA
Mejor carga inicial que
en web y posteriores
todavía más rápidas
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH

20.
La velocidad de una PWA
Compra 35% más rápida
Búsqueda 49% más rápida
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH

21.
La velocidad de PWA + AMP
Carga prácticamente
instantánea desde buscadores
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH

22.
La velocidad de PWA + AMP
Service Worker carga en 2º plano
<amp-install-serviceworker>
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH

23.
La velocidad de PWA + AMP
El usuario entra en la PWA
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH

24.
Google/SOASTA Research '17 - https://goo.gl/o1MWEK
La importancia de la velocidad de carga
1s - 3s la probabilidad de rebote se incrementa 32%
1s - 5s la probabilidad de rebote se incrementa 90%
1s - 6s la probabilidad de rebote se incrementa 106%
1s - 10s la probabilidad de rebote se incrementa 123%
Si tu web tarda en cargar entre:

25.
Speed Matters Vol.3 - https://goo.gl/QM8cM4 & Ericsson ConsumerLab. Neurons Inc. 2015 - https://goo.gl/NyQd4Z
Velocidad de cargaDiseño adaptableDiseño atractivo Findability
La importancia de la velocidad de carga
¿Qué es más importante para los usuarios?
Sencillez
24 % 58 % 61 % 66 % 75 %
Las webs lentas
estresan más que
una peli de miedo

26.
2. Cómo tratan JS los buscadores actualmente

27.
Sólo Google y ASK renderizan JS, Baidu lo intenta
Baidu Adds New Spider with Rendering Job - https://goo.gl/Jd79qW

28.
Crawlear =! Renderizar =! Indexar =! Rankear
49
páginas indexadas
28páginas indexadas
17
páginas indexadas
30páginas indexadas

29.
Renderizar un sitio en JS cuesta mucho
The Cost of JavaScript - https://goo.gl/6jwY3U
22s35s 14s
10% sitios 25% sitios 50% sitios
Tiempo de interacción (TTI)
en dispositivos móviles
170 KB de JS
!==
170 KB de JPEG

30.
Renderizar un sitio en JS cuesta mucho
“Para ejecutar JS en cada página a
nuestra escala necesitaríamos
10K-15K servidores y no creemos
que nuestros clientes estén
dispuestos a pagar esto”
Dmitry Gerasimenko, CEO Ahrefs
Ahrefs crawlers are now rendering web pages and executing JavaScript - https://goo.gl/DQuero
Ahrefs cada 24 horas:
● Crawlea 6 Billones de páginas
● Renderiza 30 Millones de páginas JS
● Resultando en 250 Millones de links JS
● Con 400 servidores
~173 urls segundo por server
~0,86 urls segundo por server

31.
Google no espera indefinidamente a renderizar
5’
Tiempo que suele esperar según experimentos que hemos hecho
y confirmado por otros SEO
No hay un tiempo oficial - https://goo.gl/MhNXdd
’

32.
Google no espera indefinidamente a renderizar
5’
Tiempo que suele esperar según experimentos que hemos hecho
y confirmado por otros SEO
No hay un tiempo oficial - https://goo.gl/MhNXdd
’
Usa como referencia
el snapshot de la
Mobile Friendly Tool

33.
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear
A medida que
llegan recursos
de renderizado
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ

34.
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear
A medida que
llegan recursos
de renderizado
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
Google aplaza el
renderizado por
falta de recursos

35.
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear
A medida que
llegan recursos
de renderizado
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
Lee el canonical, rel=amphtml
y el status HTTP en el fetch
inicial y no les da una 2ª
oportunidad si no están

36.
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear
A medida que
llegan recursos
de renderizado
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
Si el Noindex, Hreflang y
rel=next/prev no están en el
HTML, los leerá en la
versión renderizada

37.
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear
A medida que
llegan recursos
de renderizado
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
Google usa Chrome 41 para
renderizar. Lo hace Caffeine
con un subsistema de WRS

38.
Tipos de eventos y links que sigue Google
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
Google rastrea, indexa y pasa PageRank a los links HTML (<a href=...)
● <a href="/este-link"> será rastreado </a>
● <a href="/este-link" onclick="cambioPagina('este-link')"> será rastreado </a>
● <a onclick="cambioPagina('este-link')"> no será rastreado </a>
● <span onclick="cambioPagina('este-link')"> no será rastreado </span>

39.
Tipos de eventos y links que sigue Google
https://goo.gl/rRPWcC & https://goo.gl/aZaECU & https://goo.gl/aZaECU & https://goo.gl/j1ccxF
Google rastrea e indexa cualquier cosa que tenga forma de enlace para descubrir,
pero no les pasará PageRank (no quiere decir que no aparezcan cuando los
busques):
● <a onclick="cambioPagina('/este-link')"> será rastreado </a>
● <span onclick="cambioPagina('/este-link')"> será rastreado </span>
● /este-link será rastrado

40.
Tipos de eventos y links que sigue Google
https://goo.gl/rRPWcC & https://goo.gl/aZaECU & https://goo.gl/aZaECU & https://goo.gl/j1ccxF
Google rastrea e indexa cualquier cosa que tenga forma de enlace para descubrir,
pero no les pasará PageRank (no quiere decir que no aparezcan cuando los
busques):
● <a onclick="cambioPagina('/este-link')"> será rastreado </a>
● <span onclick="cambioPagina('/este-link')"> será rastreado </span>
● /este-link será rastrado
Los eventos onscroll los sigue a veces y onmouseover no los sigue. Si tienes una
paginación con onscroll puede llegar a indexarse (sólo las primeras páginas).
Saber qué tipos de eventos y links sigue Google es importante porque las URLs
indexadas se tienen en cuenta para evaluar la calidad de un sitio web.

41.
3. Soluciones de renderizado para sitios JS

42.
Client Side Rendering (CSR)
req
res: JS
JS+JSON=HTML req
res: JSON

43.
Server Side Rendering (SSR)
JS+JSON
= HTML
req
res: HTML

44.
Hybrid Rendering
Building a hybrid-rendered PWA - https://goo.gl/ZNfzr1
SSR
CSR

45.
Dynamic Rendering (DR)
WEB
SERVER
Usuarios
Googlebot
y otros
CSR o Hybrid
rendering
SSR
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ

46.
Dynamic Rendering (DR)
WEB
SERVER
Usuarios
Googlebot
y otros
CSR o Hybrid
rendering
SSR
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
User-agent o
Reverse DNS

47.
Dynamic Rendering (DR)
Googlebot
Fetch & Render As Any Bot - https://goo.gl/1augcc

48.
Dynamic Rendering (DR)
Fetch & Render As Any Bot - https://goo.gl/1augcc
UsuariosGooglebot

49.
¿Qué es lo preferible para los usuarios?
SSR

50.
¿Qué es lo preferible para los usuarios?
Netflix and SSR - https://goo.gl/ym6fWN

51.
¿Qué es lo preferible para los usuarios?
Walmart and SSR - https://goo.gl/EwmPyD
SSR CSR
FCP >

52.
¿Qué es lo preferible para los usuarios?
Walmart and SSR - https://goo.gl/EwmPyD
SSR CSR
TTFB <

53.
¿Qué es lo preferible para sistemas?
The Benefits of Server Side Rendering Over Client Side Rendering - https://goo.gl/EwmPyD
CSR

54.
¿Qué es lo recomendado para Google?
Funcionalidades JS
Tipo de sitio web > Chrome 41 < Chrome 41
Pequeño y estático SSR / DR CSR
Pequeño y dinámico SSR / DR CSR / SSR / DR
Grande y estático SSR / DR SSR / DR
Grande y dinámico SSR / DR SSR / DR

55.
¿Qué es lo recomendado para Google?
Tweet de Barry Adams - https://goo.gl/umSS1j

56.
4. Buenas prácticas para sitios JS y PWA

57.
Auditoría de PWA y Perfomance
https://developers.google.com/web/tools/lighthouse/ & https://sonarwhal.com

58.
Mobile-Friendly Test / Screenshot
Progressive Web App Checklist - https://goo.gl/jGj4D2

59.
Mobile-Friendly Test / Rendered HTML
Progressive Web App Checklist - https://goo.gl/jGj4D2

60.
Mobile-Friendly Test / Page loading issues
Mobile-Friendly Test - https://goo.gl/FjHMk5

61.
Fetch and Render Fetch & Render es menos
tolerante a la lentitud
que el WRS de Caffeine

62.
Fetch and Render de cualquier dominio
Fetch and Render de cualquier sitio - https://github.com/screamingfrog/fetch-and-render
Añade esta meta al
código original

63.
Fetch and Render de cualquier dominio
https://www.analistaseo.es/fetch-and-render/
?url=https://www.ejemplo.com&type=mobile
Fetch and Render de cualquier sitio - https://github.com/screamingfrog/fetch-and-render

64.
Fetch and Render en staging
1. Noindex a staging
2. Reverse DNS

65.
Crawlea y compara staging con producción
- https://www.fandangoseo.com/

66.
Crawlea simulando mobile y con render JS
- https://www.fandangoseo.com/

67.
Comprueba las metas con otros user-agent
Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl/7r7rcn
Google: User-Agent String: Mozilla/5.0 (compatible;
Googlebot/2.1; +http://www.google.com/bot.html)
Googlebot Mobile: Mozilla/5.0 (Linux; Android 6.0.1; Nexus
5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible;
Googlebot/2.1; +http://www.google.com/bot.html)
Facebook: facebookexternalhit/1.1
(+http://www.facebook.com/externalhit_uatext.php)

68.
Comprueba las metas con otros user-agent
Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl/7r7rcn

69.
Navega sin JS con otros user-agent
Web Developer - https://goo.gl/WqjjLa

70.
Navega sin JS con otros user-agent
UsuariosGooglebot
Web Developer - https://goo.gl/WqjjLa

71.
Navega sin JS con otros user-agent
Web Developer - https://goo.gl/WqjjLa
UsuariosGooglebot

72.
Comprueba los errores de consola y los links en Chrome 41
Descarga Chrome 41 - https://goo.gl/3tpxpH

73.
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist SEO para CSR
1. Canonicals + metadatos no dependen de CSR
2. La página renderiza en menos de 5 seg
3. La página carga y es funcional en Chrome 41
4. Los enlaces al renderizar aparecen como elementos <a>
5. El HTML + visual es el esperado en Mobile Friendly Tool
6. El HTML + visual es el esperado al “Obtener y procesar” en
Search Console
7. Las páginas aparecen al buscar cadenas específicas de texto
8. El contenido no se replica en diferentes páginas
9. No se usa !# (History API) y cada página con su url

74.
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist SEO para Dynamic Rendering (SSR)
1. Servimos SSR a Googlebot + bots específicos (FB, TW…)
2. El contenido que recibe Googlebot es el mismo que el de un
navegador normal
3. Los códigos de respuesta son los mismos en ambos casos
4. El metaetiquetado es el mismo en ambos casos
5. El servidor es capaz de manejar el renderizado bajo alta carga
6. La versión SSR incluye todo el contenido y enlaces de forma
correcta
7. Todas las páginas tienen el comportamiento esperado en ambos
casos
8. No se usa !# (History API) y cada página con su url

75.
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist UX & WPO
Progressive Web App Checklist - https://goo.gl/jGj4D2
1. El sitio está en HTTPS
2. Las páginas son mobile friendly y funcionan en diversos navegadores
3. Las urls cargan de forma offline
4. Metadata para añadir a la pantalla de inicio
5. TTI <10s en 3G
6. Las transiciones son inmediatas
7. Verificar que se hace uso de cache-first
8. Informar cuando se hace uso de la versión offline
9. Comprobar que el contenido no "salta" al cargar (usa un skeleton)
10. Devolver al usuario a donde estaba al pulsar atrás
11. Que los inputs no se tapen cuando se despliega el teclado
12. El contenido es fácilmente compartible (Web Share API)
13. No molestar con el añadir a pantalla de inicio

76.
5. Experimento PWA sin prerender a Google (CSR)

77.
Experimento PWA sin prerender (CSR)
Worona - https://www.worona.org/
Antes:
wordpress
clásico
Después: PWA
con Worona
(CSR)

78.
Experimento PWA sin prerender (CSR)
CSR = Sin
Javascript no hay
contenido

79.
Prueba 1: renderizado
Renderiza en
Mobile Friendly
Tool
Renderiza en Search
Console
Google renderiza e
indexa la página

80.
Prueba 1: renderizado
Renderiza en
Mobile Friendly
Tool
Renderiza en Search
Console
Google renderiza e
indexa la página
15’ después de
“solicitar
indexación” en SC

81.
Prueba 1: renderizado
Observaciones:
● Google ha sido capaz de renderizar e indexar el contenido
● El proceso ha sido relativamente rápido (15’)

82.
Prueba 2: rankings

83.
Prueba 2: rankings

84.
Prueba 2: rankings

85.
Prueba 2: rankings
Observaciones:
● No se han perdido los rankings por tener el contenido en
una PWA sin renderizar

86.
Prueba 3: nuevo contenido
Publicamos nuevo
post
Forzamos
indexación de la
home del blog

87.
Prueba 3: nuevo contenido
4 días después
todavía no se ha
indexado

88.
Prueba 3: nuevo contenido
Observaciones:
● Si no forzamos el renderizado y la indexación de ese
contenido, Google tardará en indexar el nuevo contenido.

89.
Prueba 4: comprobando las dos “olas” de indexación
Añadimos una
palabra inventada a
la versión no-JS

90.
Prueba 4: comprobando las dos “olas” de indexación
Le damos a “Obtener” (sin
procesar) en SC + Solicitar
indexación

91.
Prueba 4: comprobando las dos “olas” de indexación
A los pocos minutos…
¡Google indexa y asocia esa
palabra a la web!

92.
Por otro lado, la caché de
Google no se ha actualizado
Prueba 4: comprobando las dos “olas” de indexación

93.
Prueba 4: comprobando las dos “olas” de indexación
Y la página sigue apareciendo
para cadenas de texto de la
versión anterior

94.
Observaciones:
● Antes de renderizar la página Google ha indexado el
contenido que hay sin JS (primera ola).
● Este contenido lo ha asociado a la versión anterior de la
web (sin PWA).
Prueba 4: comprobando las dos “olas” de indexación

95.
6. Conclusiones

96.
Conclusiones
● A día de hoy muy pocas webs han migrado
directamente a PWA sin prerender (CSR) para todos
los agentes. Los que lo han hecho y han bajado,
tenían otros problemas técnicos (hulu.com).
● Las webs nuevas que han salido directamente con PWA
sin prerender no tienen problemas para rankear,
pero sí de indexación.
● De momento, y para Google, el Dynamic Rendering es
una solución que funciona y que hemos podido
comprobar en proyectos.

97.
SEO para PWA
GRACIAS
Natzir Turrado
analistaseo.es
hola@natzir.com
@natzir9
Christian Oliveira
christianoliveira.com
christian@usal.es
@christian_wilde