Un día te despiertas, enciendes tu smartphone y haces una búsqueda en Google con ese lento internet 4G. Entonces notas algo diferente: algunos resultados tienen el acrónimo AMP debajo del título. Cuando ingresas a las noticias, el contenido se presenta AL INSTANTE , sin ningún tipo de bloqueo o carga de tiempo.
Esa es la promesa de la tecnología de Google llamada Accelerated Mobile Pages . AMP es una solución de código abierto que cualquier desarrollador puede aplicar en cualquier momento.
Contenido primero
En los últimos tiempos, podemos notar algunas acciones que ha estado tomando Google para priorizar sitios que facilitan el acceso al contenido. Una de estas acciones es el castigo a los sitios que utilizan ventanas emergentes que bloquean la experiencia del usuario .
Los estudios de Google muestran que el 40% de los usuarios dejan de leer las noticias en su teléfono inteligente si el tiempo de carga dura más de 3 segundos o si la experiencia de lectura se bloquea por algún tipo de ventana emergente. Hoy en día, una página móvil tarda un promedio de 8 segundos en cargarse, debido a la mala conexión a Internet móvil combinada con la complejidad de las páginas.
AMP soluciona esta situación por completo , ya que tiene varias reglas en su implementación que obligan a la página a cargar la menor cantidad de recursos posible.
Para estas páginas súper optimizadas, Google está asignando un espacio especial en la parte superior de su resultado de búsqueda:
¿AMP impacta en el SEO?
Con este espacio privilegiado, en la mitad superior de la página, las páginas de AMP son mucho más prominentes en los resultados de búsqueda, atrayendo más clics y vistas. La página que usa la tecnología AMP es un factor que afecta el ranking orgánico de Google , ya que hoy en día el destaque inicial después de los anuncios pagados es precisamente el carrusel de noticias que aplicó AMP en el código.
Todas las acciones de Google con respecto a la priorización de este contenido muestran claramente la intención de transformar la web en una plataforma más fácil de usar, y los sitios , para bien o para mal, deben adaptarse a este concepto.
Implementación
La implementación de una página AMP consta de tres conceptos: AMP HTML, AMP JS y AMP CACHE.
AMP HTML es básicamente HTML que usa algunas reglas y elementos personalizados de AMP. Todas las imágenes y contenidos que normalmente cambian el tamaño de la página en tiempo de ejecución deben calcularse previamente para que no se produzca esta oscilación.
<!doctipo html>
<html⚡>
<cabeza>
<juego de caracteres meta="utf-8">
<title>Documento de muestra</title>
<enlace rel="canonical" href="./normal-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<estilo amplificador-personalizado>
h1 {color: rojo}
</estilo>
<tipo de script="aplicación/ld+json">
{
"@contexto": "http://esquema.org",
"@type": "Artículo de noticias",
"título": "Título del artículo",
"imagen": [
"miniatura1.jpg"
],
"fechaPublicado": "2015-02-05T08:00:00+08:00"
}
</script>
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s pasos(1,fin) 0s 1 normal ambos;-moz-animation:-amp-start 8s pasos(1,fin) 0s 1 normal ambos; -ms-animation:-amp-start 8s pasos(1,fin) 0s 1 normal ambos;animación:-amp-start 8s pasos(1,fin) 0s 1 normal ambos}@-webkit-keyframes -amp-start{desde {visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden }a{visibilidad:visible}}@-o-keyframes -amp-start{desde{visibilidad:oculto}a{visibilidad:visible}}@keyframes -amp-start{desde{visibilidad:oculto}a{visibilidad:visible} }</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<secuencia de comandos asíncrona src="https://cdn.ampproject.org/v0.js"></secuencia de comandos>
</cabeza>
<cuerpo>
<h1>Documento de muestra</h1>
<p>
añadir texto
<amp-img src=muestra.jpg ancho=300 alto=300></amp-img>
</p>
<amp-ad ancho=300 alto=250
tipo = "a9"
datos-aax_size="300x250"
datos-aax_pubname="prueba123"
datos-aax_src="302">
</amp-anuncio>
</cuerpo>
</html>
AMP JS aplica las mejores prácticas de optimización del rendimiento y garantiza que las etiquetas personalizadas proporcionadas por AMP HTML funcionen.
No se permite el bloqueo de Javascript en este tipo de página, solo considerando las características asincrónicas.
Además, varios selectores de CSS que pueden degradar el rendimiento no están permitidos y están deshabilitados.
AMP CACHE es responsable de entregar páginas AMP con el menor tiempo de carga posible. Todos los activos se cargan mediante HTTP 2.0. El motor de búsqueda de Google almacena en caché las páginas AMP, lo que hace que la respuesta sea casi instantánea.
En términos generales, AMP funciona como una página duplicada: en la página con HTML normal, se debe colocar un elemento <link> con la dirección de la página AMP en el <head>, y la página AMP también debe contener un <link> con la dirección de la página regular.
La velocidad de carga de una página AMP, incluso sin AMP CACHE (que hace que la carga sea casi instantánea), es mucho mayor que la de una página HTML normal.
Para obtener una guía completa sobre cómo implementar una página AMP, consulte la documentación oficial en portugués del Proyecto AMP .
Fuente abierta
Google no solo dicta cómo debe funcionar Internet, sino que incluye a todos los usuarios en esta discusión.
Aunque es propiedad de Google, AMP está disponible en Github para que la comunidad pueda participar y decidir el rumbo de esta tecnología.
Historias web
Otra característica interesante de AMP es la creación de historias visuales en su sitio web, una forma creativa de distribuir contenido.
Muy similar a los formatos de historia utilizados en Instagram y Facebook, Web Stories permite la construcción de historias visuales y atractivas, lo que permite generar más tráfico a su sitio web, atrayendo la atención del lector de forma dinámica.
Además de permitirle al lector consumir contenido de forma interactiva, el formato también tiene soporte para mostrar anuncios y puede compartirse e incorporarse a otros sitios web y aplicaciones, entre otros beneficios.
Esta funcionalidad es gratuita y está disponible para todos los que quieran probar la herramienta en sus sitios web.
Puede agregar Web Stories a su sitio de dos maneras: a través de una herramienta o manualmente. Por si te interesó, en la web de AMP hay un tutorial para que crees tus primeras Stories .
Conclusión
Para la mayoría de los brasileños, incluido yo mismo, que tienen un internet móvil lento, este proyecto realmente cambió vidas.
Por experiencia, busco abrir solo los resultados de Google que tienen tecnología AMP, simplemente para ahorrar tiempo de carga.
En poco tiempo, ya es posible notar un crecimiento gigantesco de sitios que se han unido a la AMP . Siguiendo esta tendencia, posiblemente la inclusión de esta funcionalidad se convierta en un comportamiento estándar de buenas prácticas.
El AMP es un gran aliado para una estrategia de marketing digital, sobre todo si hablamos de SEO.
¿Tienes una empresa y te gustaría estar presente en los primeros resultados de Google?
Entonces… necesitas a Monster Digital, una agencia posicionamiento SEO en Barcelona especializada en el posicionamiento orgánico de las webs en Google. En Monster, te pueden brindar una visión integral, ya que al miso tiempo lideran proyectos de marketing 360º, por lo que además puede llegar a ser la agencia SEM que necesitas. El SEM y el SEO amenudeo van de la mano, ya que para obtener resultados de inmediato, debes realizar una inversión en publicidad, hasta que el SEO hace efecto (un medio largo plazo).
Contacta con la agencia de marketing digital en Barcelona Monster digital y… ¡dale ese impulso a tu negocio que tanto necesita!