OndaCero
OndaCero
EPISODIO 65: UNA CITA CON EL CLUB DE ALTO RENDIMIENTO EMPRESARIAL DE CÓRDOBA
Tiempo de Lectura: 5 minutos
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.
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.
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.
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.
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.
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.
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.
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.
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:
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.
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
Sobre el Autor
Francisco Rubio
CEO de ExpacioWeb, Director Ejecutivo de Pull Comunicación y Director de Proyectos en Marketing Surfers. Apasionado de los viajes y la fotografía, y amante del deporte diario.
También te pueden interesar
El brainstorming es una técnica de grupo que tiene como objetivo la creación de ideas originales en un ambiente relajado. El brainstorming, conocido también como lluvia de ideas o de tormenta de ideas, fue creado en 1939 por Alex Faickney Osborn y...
Si al igual que a mí, a ti también te apasiona el mundo del marketing digital, pon atención a esto que te cuento. Podrás formarte gratis en esta materia de la mano del gigante tecnológico: Google. Sí, sí, como lees; GRATIS. Desde hace unos...
Deja un comentario
Temas que trato en este blog
