Esta web utiliza 'cookies' propias y de terceros para ofrecerte una mejor experiencia y servicio

OK Más info

Descarga GRATIS mi ebook Cómo crear un plan de marketing digital efectivo + plantilla en Excel para llevar a cabo tu estrategia y haz crecer tu empresa en internet

¡Si, quiero descargar gratis el e-book!

Descarga gratis mi e-book Cómo crear un plan de marketing digital efectivo + plantilla en Excel para llevar a cabo tu estrategia

Francisco Rubio
Qué es, y para que sirve AMP

Qué es, y para que sirve AMP

AMP es un sistema mediante el cual la carga de información de una web se lleva a cabo en muy poco tiempo por lo cual es perfecto para dispositivos móviles, de esta forma carga la página de forma asíncrona priorizando el texto y la información relevante sobre el resto de elementos de la web.

Desarrollado bajo licencia de código abierto por Google y más socios tecnológicos. Hay más sistemas similares a AMP como por ejemplo: Facebook Instant Article, Apple News y en este último año han salido muchas más pero menos famosas como: Sovtek mig 50, CPP etc..

La diferencia entre unos sistemas u otros son la instalación, su capacidad de modificación y sus bibliotecas de funciones, de todas las dichas en el párrafo anterior la que mejor parada sale es AMP ya que su instalación es muy sencilla tanto si se hace de forma manual como si se hace a través de un plugin y además tienes una biblioteca de funciones creadas por los mismos que hicieron AMP y aparte un biblioteca pública (aunque revisada para evitar problemas de seguridad) con funciones que suele necesitar los usuarios o que echaban en falta.

Funcionamiento de AMP

AMP tiene un sencillo funcionamiento, carga el contenido de la web antes que a ella misma lo que aumenta considerablemente su carga de contenido, sin embargo su fuerte se encuentra en el posicionamiento SEO, Google que apuesta fuerte por las tecnologías móviles favorece los enlaces que usen correctamente este tipo de tecnología posicionando antes un enlace con AMP de una web con una autoridad SEO media que a una web con una gran autoridad SEO sin esta tecnología.

Cómo realizar la instalación

Cabe destacar que hay 2 formas de instalar AMP diferenciando en que plataforma se va a instalar:

Si va a ser un WordPress o algún CRM la instalación se realizará mediante la instalación de un plugin AMP, el cual viene con la configuración básica.

NOTA: Al instalar un módulo hay que revisar que no halla ningún otro módulo inyectando código.

Web programada: si bien esta es la más lenta, es la que menos problemas de actualizaciones nos va a dar, debido a que la instalación solo necesita de algunos scripts proporcionados en la web de AMP, el código servidor no influye en forma alguna a su comportamiento por lo que podremos hacer la web como queramos siempre que usemos las etiquetas proporcionadas por AMP.

Requisitos

Es totalmente necesario tener configurado un HTTPS en la web que abarque a todo el dominio ya que si carga imágenes que venga desde una fuente no segura (SIN HTTPS) AMP lanzará errores, también saber que no se puede usar ni estilos en linea ni linkarlos ni se puede usar javascript, la funcionalidad queda restringida a las funciones dadas por AMP o a las realizadas por los usuarios de AMP.

¿Qué efectos tiene sobre la web?

El primer y más importante es la velocidad de carga de sus artículos los cuales cargan a una velocidad muchísimo más alta que una web normal, sobre todo se nota en móviles aunque también se aprecian mejoras en ordenador.

El segundo efecto a destacar es la posición privilegiada que brinda Google a los artículos AMP en sus búsquedas desde móvil.

¿Qué restricciones tiene?

Script: No se puede usar ni JavaScript ni ningún otro semejante como     jQuery o AJAX, la funcionalidad queda restringida a las funciones   proporcionadas por AMP.

CSS: AMP carga una etiqueta style para su aspecto básico el cual    podemos modificar con otra etiqueta style (añadiendo amp-custom), hay       algunas restricciones de css las cuales cambian mucho aunque cada vez         hay menos restricciones, de momento se reducen a: (Actualizado     09/10/2017) !important, @import, filter, behavior, -moz-binding

