Cuando Google lanzó su última actualización de algoritmo, le dio prioridad absoluta al diseño responsive con la iniciativa “mobile first”. ¿Qué quiere decir esto? Que aquellas páginas que no tengan un buen rendimiento en dispositivos móviles, van a perder puestos en posicionamiento. ¡Así que, habrá que hacer algo!
Tras una búsqueda intensiva aparece la herramienta AMP como una solución rápida para hacer de mi página web, una página menos pesada para móviles. Pero qué es AMP.
AMP (Accelerated Mobile Pages Project) es una herramienta de Google. Esta te permite crear sitios web y anuncios rápidos, con alto rendimiento en dispositivos móviles. Supongo que os empezaréis a imaginar el por qué de la creación de este artículo.
Son muchos los beneficios que tiene la implantación de esta herramienta. Pero hay que destacar uno, y tiene que ver con el posicionamiento en Google. Pero no todo lo que reluce es oro, también tiene sus inconvenientes. Y precisamente por esto hemos visto conveniente la creación de este artículo. Vamos a intentar solucionar las dudas que puedas tener. Esto es importante, sobre todo a la hora de decidir si implantar esta herramienta o no. ¡Comenzamos explicándote qué es AMP !
¿Qué es y para qué sirve AMP Project?
El móvil va cogiendo cada vez más importancia, junto con el contenido. Las visitas desde móviles ocupan, seguramente para muchas empresas, más del 50%. Y esto hace que tengamos que estar constantemente verificando el tiempo de carga de las páginas en estos dispositivos.
Google lanzó AMP para permitir una óptima visualización de las páginas web en dispositivos móviles. Pero, ¿ qué es AMP ? Esta es una iniciativa de código abierto, lo que quiere decir que, además de poder utilizarla cualquier usuario, también les permite a estos que la mejoren.
Las principales funciones que tiene esta herramienta es la optimización en tiempos de carga de las páginas. Da prioridad a imágenes y texto, evitando cargar elementos “innecesarios” como Javascript o CSS.
Quizás esto, no te resulte muy llamativo pero, ¿y si te digo, que la utilización de esta aplicación tiene beneficios a la hora de posicionar y clasificar tus páginas en los resultados de búsqueda? Entonces se vuelve una herramienta muy atractiva, sobre todo para los profesionales SEO.
¿Puedo implementar AMP en mi web?
Una vez que ya te ha llamado la atención esta herramienta y sabes qué es AMP, seguro que te preguntarás si puedes implementarla en tu web.
Como respuesta rápida, podríamos decirte que cualquier página web puede implementar esta herramienta. Pero ojo, esto es lo que dice Google, nosotros vamos a ser un poco más analíticos.
Así que, como respuesta más compleja, te decimos que depende. Esta decisión va a depender de tu página web. Si recordamos, anteriormente hemos dicho que la implantación de AMP elimina la carga de elementos “innecesarios” de Javascript y CSS, ¿qué quiere decir esto? Que no se te van a cargar elementos de diseño, formularios, animaciones, etc. Todo el trabajo que hayas realizado en el diseño se te puede quedar atrás en los dispositivos móviles. Recuerda que esto es una herramienta que aligera el tiempo de carga de tus páginas en móviles.
Por esto, no siempre es recomendable la utilización de esta, o al menos, no en todas tus páginas.
Si estamos hablando de páginas tipo blog, donde la importancia de la web se centra en el texto e imágenes dentro del mismo, no habría problemas. Pero si hablamos de páginas complejas en los que necesites conversiones en formularios o alguna otra forma de interacción con tus usuarios de una forma específica, quizás no te merezca la pena implementarla.
El resultado que puedes obtener con esta herramientas es una carga inferior a un segundo en comparación a la versión sin el accelerated mobile pages. La mejora respecto a la velocidad de carga para el usuario es considerable.
Y si me decido a implementar Accelerated Mobile Pages, ¿cómo lo hago?
Principalmente tienes que tener en cuenta que existen dos formas de hacer que tu página web sea compatible con AMP Project.
La primera es modificar el HTML de tu página para que sea compatible. Esta, automáticamente la vamos a descartar, a no ser que tengas los medios y el tiempo suficiente para llevarlo a cabo.
Esto nos deja con la segunda opción. Crear versiones alternativas en formato AMP. Esta alternativa hace que tus urls cambien para móvil. La facilidad de esta opción, es que desde la página de AMP Project tenemos la plantilla HTML. Este método es el que vamos a explicar y por regla general, el que se suele utilizar.
Esta plantilla es muy básica y lo único que introduce son los marcados obligatorios. Pero vamos a repasar también algunos recomendados y que van a hacer tus páginas más atractivas, dentro de los estándares AMP.
Marcado obligatorio y algunas recomendaciones.
Algunas reglas que nos imponen de marcado obligatorio, junto con algunas recomendaciones son:
- Comenzar con el tipo de documento: <!doctype html>
- Contener la etiqueta <html amp> en la parte superior.
- Contener las etiquetas <head> y <body>
- Es recomentable, pero no obligatorio, la inclusión de metadatos de Schema.org
- Dentro de la etiqueta principal <head> contener:
- Contener la etiqueta <meta charset="utf-8">
- Seguido de la etiqueta <script async src="https://cdn.ampproject.org/v0.js"></script>
- También la etiqueta <link rel="canonical" href="https://URL">. Esto es muy importante ya que tienes que señalarle a Google que esa página pertenece a una principal y no es contenido duplicado.
- La etiqueta <meta name="viewport" content="width=device-width,minimum-scale=1">
- Y por último, el código amp-boilerplate
- El CCS que queramos incluir tenemos que añadirlo de forma unificada y con una única etiqueta <style amp-custum>. Sé lo más sencillo posible, colores, tamaño y tipo de letra, tanto para el texto como para los encabezados.
- Una vez esto, la etiqueta <body> en la que introducirás todo el contenido en forma HTML.
Como podrás ver en la plantilla, el
JavaScript automáticamente va fuera, por lo que no tienes que añadir ninguna etiqueta <script>. Bueno, miento, la propia de amp, pero es la única.
A la hora de querer introducir
imágenes o vídeos, tiene una particularidad, y es que tienes que señalar las dimensiones específicas en píxeles (width/height) y la etiqueta pasa a ser
<amp-video> y
<amp-img>
Si añades la etiqueta layout=”responsive” tras poner las medidas de imágenes y vídeos, te asegurarás que el contenido sea responsive.
Cuando nos hemos referido a los vídeos, han sido a aquellos que introduzcas directamente en la plataforma, pero si previene de terceros como Youtube, la etiqueta pasa a ser <amp-youtube> y de la misma forma hay que señalar las medidas.
Validación del código AMP y publicación.
Una vez que crees la página AMP tienes que subirla al servidor de forma pública. Puedes ver como ha quedado tu página añadiendo al final /amp.
Pero primero tenemos que validarla, para ello ponemos al final de la url de amp (recuerda que ya lleva el apartado/amp), el apartado /#development=1.
Quedaría algo así:
https://revsitadigital.inesem.es/xxxxxxx/amp/#development=1
Una vez que la página AMP esté correcta, llega el momento de publicarlo. Una vez esto, tenemos que añadir en la página principal la url de amp, para señalar al bots de Google que tiene una página amp.
La etiqueta a añadir sería:
<link rel=”amphtml” href=”https://www.wwwwwww.www/amp (página completa amp)
Y a su vez en la página AMP, añadir el link canonical, algo que se dijo al principio del artículo.
Una vez publicado podemos tener un control de esto en la aplicación de Google Search Console. Podemos encontrar esto en el apartado, Aspecto de la búsqueda y dentro, Accelerated Mobile Pages. Aquí empezarán a salir los datos de las páginas AMP indexadas y aquellas que puedan contener algún error, junto con sus especificaciones.
¿Te atreves a implementar AMP Project?
Puedes ver como si tienes páginas web con mucho contenido en texto e imágenes, que en cierto modo son sencillos, es recomendable la utilización de la herramienta.
Pero cuando vamos a páginas más complejas, la implantación de esta herramienta se haría específicamente de una serie de páginas. Estas páginas serían aquellas que incorporen más texto, que tengan información acerca de productos si son e-commerce o información acerca de alguna categoría específica.
La implantación por HTML no es complicada y si tienes tu páginas en software como Wordpress, existen plugins para implementar la herramienta.
Por tanto, no pierdes nada con intentarlo en algunas páginas específicas y ver el funcionamiento y el posicionamiento de las mismas. Y más aún si tienes información acerca de las sesiones que se realizan desde dispositivos móviles (y son más del 50%). Y si realizar un test de velocidad y los resultados no son muy buenos, más aún.
Una vez esto, si has tenido contacto con esta herramienta o te decides a implementarla, nos encantaría que nos comentaras cuál ha sido tu experiencia y qué te ha parecido. Sobre todo que te haya quedado claro qué es AMP.
958 050 205
