SEO para Progressive Web Apps (PWA) y JavaScript

Natzir Turrado
Natzir TurradoConsultor SEO Técnico en Freelance
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 para sitios JS
4. Buenas prácticas para sitios JS y PWA
5. Experimento PWA sin prerender a Google (CSR)
6. Conclusiones
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
dispositivos
Inversión en otro canal
Suelen tardar más en
desarrollarse
Native And PWA: Choices, Not Challengers! - https://goo.gl/fq6X2E
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
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
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
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
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
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
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
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) - https://youtu.be/X6yof_vIQnk
Cache
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
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
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
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 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✔ ✔
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
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
La velocidad de PWA + AMP
Carga prácticamente
instantánea desde buscadores
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH
La velocidad de PWA + AMP
Service Worker carga en 2º plano
<amp-install-serviceworker>
The Definitive Guide to Ecommerce Performance - https://goo.gl/YVUngH
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 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:
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
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 indexadas
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
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
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
’
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
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 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
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
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
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
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>
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
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.
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-powered websites (Google I/O '18) - https://youtu.be/PFwUbgvpdaQ
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
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/EwmPyD
CSR
¿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
¿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-render
Añade esta meta al
código original
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
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/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)
Comprueba las metas con otros user-agent
Meta SEO inspector + User-Agent Switcher - https://goo.gl/tNo3ug & https://goo.gl/7r7rcn
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 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
☑
☑
☑
☑
☑
☑
☑
☑
☑
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
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
☑
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
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’ después de
“solicitar
indexación” en SC
Prueba 1: renderizado
Observaciones:
● Google ha sido capaz de renderizar e indexar el contenido
● El proceso ha sido relativamente rápido (15’)
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á en indexar el nuevo contenido.
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 anterior
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
6. Conclusiones
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.
SEO para PWA
GRACIAS
Natzir Turrado
analistaseo.es
hola@natzir.com
@natzir9
Christian Oliveira
christianoliveira.com
christian@usal.es
@christian_wilde
1 de 97

Más contenido relacionado

La actualidad más candente(20)

Analítica Web SEO: De la Analítica Web Pasiva a la ActivaAnalítica Web SEO: De la Analítica Web Pasiva a la Activa
Analítica Web SEO: De la Analítica Web Pasiva a la Activa
Javier Gosende Consultor SEO3.1K vistas
Expediente Xpath  #SEOnderground 2021Expediente Xpath  #SEOnderground 2021
Expediente Xpath #SEOnderground 2021
MJ Cachón Yáñez1.9K vistas
SEO y CRO: We will CRO YouSEO y CRO: We will CRO You
SEO y CRO: We will CRO You
Sergio Simarro2.7K vistas
Señales SEO #DSMValenciaSeñales SEO #DSMValencia
Señales SEO #DSMValencia
MJ Cachón Yáñez1.1K vistas
Link building post penguinLink building post penguin
Link building post penguin
Adrenalina11.7K vistas
Sigue indexando  #seoplus19Sigue indexando  #seoplus19
Sigue indexando #seoplus19
MJ Cachón Yáñez4.6K vistas
Sigue indexando #seoplus2019Sigue indexando #seoplus2019
Sigue indexando #seoplus2019
MJ Cachón Yáñez1.6K vistas

Similar a SEO para Progressive Web Apps (PWA) y JavaScript(20)