HTML: no nos vale cualquier tipo de etiqueta para poder crear la web      AMP hay diferencias con respecto a una web normal, empezando por la         propia etiqueta de html la cual tiene que llevar un atributo para indicar       que esta se trata de una web AMP, se suele representar con un rayo o       simplemente se puede escribir <html amp>.

HTTPS: AMP requiere que no solo el articulos estén en https si no que      tanto las imágenes como los iframes como todo lo que se carge en el    artículo debe ser cargado de forma segura, de no ser así Google no nos        verificaría nuestra web como AMP y no tendríamos la ventaja del    posicionamiento.

¿Qué podemos modificar?

En cuanto a la funcionalidad podemos cambiar un poco su forma de actuar o los elementos a cargar buscando en las funciones creadas por usuarios de AMP la mayoría pueden ser encontrados aquí: https://github.com/ampproject/amphtml/tree/master/tools/experiments

Si queremos activar google analytics necesitamos implementarlo como indican en la siguiente página:

https://www.ampproject.org/docs/reference/components/amp-analytics

Con respecto al estilo podemos hacer uso de la etiqueta <stlye amp-custom> el cual nos permite introducir css teniendo en cuenta las restricciones anteriormente comentadas.

Modificación en WordPress

Tenemos que buscar en la carpeta de plugins dentro de wp-content la carpteta amp, la cual dentro tiene una carpeta llamada templates.

Un vez dentro veremos el header, el footer la cabecera y todo separado en diferentes archivos, mi consejo es que las modificaciones que se hagan se hagan a través de funciones fuera de este módulo para que en caso de actualización la perdida sea mínima.

¿Con qué no es compatible?

En las webs programadas a mano las incompatibilidades se suelen dar en los estilos usados, javascript, etc pero se soluciona fácilmente sustituyendo etiquetas, el problema viene con sistemas como WordPress o similares los cuales suelen usar módulos que incluyendo código que podría impedirnos las verificación de nuestra página AMP.

Estos son algúnos módulos que sabemos que dan fallo:

  • Page builder & Shortcodes
  • NextGen Gallery
  • Thrive themes visual editor
  • Fuzzy seo boost
  • Infinite Scroll

Pero en general cualquier módulo que embeba código en la web o en sus artículos son susceptibles a crear incompatibilidad con AMP, en el caso de NextGen Gallery el módulo propagaba un script por toda la web incluyendo los AMP lo cual generaba una incidencia en Google Search Console.

Y en el caso de Shortcode simplemente no usa las etiquetas adecuadas para AMP por lo que el código que genera da fallo aunque se visualice bien.

Soluciones manuales a ciertas incompatibilidades

Desde los hooks de wordpress podemos desactivar algunas funciones de determinados módulos sobre los enlaces AMP de esta forma aunque no podamos usar los módulos incompatibles con nuestro AMP si que podremos usarlo en el resto de la web, así lo hice yo con un módulo que daba problemas:

add_filter( ‘run_ngg_resource_manager’, ‘filter_run_ngg_resource_manager’, 10, 1 );

La idea es filtrar los módulos cuando estos se vallan a carga en la web de AMP aunque no siempre nos servirá este truco si es cierto que arregla muchos errores, además siempre podemos buscar actualización de AMP ya que en su misma web avisan sobre la corrección de algunos errores e incompatibilidades.

 

A continuación te dejo unos ejemplos de web en su versión normal y AMP  para que notes la diferencia:

Versión Normal                                                                   Versión AMP

https://www.marketingonlinemalaga.es/                        https://www.marketingonlinemalaga.es/amp

https://www.marketingdigitalmalaga.es/                        https://www.marketingdigitalmalaga.es/amp

https://www.marketingdigitalcordoba.es/                      https://www.marketingdigitalcordoba.es/amp

 

 
Francisco Rubio
Sobre el Autor

Francisco Rubio

CEO de ExpacioWeb Digital Marketing. Emprendedor y empresario. Debilidad por el marketing online y el social media.

Deja un comentario