Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.
SEO para PWA
Qué son y cómo optimizarlas
Por Christian Oliveira & Natzir Turrado
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...
1. Qué son las PWA y cómo funcionan
APP nativas
$ Funnel más largo
Desarrolladores escasos
y más caros
Mantenimiento de
versiones
Mantenimiento de
dispositivo...
APP nativas
How Much Does it Cost to Develop and Build an App - https://goo.gl/uQmoQm
APP SIMPLE BBDD/API APP
MULTI FUNCIÓ...
APP nativas
How Much Does it Cost to Develop and Build an App - https://goo.gl/uQmoQm
PERFILES DE
USUARIOS
COMPRAS
IN-APP
...
APP nativas
“En una APP nativa,
cada paso te cuesta
un 20% de tus
usuarios.”
Gabor Cselle, PM en @Google
Every Step Costs ...
Mobile Web APPs
$ Mantenimiento
navegadores
No indexable en APP
stores
Difícil RWD
Mantenimiento de
dispositivos
No permit...
Y llegamos a las Progressive Web APPs (PWA)
“Experiencia APP”
Transiciones y compras
más rápidas
Notificaciones push
Conte...
Las PWA usan frameworks y librerías JavaScript (JS)
Comunidad enorme
Más seguros
Económicos / open
source
Facilitan el tra...
Las PWA usan frameworks y librerías JavaScript (JS)
Stack Overflow Developer Survey '17 - https://goo.gl/P8S1X7
Top 5 leng...
Cómo funciona una PWA
{i}
JSON
S/MPA Service
Worker
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - ht...
Cómo funciona una PWA
Service
Worker
req
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) ...
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - ht...
Cómo funciona una PWA
Service
Worker
Beyond single-page apps: alternative architectures for your PWA (Google I/O '18) - ht...
Cómo funciona una PWA
{i}
JSON
Web App Manifest - https://goo.gl/SB2ur3
PWAs: building bridges to mobile, desktop, and native (Google I/O '18) - https://youtu.be/NITk4kXMQDw
Qué navegadores sopo...
La velocidad de una PWA
Mejor carga inicial que
en web y posteriores
todavía más rápidas
The Definitive Guide to Ecommerce...
La velocidad de una PWA
Compra 35% más rápida
Búsqueda 49% más rápida
The Definitive Guide to Ecommerce Performance - http...
La velocidad de PWA + AMP
Carga prácticamente
instantánea desde buscadores
The Definitive Guide to Ecommerce Performance -...
La velocidad de PWA + AMP
Service Worker carga en 2º plano
<amp-install-serviceworker>
The Definitive Guide to Ecommerce P...
La velocidad de PWA + AMP
El usuario entra en la PWA
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH
Google/SOASTA Research '17 - https://goo.gl/o1MWEK
La importancia de la velocidad de carga
1s - 3s la probabilidad de rebo...
Speed Matters Vol.3 - https://goo.gl/QM8cM4 & Ericsson ConsumerLab. Neurons Inc. 2015 - https://goo.gl/NyQd4Z
Velocidad de...
2. Cómo tratan JS los buscadores actualmente
Sólo Google y ASK renderizan JS, Baidu lo intenta
Baidu Adds New Spider with Rendering Job - https://goo.gl/Jd79qW
Crawlear =! Renderizar =! Indexar =! Rankear
49
páginas indexadas
28páginas indexadas
17
páginas indexadas
30páginas index...
Renderizar un sitio en JS cuesta mucho
The Cost of JavaScript - https://goo.gl/6jwY3U
22s35s 14s
10% sitios 25% sitios 50%...
Renderizar un sitio en JS cuesta mucho
“Para ejecutar JS en cada página a
nuestra escala necesitaríamos
10K-15K servidores...
Google no espera indefinidamente a renderizar
5’
Tiempo que suele esperar según experimentos que hemos hecho
y confirmado ...
Google no espera indefinidamente a renderizar
5’
Tiempo que suele esperar según experimentos que hemos hecho
y confirmado ...
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear...
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear...
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear...
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear...
Google renderiza sitios JS en 2 fases
CRAWL
INDEX
RENDER
1ª ola de
indexación
2ª ola de
indexación
Nuevos links a
crawlear...
Tipos de eventos y links que sigue Google
Deliver search-friendly JavaScript-powered websites (Google I/O '18) - https://y...
Tipos de eventos y links que sigue Google
https://goo.gl/rRPWcC & https://goo.gl/aZaECU & https://goo.gl/aZaECU & https://...
Tipos de eventos y links que sigue Google
https://goo.gl/rRPWcC & https://goo.gl/aZaECU & https://goo.gl/aZaECU & https://...
3. Soluciones de renderizado para sitios JS
Client Side Rendering (CSR)
req
res: JS
JS+JSON=HTML req
res: JSON
Server Side Rendering (SSR)
JS+JSON
= HTML
req
res: HTML
Hybrid Rendering
Building a hybrid-rendered PWA - https://goo.gl/ZNfzr1
SSR
CSR
Dynamic Rendering (DR)
WEB
SERVER
Usuarios
Googlebot
y otros
CSR o Hybrid
rendering
SSR
Deliver search-friendly JavaScript...
Dynamic Rendering (DR)
WEB
SERVER
Usuarios
Googlebot
y otros
CSR o Hybrid
rendering
SSR
Deliver search-friendly JavaScript...
Dynamic Rendering (DR)
Googlebot
Fetch & Render As Any Bot - https://goo.gl/1augcc
Dynamic Rendering (DR)
Fetch & Render As Any Bot - https://goo.gl/1augcc
UsuariosGooglebot
¿Qué es lo preferible para los usuarios?
SSR
¿Qué es lo preferible para los usuarios?
Netflix and SSR - https://goo.gl/ym6fWN
¿Qué es lo preferible para los usuarios?
Walmart and SSR - https://goo.gl/EwmPyD
SSR CSR
FCP >
¿Qué es lo preferible para los usuarios?
Walmart and SSR - https://goo.gl/EwmPyD
SSR CSR
TTFB <
¿Qué es lo preferible para sistemas?
The Benefits of Server Side Rendering Over Client Side Rendering - https://goo.gl/Ewm...
¿Qué es lo recomendado para Google?
Funcionalidades JS
Tipo de sitio web > Chrome 41 < Chrome 41
Pequeño y estático SSR / ...
¿Qué es lo recomendado para Google?
Tweet de Barry Adams - https://goo.gl/umSS1j
4. Buenas prácticas para sitios JS y PWA
Auditoría de PWA y Perfomance
https://developers.google.com/web/tools/lighthouse/ & https://sonarwhal.com
Mobile-Friendly Test / Screenshot
Progressive Web App Checklist - https://goo.gl/jGj4D2
Mobile-Friendly Test / Rendered HTML
Progressive Web App Checklist - https://goo.gl/jGj4D2
Mobile-Friendly Test / Page loading issues
Mobile-Friendly Test - https://goo.gl/FjHMk5
Fetch and Render Fetch & Render es menos
tolerante a la lentitud
que el WRS de Caffeine
Fetch and Render de cualquier dominio
Fetch and Render de cualquier sitio - https://github.com/screamingfrog/fetch-and-ren...
Fetch and Render de cualquier dominio
https://www.analistaseo.es/fetch-and-render/
?url=https://www.ejemplo.com&type=mobil...
Fetch and Render en staging
1. Noindex a staging
2. Reverse DNS
Crawlea y compara staging con producción
- https://www.fandangoseo.com/
Crawlea simulando mobile y con render JS
- https://www.fandangoseo.com/
Comprueba las metas con otros user-agent
Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl...
Comprueba las metas con otros user-agent
Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl...
Navega sin JS con otros user-agent
Web Developer - https://goo.gl/WqjjLa
Navega sin JS con otros user-agent
UsuariosGooglebot
Web Developer - https://goo.gl/WqjjLa
Navega sin JS con otros user-agent
Web Developer - https://goo.gl/WqjjLa
UsuariosGooglebot
Comprueba los errores de consola y los links en Chrome 41
Descarga Chrome 41 - https://goo.gl/3tpxpH
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist SEO para CSR
1. Canonicals + metadatos no dependen de CSR
2. La página renderiza en menos ...
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist SEO para Dynamic Rendering (SSR)
1. Servimos SSR a Googlebot + bots específicos (FB, TW…)
...
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
PWA Checklist UX & WPO
Progressive Web App Checklist - https://goo.gl/jGj4D2
1. El sitio está en...
5. Experimento PWA sin prerender a Google (CSR)
Experimento PWA sin prerender (CSR)
Worona - https://www.worona.org/
Antes:
wordpress
clásico
Después: PWA
con Worona
(CSR)
Experimento PWA sin prerender (CSR)
CSR = Sin
Javascript no hay
contenido
Prueba 1: renderizado
Renderiza en
Mobile Friendly
Tool
Renderiza en Search
Console
Google renderiza e
indexa la página
Prueba 1: renderizado
Renderiza en
Mobile Friendly
Tool
Renderiza en Search
Console
Google renderiza e
indexa la página
15...
Prueba 1: renderizado
Observaciones:
● Google ha sido capaz de renderizar e indexar el contenido
● El proceso ha sido rela...
Prueba 2: rankings
Prueba 2: rankings
Prueba 2: rankings
Prueba 2: rankings
Observaciones:
● No se han perdido los rankings por tener el contenido en
una PWA sin renderizar
Prueba 3: nuevo contenido
Publicamos nuevo
post
Forzamos
indexación de la
home del blog
Prueba 3: nuevo contenido
4 días después
todavía no se ha
indexado
Prueba 3: nuevo contenido
Observaciones:
● Si no forzamos el renderizado y la indexación de ese
contenido, Google tardará ...
Prueba 4: comprobando las dos “olas” de indexación
Añadimos una
palabra inventada a
la versión no-JS
Prueba 4: comprobando las dos “olas” de indexación
Le damos a “Obtener” (sin
procesar) en SC + Solicitar
indexación
Prueba 4: comprobando las dos “olas” de indexación
A los pocos minutos…
¡Google indexa y asocia esa
palabra a la web!
Por otro lado, la caché de
Google no se ha actualizado
Prueba 4: comprobando las dos “olas” de indexación
Prueba 4: comprobando las dos “olas” de indexación
Y la página sigue apareciendo
para cadenas de texto de la
versión anter...
Observaciones:
● Antes de renderizar la página Google ha indexado el
contenido que hay sin JS (primera ola).
● Este conten...
6. Conclusiones
Conclusiones
● A día de hoy muy pocas webs han migrado
directamente a PWA sin prerender (CSR) para todos
los agentes. Los ...
SEO para PWA
GRACIAS
Natzir Turrado
analistaseo.es
hola@natzir.com
@natzir9
Christian Oliveira
christianoliveira.com
chris...
Próxima SlideShare
Cargando en…5
×

SEO para Progressive Web Apps (PWA) y JavaScript

4.532 visualizaciones

Publicado el

Descubre cómo hacer SEO para Progressive Web Apps (PWA) y frameworks y liberías JavaScript. Por Natzir Turrado y Christian Oliveira en el Congreso Web de Zaragoza. El resumen de la charla lo tenéis aquí: https://www.analistaseo.es/posicionamiento-buscadores/seo-progressive-web-apps-pwa/

Publicado en: Internet

SEO para Progressive Web Apps (PWA) y JavaScript

  1. 1. SEO para PWA Qué son y cómo optimizarlas Por Christian Oliveira & Natzir Turrado
  2. 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. 3. 1. Qué son las PWA y cómo funcionan
  4. 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. 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. 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. 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. 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. 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. 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. 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. 12. Cómo funciona una PWA {i} JSON S/MPA Service Worker
  13. 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. 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. 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. 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. 17. Cómo funciona una PWA {i} JSON Web App Manifest - https://goo.gl/SB2ur3
  18. 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. 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. 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. 21. La velocidad de PWA + AMP Carga prácticamente instantánea desde buscadores The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH
  22. 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. 23. La velocidad de PWA + AMP El usuario entra en la PWA The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH
  24. 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. 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. 26. 2. Cómo tratan JS los buscadores actualmente
  27. 27. Sólo Google y ASK renderizan JS, Baidu lo intenta Baidu Adds New Spider with Rendering Job - https://goo.gl/Jd79qW
  28. 28. Crawlear =! Renderizar =! Indexar =! Rankear 49 páginas indexadas 28páginas indexadas 17 páginas indexadas 30páginas indexadas
  29. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. 3. Soluciones de renderizado para sitios JS
  42. 42. Client Side Rendering (CSR) req res: JS JS+JSON=HTML req res: JSON
  43. 43. Server Side Rendering (SSR) JS+JSON = HTML req res: HTML
  44. 44. Hybrid Rendering Building a hybrid-rendered PWA - https://goo.gl/ZNfzr1 SSR CSR
  45. 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. 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. 47. Dynamic Rendering (DR) Googlebot Fetch & Render As Any Bot - https://goo.gl/1augcc
  48. 48. Dynamic Rendering (DR) Fetch & Render As Any Bot - https://goo.gl/1augcc UsuariosGooglebot
  49. 49. ¿Qué es lo preferible para los usuarios? SSR
  50. 50. ¿Qué es lo preferible para los usuarios? Netflix and SSR - https://goo.gl/ym6fWN
  51. 51. ¿Qué es lo preferible para los usuarios? Walmart and SSR - https://goo.gl/EwmPyD SSR CSR FCP >
  52. 52. ¿Qué es lo preferible para los usuarios? Walmart and SSR - https://goo.gl/EwmPyD SSR CSR TTFB <
  53. 53. ¿Qué es lo preferible para sistemas? The Benefits of Server Side Rendering Over Client Side Rendering - https://goo.gl/EwmPyD CSR
  54. 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. 55. ¿Qué es lo recomendado para Google? Tweet de Barry Adams - https://goo.gl/umSS1j
  56. 56. 4. Buenas prácticas para sitios JS y PWA
  57. 57. Auditoría de PWA y Perfomance https://developers.google.com/web/tools/lighthouse/ & https://sonarwhal.com
  58. 58. Mobile-Friendly Test / Screenshot Progressive Web App Checklist - https://goo.gl/jGj4D2
  59. 59. Mobile-Friendly Test / Rendered HTML Progressive Web App Checklist - https://goo.gl/jGj4D2
  60. 60. Mobile-Friendly Test / Page loading issues Mobile-Friendly Test - https://goo.gl/FjHMk5
  61. 61. Fetch and Render Fetch & Render es menos tolerante a la lentitud que el WRS de Caffeine
  62. 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. 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. 64. Fetch and Render en staging 1. Noindex a staging 2. Reverse DNS
  65. 65. Crawlea y compara staging con producción - https://www.fandangoseo.com/
  66. 66. Crawlea simulando mobile y con render JS - https://www.fandangoseo.com/
  67. 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. 68. Comprueba las metas con otros user-agent Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl/7r7rcn
  69. 69. Navega sin JS con otros user-agent Web Developer - https://goo.gl/WqjjLa
  70. 70. Navega sin JS con otros user-agent UsuariosGooglebot Web Developer - https://goo.gl/WqjjLa
  71. 71. Navega sin JS con otros user-agent Web Developer - https://goo.gl/WqjjLa UsuariosGooglebot
  72. 72. Comprueba los errores de consola y los links en Chrome 41 Descarga Chrome 41 - https://goo.gl/3tpxpH
  73. 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. 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. 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. 76. 5. Experimento PWA sin prerender a Google (CSR)
  77. 77. Experimento PWA sin prerender (CSR) Worona - https://www.worona.org/ Antes: wordpress clásico Después: PWA con Worona (CSR)
  78. 78. Experimento PWA sin prerender (CSR) CSR = Sin Javascript no hay contenido
  79. 79. Prueba 1: renderizado Renderiza en Mobile Friendly Tool Renderiza en Search Console Google renderiza e indexa la página
  80. 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. 81. Prueba 1: renderizado Observaciones: ● Google ha sido capaz de renderizar e indexar el contenido ● El proceso ha sido relativamente rápido (15’)
  82. 82. Prueba 2: rankings
  83. 83. Prueba 2: rankings
  84. 84. Prueba 2: rankings
  85. 85. Prueba 2: rankings Observaciones: ● No se han perdido los rankings por tener el contenido en una PWA sin renderizar
  86. 86. Prueba 3: nuevo contenido Publicamos nuevo post Forzamos indexación de la home del blog
  87. 87. Prueba 3: nuevo contenido 4 días después todavía no se ha indexado
  88. 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. 89. Prueba 4: comprobando las dos “olas” de indexación Añadimos una palabra inventada a la versión no-JS
  90. 90. Prueba 4: comprobando las dos “olas” de indexación Le damos a “Obtener” (sin procesar) en SC + Solicitar indexación
  91. 91. Prueba 4: comprobando las dos “olas” de indexación A los pocos minutos… ¡Google indexa y asocia esa palabra a la web!
  92. 92. Por otro lado, la caché de Google no se ha actualizado Prueba 4: comprobando las dos “olas” de indexación
  93. 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. 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. 95. 6. Conclusiones
  96. 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. 97. SEO para PWA GRACIAS Natzir Turrado analistaseo.es hola@natzir.com @natzir9 Christian Oliveira christianoliveira.com christian@usal.es @christian_wilde

×