Los dos principales motivos para utilizar el Amp Html son:
- 1. El tiempo de carga de una pagina web se reduce en un 40%. No existe ningún lenguaje de programación web con esa capacidad de reducción de tiempo de carga.
- 2. El Amp Html es un proyecto de codigo abierto (Open Source) promovido por Google. Recientemente Google ha anunciado que a final de febrero empezara a indexar paginas con AMP HTML, lo que hace suponer que esas paginas tengan mejor posicionamiento que el resto.
Descripción e instalación del AMP HTML
El unico sitio oficial donde se puede descargar el amp es en la web Github. Una vez descargado de la web, estas son las carpetas en la que estan todos los componentes y extensiones: 3p, ads, build-system, builtins, css, extensions, src, third_party, tools
El unico archivo que tenemos que subir a nuestro alojamiento o servidor es el archivo v0.js al cual podemos hacer referencia desde esta pagina https://cdn.ampproject.org/v0.js.
En la web oficial ampproject.org esta instalado el framework en un cdn y al cual se puede referenciar en tu web gratuitamente, personalmente NO lo recomiendo ya que como tu habra miles de sitios que utilizen este recurso, y las ventajas que conlleva un CDN no se vean reflejadas en los resultados.
El archivo v0.js esta compuesta de todos los js que podemos necesitar, el archivo se puede personalizar para solamente tener los elementos que utilizemos en nuestro sitio.
Estructura basica de un pagina en AMP HTML
Aqui te muestro un ejemplo muy basico para que puedas empezar a utilizarlo.
En este pequeño codigo los mas destacado es:
En la linea 2 el elemento html amp: Se utiliza para que los robots reconozcan como esta realizada la pagina.
En la linea 7 veras el codigo CSS: No se puede hacer referencias a archivos css externos al framework de Amp.
En la linea 8 la referencia al archivo v0.js que no puede faltar en ninguna pagina.
Como curiosidad te habras dado cuenta que no necesitamos el jquery
Ejemplo practicos para empezar a diseñar paginas en Amp Html
¿Como insertar un anuncio de Adsense en la pagina?
Donde aparece "Mi ad-client" y "Mi ad-slot" hay que sustituirlo por el tuyo, antes tienes que crearlo en tu panel de control de Adsense.
El tamaño del anuncio tiene que ser el indicado en el ejemplo, ten en cuenta que estas creando paginas para dispositivos moviles.
Tambien puedes utilizar estos anunciantes en el caso de que tengas una cuenta con ellos: A9, Areactor, Adtech, Doubleclick
¿Ejemplo de como insertar una imagen?
¿Como añadir una galeria o carrusel de imagenes?
El carrusel son una serie de imagenes que se pueden desplazar de forma horizontal, con unas flechas de desplazamiento para moverser adelante o atras.
¿Como cambiar de imagen automaticamente dependiendo de la resolución de la pantalla?
Un efecto muy practico para personalizar tu pagina.
Segun el ejemplo para resoluciones hasta 650px de ancho aparece la imagen 320redimetodo2.jpg y para resoluciones superiores a 650px aparece la imagen 320redimetodo1.jpg
¿Como incluir un video de youtube?
Lo mas destacado es la primera linea del ejemplo en el que tenemos que incluir el archivo amp-youtube-0.1.js
HERRAMIENTAS DE GOOGLE RELACIONADAS CON EL AMP HTML
En tu cuenta de google de Search Console tienes 2 herramientas relacionadas con el amp una esta dentro de Aspectos de la Busqueda la cual tiene una nueva opción llamada Accelerated Mobile Pages en la que aparece el numero de paginas amp-html indexadas, ademas de errores de codigo que puedas tener en esas paginas.
Un ejemplo de posibles errores puede ser: Atributo prohibido, Varias instancias de una etiqueta única, Valor de atributo no válido, Etiqueta anidada incorrectamente, Falta una etiqueta necesaria, Etiqueta prohibida, Falta un atributo necesario, Falta una propiedad obligatoria en un valor de atributo.
La segunda herramienta Herramienta de Prueba de Datos Estructurados ya existia, pero la han ampliado para detectar si existe o falta codigo erroneo en los metadatos de paginas amp.