Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Indexabilidad de PWA - Fernando Maciá y Ramón Saquete - Tendencias SEO 2018

160 views

Published on

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.

Published in: Internet
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download Full EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download Full doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download PDF EBOOK here { https://soo.gd/irt2 } ......................................................................................................................... Download EPUB Ebook here { https://soo.gd/irt2 } ......................................................................................................................... Download doc Ebook here { https://soo.gd/irt2 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book THIS can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer THIS is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story THIS Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money THIS the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths THIS Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Indexabilidad de PWA - Fernando Maciá y Ramón Saquete - Tendencias SEO 2018

  1. 1. SEO en 2018 Indexabilidad de PWA Ramón Saquete/Fernando Maciá Human Level Communications
  2. 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. 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. 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. 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. 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. 7. HTML Living Standard en WhatWG.org @fernandomacia
  8. 8. ¿Qué es una PWA? Steve Jobs animando a desarrollar PWAs en 2007: @fernandomacia https://youtu.be/ZlE7dzoD6GA?t=1m
  9. 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. 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. 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. 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. 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. 14. Creación del archivo manifest.json @fernandomacia
  15. 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. 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. 17. Añadir como app: sólo Android/ChromeOS @fernandomacia
  18. 18. Características que debe tener una PWA Buenas prácticas @fernandomacia
  19. 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. 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. 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. 22. Características que debe tener una PWA Descubribles: al contrario que las apps nativas se pueden indexar y enlazar (vinculable). @fernandomacia
  23. 23. https://preview.pwabuilder.com @fernandomacia
  24. 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. 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. 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. 27. Podemos comprobar funcionalidades con caniuse.com @fernandomacia
  28. 28. Comprobamos funcionalidades disponibles en WhatWebCanDo.Today (Chrome) @fernandomacia
  29. 29. Comprobamos funcionalidades disponibles en WhatWebCanDo.Today (Safari) @fernandomacia
  30. 30. Comprobamos funcionalidades disponibles en WhatWebCanDo.Today (Firefox) @fernandomacia
  31. 31. Comprobamos funcionalidades disponibles en WhatWebCanDo.Today (Opera) @fernandomacia
  32. 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. 33. ¿Cómo afectan al SEO? Las webs tienen más visitas que las aplicaciones @fernandomacia Fuente: comScore Mobile Metrix, Junio 2016
  34. 34. ¿Cómo afectan al SEO? Pero los usuarios pasan más tiempo en las aplicaciones @fernandomacia Fuente: comScore Mobile Metrix, Junio 2016
  35. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 45. Comprobar la indexabilidad @fernandomacia
  46. 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. 47. Comprobar la indexabilidad @fernandomacia
  48. 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. 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. 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. 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. 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. 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. 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. 55. Indexabilidad en frameworks SPA Solución: JavaScript universal o isomórfico @fernandomacia
  56. 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. 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. 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. 59. PWA y WordPress: recursos interesantes @fernandomacia
  60. 60. !61 ¿Preguntas?

×