Google, ¿Dónde está mi ecommerce?Google, ¿Dónde está mi ecommerce?
Google, ¿Dónde está mi ecommerce?
Lola Gallent11 vistas
Rich Snippets - Congreso Web 2012Rich Snippets - Congreso Web 2012
Rich Snippets - Congreso Web 2012
Pedro Martínez3.3K vistas
JavaScript y el SEo Mitos y realidadesJavaScript y el SEo Mitos y realidades
JavaScript y el SEo Mitos y realidades
Digital Growth827 vistas
Guia de SEO LOCALGuia de SEO LOCAL
Guia de SEO LOCAL
Oscar García1.6K vistas
Seo Avanzado para Ecommerce. Arquitectura de información, crawleo y migracion...Seo Avanzado para Ecommerce. Arquitectura de información, crawleo y migracion...
Seo Avanzado para Ecommerce. Arquitectura de información, crawleo y migracion...
Daniel Pinillos Carrasco - SEO, CRO Madrid263 vistas
Guate SeoGuate Seo
Guate Seo
Moises Cielak217 vistas
Optimización de crawleo - SEO #SEOPlus 2017Optimización de crawleo - SEO #SEOPlus 2017
Optimización de crawleo - SEO #SEOPlus 2017
Antonio Parra Gómez4.7K vistas
Taller de Analítica Web - Congreso CID-MurciaTaller de Analítica Web - Congreso CID-Murcia
Taller de Analítica Web - Congreso CID-Murcia
ElBlogdelSEO y SEOStar152 vistas
OMEXPO 2017 - Rendimiento y optimizaciónOMEXPO 2017 - Rendimiento y optimización
OMEXPO 2017 - Rendimiento y optimización
Fernando Puente111 vistas

Último

Manual Slideshare.pdfManual Slideshare.pdf
Manual Slideshare.pdfmilinco50
16 vistas10 diapositivas
catalogo_final_web.pdfcatalogo_final_web.pdf
catalogo_final_web.pdfFabianGarcia829609
22 vistas47 diapositivas
El internet de las cosas.pptxEl internet de las cosas.pptx
El internet de las cosas.pptxcanek4
5 vistas15 diapositivas

Último(20)

Manual Slideshare.pdfManual Slideshare.pdf
Manual Slideshare.pdf
milinco5016 vistas
catalogo_final_web.pdfcatalogo_final_web.pdf
catalogo_final_web.pdf
FabianGarcia82960922 vistas
plataforma-virtual-udemy.pptxplataforma-virtual-udemy.pptx
plataforma-virtual-udemy.pptx
JoyceLissette5 vistas
Herramientas de reputación onlineHerramientas de reputación online
Herramientas de reputación online
mdelgadolosa8 vistas
Redes Sociales.pdfRedes Sociales.pdf
Redes Sociales.pdf
nikita3143226 vistas
Screenshot (12) (1).pdfScreenshot (12) (1).pdf
Screenshot (12) (1).pdf
dedataarchitect5 vistas
SISTEMA DE GESTION DOCUMENTAL.pptxSISTEMA DE GESTION DOCUMENTAL.pptx
SISTEMA DE GESTION DOCUMENTAL.pptx
MarianaDelRocioAlvan6 vistas
web.pdfweb.pdf
web.pdf
milinco507 vistas
Manual Slideshare.pdfManual Slideshare.pdf
Manual Slideshare.pdf
Cristianqueromartin9 vistas
El Mal Uso Del Internet.pptxEl Mal Uso Del Internet.pptx
El Mal Uso Del Internet.pptx
jeshuahernandezbuelv9 vistas
EXPRESIONES ALGEBRAICAS.pptxEXPRESIONES ALGEBRAICAS.pptx
EXPRESIONES ALGEBRAICAS.pptx
durannakay710 vistas
CICLO DE VIDA DE UN DOCUMENTO.docxCICLO DE VIDA DE UN DOCUMENTO.docx
CICLO DE VIDA DE UN DOCUMENTO.docx
MarianaDelRocioAlvan5 vistas
Transformacion digital_Nov23_v2.pdfTransformacion digital_Nov23_v2.pdf
Transformacion digital_Nov23_v2.pdf
Christian Palau13 vistas
MakecodeMakecode
Makecode
LauraSofiaCardonaSol6 vistas
Slideshare.pdfSlideshare.pdf
Slideshare.pdf
José Manuel Chota Arévalo 7 vistas

SEO para Progressive Web Apps (PWA) y JavaScript

  • 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’)
  • 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
  • 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