Successfully reported this slideshow.
Your SlideShare is downloading. ×

AMP en profundidad

Ad

EPISODIO 1
• Librería open-source
• Soportado por numerosas
plataformas
• Consta de 3 componentes
• Carga de página inmedi...

Ad

Formador: Joseba Ruiz, @RuizMKT
SEO, analista Web&App y desarrollador GTM
Curso AMP en
profundidad

Ad

EPISODIO 1
¿Qué es AMP?
AMP

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Upcoming SlideShare
Nuevas estrategias SEO
Nuevas estrategias SEO
Loading in …3
×

Check these out next

1 of 56 Ad
1 of 56 Ad

AMP en profundidad

Download to read offline

Curso AMP (Accelerated Mobile Pages) avanzado donde se tratan temas como: desarrollo y diseño, especificaciones, limitaciones, integraciones de terceros, ejemplos prácticos, estructura, analítica, etc.

Curso AMP (Accelerated Mobile Pages) avanzado donde se tratan temas como: desarrollo y diseño, especificaciones, limitaciones, integraciones de terceros, ejemplos prácticos, estructura, analítica, etc.

Advertisement
Advertisement

More Related Content

Advertisement

AMP en profundidad

  1. 1. EPISODIO 1 • Librería open-source • Soportado por numerosas plataformas • Consta de 3 componentes • Carga de página inmediata ¿Qué es AMP? AMP
  2. 2. Formador: Joseba Ruiz, @RuizMKT SEO, analista Web&App y desarrollador GTM Curso AMP en profundidad
  3. 3. EPISODIO 1 ¿Qué es AMP? AMP
  4. 4. EPISODIO 1 El componente AMP HTML es básicamente contenido HTML ampliado con propiedades AMP personalizadas. ¿Qué es AMP? AMP
  5. 5. EPISODIO 1 La biblioteca AMP JS implementa todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y proporciona las etiquetas personalizadas HTML para garantizar la representación rápida de una página. ¿Qué es AMP? AMP
  6. 6. EPISODIO 1 El Google AMP Cache es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos. Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. • Sistema de validación • Archivos con mismo origen HTTP 2.0 ¿Qué es AMP? AMP
  7. 7. EPISODIO 1 ¿Qué es AMP? AMP
  8. 8. EPISODIO 1 • Únicamente scripts asíncronos: Para evitar que JavaScript demore la representación de páginas, AMP solo permite JavaScript asíncrono. • Recursos ordenados estáticamente: AMP debe determinar el tamaño y la posición de cada elemento antes de que se descarguen los recursos. • Anti-bloqueos en la representación: Todas las páginas en las que se use un script debe ser notificado al sistema AMP (e.g. amp-iframe). • JS de 3ros lejos de la ruta de acceso crítica: Sólo permitido en iframes. • CSS alineados y con tamaño limitado: Por debajo de 50kB. • Activación eficaz de fuentes: El sistema de AMP declara cero solicitudes HTTP hasta que las fuentes comienzan a descargarse ¿Qué es AMP? AMP ¡Qué la fuerza te acompañe!
  9. 9. EPISODIO 1 • Minimización de recálculos: En páginas AMP, todas las lecturas del DOM tienen lugar antes que las escrituras. • Animaciones sólo con aceleración GPU: Sólo se permite realizar animaciones y transiciones en transformación y opacidad. • Priorización de la carga de recursos: Se descargan 1ro los recursos más relevantes. Imágenes o anuncios sólo se descargan si es probable que el usuario los vea. También se realizan capturas previas (carga diferida). • Las páginas se cargan al instante: La nueva API de preconexión se usa para garantizar que las solicitudes HTTP sean instantáneas. Una página se puede estar disponible antes siquiera de que el usuario la haya solicitado. ¿Qué es AMP? AMP ¡Qué la fuerza te acompañe!
  10. 10. EPISODIO 2 • Plantilla HTML • Componentes • Estilos • Validación Desarrollo y Diseño AMP
  11. 11. EPISODIO 2 1. Plantilla HTML Desarrollo y Diseño AMP
  12. 12. EPISODIO 2 ¿Qué es Boilerplate? Sirve para ocultar de primeras el contenido hasta que se carga AMP JavaScript. En caso de quererse incluir CSS adicional hay que usar el tag <style amp-custom>. <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes - amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@- o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz- animation:none;-ms-animation:none;animation:none}</style></noscript> Desarrollo y Diseño AMP
  13. 13. EPISODIO 2 2. Agregando componentes Desarrollo y Diseño AMP
  14. 14. EPISODIO 2 Anuncios y Analíticas Desarrollo y Diseño AMP
  15. 15. EPISODIO 2 Contenido dinámico Desarrollo y Diseño AMP
  16. 16. EPISODIO 2 Diseño Desarrollo y Diseño AMP
  17. 17. EPISODIO 2 Contenido Multimedia Desarrollo y Diseño AMP
  18. 18. EPISODIO 2 Presentación Desarrollo y Diseño AMP
  19. 19. EPISODIO 2 Redes Sociales Desarrollo y Diseño AMP
  20. 20. EPISODIO 2 3. Estilo de los elementos Tan fácil como añadir CSS a una hoja de estilo <style amp-custom> en el head Desarrollo y Diseño AMP
  21. 21. EPISODIO 2 4. Validación AMP https://validator.ampproject.org addon Amplifier AMP/ Canonical switcher Desarrollo y Diseño AMP
  22. 22. EPISODIO 3 • Que sí se permite y que no • Carousel • Fallback • CORS Especificaciones AMP
  23. 23. EPISODIO 3 Especificaciones AMP • No se permiten comentarios • Se permiten las clases especiales amp-mode-touch, -mouse y keyboard-active • @import e !important no están permitidos • Y mucho mas …
  24. 24. EPISODIO 3 Carousel ¿Sólo debo añadir esto? Debemos esperar un poco … Especificaciones AMP
  25. 25. EPISODIO 3 fallback Cuando no se puede ejecutar o cargar un objeto, puede existir una alternativa Especificaciones AMP
  26. 26. EPISODIO 3 CORS Las peticiones Cross-Origin Resource Sharing permiten que se transmita información entre dominios diferentes. Especificaciones AMP
  27. 27. EPISODIO 4 • Añadir un Tuit • Foto de Instagram • Entrada de Facebook • Vídeo de Youtube • Inserción de anuncios Añadir a terceros AMP
  28. 28. EPISODIO 4 Insertar un tuit <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp- twitter-0.1.js"></script> Añadir a terceros AMP
  29. 29. EPISODIO 4 Insertar una foto de Instagram <script async custom-element="amp-instagram" src="https://cdn.ampproject.org/v0/amp-instagram- 0.1.js"></script> Añadir a terceros AMP
  30. 30. EPISODIO 4 Insertar entrada de Facebook <script async custom-element="amp-facebook" src="https://cdn.ampproject.org/v0/amp- facebook-0.1.js"></script> Añadir a terceros AMP
  31. 31. EPISODIO 4 Insertar un vídeo de Youtube <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp- youtube-0.1.js"></script> Añadir a terceros AMP
  32. 32. EPISODIO 4 Mostrar un anuncio • Únicamente son compatibles los anuncios que se publiquen a través de HTTPS • No se puede ejecutar ningún JavaScript proporcionado por una red publicitaria • Placeholderobjeto mostrado en caso de no haber anuncio que cargar Añadir a terceros AMP
  33. 33. EPISODIO 5 • Enlazar HTML regular y AMP • Microdatos • Cachés AMP Procesamiento AMP
  34. 34. EPISODIO 5 Enlazar páginas entre sí ¿Y si sólo tengo una página AMP? Procesamiento AMP
  35. 35. EPISODIO 5 Microdatos Contexto semántico que no sólo ayuda a entender cada uno de los objetos representados en una página, sino que además, en algunos casos ayuda a enriquecer la información mostrada en los resultados de búsqueda de los motores (SERPs). Procesamiento AMP
  36. 36. EPISODIO 5 Microdatos El caso excepcional del Carousel. Sólo aquellas páginas con datos estructurados y con la etiqueta previamente comentada podrán ser mostradas en SERPs al estilo Carousel. Procesamiento AMP
  37. 37. EPISODIO 5 Almacenar páginas en caché • AMP Cache se basa en una red de entrega de contenido (CDN) que sólo sirve páginas AMP válidas • Actualmente existen 2 proveedores: Google y Cloudflare. Procesamiento AMP
  38. 38. EPISODIO 5 Almacenar páginas en caché … pero … ¿Cómo funciona realmente? 1. Las plataformas descubren su contenido de AMP a través de la etiqueta <html ⚡>o <html amp> y almacenan en caché el contenido. 2. Cuando la plataforma accede a la página, la página se almacena en caché automáticamente. • Cloudflare: https://amp.cloudflare.com/c/foo.com/amp_document.html • Google: https://foo-com.cdn.ampproject.org/c/s/foo.com/amp_document.html También se puede sugerir actualizar el contenido de esta manera. Procesamiento AMP
  39. 39. EPISODIO 6 • Creación de una página AMP básica corrigiendo uno a uno los errores y directrices previamente descritas. Ejemplo por pasos AMP
  40. 40. EPISODIO 6 1. Agregar el addon Aplicación Google Chrome "Servidor Web para Chrome" 2. Descargarse el fichero https://github.com/googlecodelabs/accelerated-mobile- pages-foundations/archive/master.zip (versión acortada https://bit.ly/2IvGjOI) 3. Añadir a article.html <script async src="https://cdn.ampproject.org/v0.js"></script> justo antes de </head> 4. Comprobar en la página article.html … DevTools > Console y seguido añadir #development=1 a la url y volver a actualizar + comprobar. 5. Añadir <meta charset="utf-8" /> justo después del <head> 6. Añadir justo debajo de lo anterior <link rel="canonical" href="/article.html"> Ejemplo por pasos AMP
  41. 41. EPISODIO 6 7. Modificar la etiqueta principal <html por <html ⚡ lang="es"> 8. Añadir <meta name="viewport" content="width=device- width,minimum-scale=1,initial-scale=1"> dentro del <head> 9. Añadir en el <head> el tag <link href="base.css" rel="stylesheet" /> ¿Qué ha ocurrido al validar el código? Ejemplo por pasos AMP
  42. 42. EPISODIO 6 10. Quitarlo de nuevo y añadir <style amp-custom></style> en el <head> con todos los estilos del fichero base.css. 11. Quitar la referencia <script src="base.js"></script>. Las únicas excepciones para los scripts generados por el usuario son cuando el atributo de tipo es application/ld+json o application/json. Ejemplo por pasos AMP
  43. 43. EPISODIO 6 12. Añadir el código Boilerplate al final del <head>. <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:- amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp- start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit- animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript> Ejemplo por pasos AMP
  44. 44. EPISODIO 6 13. Reemplazar <img> por <amp-img src="mountains.jpg"></amp-img> ¿Por qué se produjo otro error en amp-img? Porque amp-img no es un sustituto directo de la tradicional etiqueta HTML img. Hay requisitos adicionales cuando se usa amp-img. El error de diseño nos dice que amp- img no es compatible con el tipo de diseño del container Ejemplo por pasos AMP
  45. 45. EPISODIO 6 14. Volver a modificar la misma etiqueta añadiendo los siguientes atributos <amp-img src="mountains.jpg" width="266" height="150"></amp-img>. Pero ahora la imagen no se reescala como debería. Ejemplo por pasos AMP
  46. 46. EPISODIO 6 15. Añadir el atributo layout … <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img> Ejemplo por pasos AMP
  47. 47. EPISODIO 6 Si te has perdido, tienes todo el código perfectamente recopilado en este link. Ejemplo por pasos AMP
  48. 48. EPISODIO 7 • Sitemap web • Estructuración de páginas La estructura AMP
  49. 49. EPISODIO 7 La estructura AMP
  50. 50. EPISODIO 7 La estructura AMP
  51. 51. EPISODIO 8 • Google Tag Manager • Google Analytics Analítica AMP
  52. 52. EPISODIO 8 Analítica AMP
  53. 53. EPISODIO 8 Analítica AMP
  54. 54. EPISODIO 8 1. Veámoslo en vivo yendo a Google Tag Manager. 2. Añadir el código de la página previa. 3. Crear una propiedad de GA. 4. Comenzar a implementar en GTM. Analítica AMP
  55. 55. EPISODIO 8 Debido a varias restricciones técnicas, el tráfico de AMP utiliza IDs de cliente distintos de los que se emplea para el tráfico web. Además, las páginas de AMP se cargan más rápidamente y muestran patrones de tráfico diferentes. Por lo tanto, deberías usar una propiedad distinta para medir el tráfico de AMP. Si utilizas una única propiedad para medir el tráfico de AMP y el que no es de AMP, usa la dimensión fuente de datos o una dimensión personalizada para diferenciarlos. Si utilizas esta dimensión, no necesitas código adicional. De forma predeterminada, Google Analytics envía el valor "AMP" en la dimensión de fuente de datos, que es el valor que puedes usar para segmentar/filtrar o bien analizar el contenido de AMP y compararlo con el contenido que no es de AMP en una misma vista. Más información en este link Analítica AMP
  56. 56. EPISODIO 9 Preguntas AMP ¿?

×