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.

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. Formador: Joseba Ruiz, @RuizMKT
SEO, analista Web&App y desarrollador GTM
Curso AMP en
profundidad

3. EPISODIO 1
¿Qué es AMP?
AMP

4. EPISODIO 1
El componente AMP HTML es básicamente contenido HTML ampliado
con propiedades AMP personalizadas.
¿Qué es AMP?
AMP

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. 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. EPISODIO 1
¿Qué es AMP?
AMP

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. 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. EPISODIO 2
• Plantilla HTML
• Componentes
• Estilos
• Validación
Desarrollo y Diseño
AMP

11. EPISODIO 2
1. Plantilla HTML
Desarrollo y Diseño
AMP

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. EPISODIO 2
2. Agregando componentes
Desarrollo y Diseño
AMP

14. EPISODIO 2
Anuncios y
Analíticas
Desarrollo y Diseño
AMP

15. EPISODIO 2
Contenido dinámico
Desarrollo y Diseño
AMP

16. EPISODIO 2
Diseño
Desarrollo y Diseño
AMP

17. EPISODIO 2
Contenido
Multimedia
Desarrollo y Diseño
AMP

18. EPISODIO 2
Presentación
Desarrollo y Diseño
AMP

19. EPISODIO 2
Redes Sociales
Desarrollo y Diseño
AMP

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. EPISODIO 2
4. Validación AMP https://validator.ampproject.org
addon Amplifier AMP/
Canonical switcher
Desarrollo y Diseño
AMP

22. EPISODIO 3
• Que sí se permite y que no
• Carousel
• Fallback
• CORS
Especificaciones
AMP

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. EPISODIO 3
Carousel
¿Sólo debo añadir esto?
Debemos esperar un poco …
Especificaciones
AMP

25. EPISODIO 3
fallback
Cuando no se puede ejecutar o cargar un objeto,
puede existir una alternativa
Especificaciones
AMP

26. EPISODIO 3
CORS
Las peticiones
Cross-Origin
Resource Sharing
permiten que se
transmita
información entre
dominios
diferentes.
Especificaciones
AMP

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. 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. 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. 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. 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. 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. EPISODIO 5
• Enlazar HTML regular y AMP
• Microdatos
• Cachés AMP
Procesamiento
AMP

34. EPISODIO 5
Enlazar páginas entre sí
¿Y si sólo tengo una página AMP?
Procesamiento
AMP

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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. EPISODIO 6
Si te has perdido, tienes todo el código perfectamente recopilado en este link.
Ejemplo por pasos
AMP

48. EPISODIO 7
• Sitemap web
• Estructuración de páginas
La estructura
AMP

49. EPISODIO 7
La estructura
AMP

50. EPISODIO 7
La estructura
AMP

51. EPISODIO 8
• Google Tag Manager
• Google Analytics
Analítica
AMP

52. EPISODIO 8
Analítica
AMP

53. EPISODIO 8
Analítica
AMP

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. 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. EPISODIO 9
Preguntas
AMP
¿?