SEO para AMP

El pasado 13 de Julio me tocó hacer un webinar sobre SEO para AMP para SEMrush en español.

En este post, podrás ver tanto el video del webinar, como acceder a la presentación vía SlideShare y por cierto leer de primera mano de que va este tema, que será sin duda uno de los principales temas en 2018 cuando se ponga en marcha el Google Mobile First Index

En este articulo

¿Que es AMP?

AMP es fundamentalmente 3 cosas:

Arquitectura HTML/Javascript

El HTML que podemos usar en AMP es muy similar al que siempre has usado, sin embargo, tiene ciertas restricciones y algunos nuevos TAGS que por una parte, reemplazan a sus equivalentes en HTML “normal”, como por ejemplo IMG que en amp sería AMP-IMG, y por otra parte, incluye otros que no existen en la versión normal como: AMP-COROUSEL, AMP-YOUTUBE y muchos mas, que son librerías JavaScript de Google. Una cosa muy importante a tener en cuenta es que AMP solo soporta librerías de Google y no acepta JSC de terceros, por lo que las librerías de Google son las únicas herramientas que tendrás para darle distintas funcionalidades y atractivos visuales a tus páginas AMP.

Sistema de distribución CDN

AMP se comporta como una CDN pues es el mismo Google quien actúa como servidor de tus páginas AMP. Esto es muy importante de entender pues al ser Google el hosting para tus páginas AMP ahorraras en el uso de ancho de banda, pero lo más importante es que contarás con la infraestructura de Google para servir tu web móvil AMP.

Si estas en Francia seguramente los resultados móviles de Google mostraran tu resultado sirviéndose en google.fr/amp/tu-url y si estas en Chile será google.cl/amp/tu-url la que se muestre.

Sistema de cache

Lo que significa que tus páginas AMP se encuentran pre cacheadas por Google, es decir, al entregar los resultados para una búsqueda, todas las páginas AMP que se encuentren en dichos resultados, estarán pre grabadas ya por Google, por lo que será muchísimo mas rápida la carga, casi instantánea.

En este sentido, entre AMP y el explorador Chrome, existen adicionalmente una serie de protocolos y acuerdos de manera de que la aceleración no solo pasa por la descarga en si misma, sino que la renderización final de la página será mucho más rápida debido a estos protocolos pre acordados entre Chrome y tu página AMP.

¿Por que AMP es tan importante?

El pasado Google i/o 2017 hubieron 5 keynotes directamente sobre SEO,  el resto fue sobre Android, Google Auto y bueno muchos otros temas que aborda Google. Esto nos dice dos cosas: O Google no tiene más temas SEO que tratar, cosa que no veo muy viable, o que Google valora muchísimo AMP y por tanto nosotros debemos poner atención.

Es verdad que Google i/o es una instancia que Google utiliza para destacar sus nuevas tecnologías y prácticas, sin embargo, 4 de 5 solo me dice que AMP es realmente importante en el mundo SEO.

La razón de existir de AMP es la alta latencia móvil, lo que no va a cambiar muy pronto en el mundo, por lo que deberíamos tener AMP para rato. Quien sabe si en 3 o 5 años más la latencia móvil haya disminuido a niveles en que Google decida dar de baja AMP, como muchas otras iniciativas que a impulsado en el pasado, o bien, durante los próximos años Google va a fortalecer y desarrollar el uso de AMP de manera de convertirla en LA PLATAFORMA de desarrollo de web móvil. Solo el tiempo nos dirá lo que suceda, mientras tanto, tenemos AMP al menos por 3 a 5 años más, por lo que puedes estar tranquil@ que no vas a perder tu tiempo dedicándote a desarrollar AMP para tu sitio.

Finalmente, y dado que  tu versión móvil será a partir del Mobile First Index, la versión más importante de tu sitio y que tu versión móvil debería ser AMP, es que debemos darle máxima prioridad al uso de AMP, pues tarde o temprano podría convertirse en la versión más importante de tu sitio.

Ahora bien, si tienes un sitio full responsivo y a la vez una versión AMP que cumple con normas de calidad mínimas que ya te contaré en este post, Google va a preferir tu versión AMP sobre la responsiva en los SERPS móviles.

¿Que podemos hacer para mejorar el SEO en AMP?

Pues, a través del código puedes optimizar varios aspectos de tus AMP como el UX o mediante datos estructurados. Vamos a ello.

Optimización de código

  • Optimiza tu CSS
  • Carga solo librerías que vayas a usar
  • Usa Google Tag Manager

Optimización de CSS

El CSS es parte fundamental en AMP, pues te permite personalizar tanto el look como darle ciertas funcionalidades y atractivos.

En este sentido, Google advierte un peso máximo para tu CSS de 50k. Ello debido a que este peso es el máximo que puede procesar el Layout engine de Chrome sin tardar demasiado como para que el ser humano perciba una demora importante. En otras palabras, cada vez que cambias la orientación de tu móvil digamos, vertical a horizontal, el layout engine del explorador debe calcular todo tu CSS y esto toma cierta cantidad de ciclos de computación. Los 50k son el tamaño máximo para que este cálculo sea imperceptible por el humano en fonos de gama media.

Carga de librerías

No cargues librerías o complementos JavaScript que no vayas a usar. Así de simple, nada de bla bla en el código.

A pesar de que estas librerías están pre cargadas en la cache de Google y por tanto el tiempo de descarga aquí no corre, si deben procesarse, ahí vienen los problemas.

¿Para que procesar algo que no vas a usar?

Si no las usas, no las incluyas en tu código.

Uso de GTM

Google Tag Manager te dará una tremenda flexibilidad y ahorro de código, pues a diferencia de Google Analytics que trabaja todo de forma manual escrito directamente en el código, GTM solo utiliza un pixel en el código y todo lo demás transcurre sin alterar tu código pues es GTM quien ejecuta nuevos scripts en caliente. ASsí te ahorras escribir códigos muy largos, como cuando debes definir varios triggers que controlan distintas cosas en tus páginas, como por ejemplo, intersticial no intrusivo que se dispare ante una acción del usuario.

Cuando debes intervenir estos tremendos códigos en varias páginas AMP, por ejemplo, distintas versiones de países de tu sitio, esto se torna impracticable. Aquí es donde GTM llega al rescate, transcurriendo todo en la nube y permitiéndote tener muchos triggers y métricas de elementos como:

  • Scroll
  • Tiempo en la página
  • Click en botones sociales

Su instalación en muy simple, solo necesitas este código:

<amp-analytics config=”https://www.googletagmanager.com/amp.json?id=GTM-XXXXXXX&amp;gtm.url=SOURCE_URL” data-credentials=”include” class=”i-amphtml-element i-amphtml-layout-fixed i-amphtml-layout-size-defined i-amphtml-layout” style=”width: 1px; height: 1px; display: none;” aria-hidden=”true”></amp-analytics>

Y olvídate para siempre de Google Analytics y sus modificaciones manuales.

 

Optimizando el UX

Si, a partir del Mobile First index, Google va a preferir mirar al usuario móvil, antes que el escritorio, y por otro lado AMP es la versión móvil favorita de Google…

¿Que es lo que crees debe pasar?

Pues claro, debes entregar la misma o mejor UX al usuario móvil que al de escritorio, y por tanto, el UX se torna crítico.

Es dentro de esta espacio en que, a mi juicio, es en donde más puedes hacer SEO para AMP, pues tu misión es estudiar la forma de mejorar al máximo la experiencia de los usuarios, y esto a su vez, variará según cada proyecto en el que participes.

Personaliza tu CSS

Puedes personalizar, al igual que en HTML normal, todos los tags AMP, de manera de que puedes tener algo como:

amp-carousel {
margin: 0;
background-color:rgba(251,255,255,0.5);
top:110px;
}

Por supuesto también puedes utilizar clases dentro de los tags AMP para personalizarlos.

<amp-carousel class=”algunaclase claseparatextos otraparadiagramar” width=”400″ height=”350″ layout=”responsive” type=”slides” autoplay>

 

AMP no es tu versión light

No caigas en el error de pensar que tu versión AMP debe ser alguna clase de resumen o versión acotada de tu sitio de escritorio.

Mantén los mismos contenidos en escritorio y móvil. Lo que no significa que no puedas potenciar o personalizar tu versión móvil. Es más eso es lo ideal, sin embargo, la diversidad de contenidos que ofrezca la versión de escritorio, también debe existir en tu versión móvil.

 

Tiene sentido tener una versión de escritorio totalmente distinta de tu versión móvil?

Es muy fácil encontrar en una gran cantidad de sitios WordPress, una tremenda diferencia entre la versión de escritorio y la versión AMP, ya que suele suceder que solo se implementa el plugin de Automatic el que no permite ningún tipo de personalización gráfica.

Luego la acción más común es la de implementar otros plugins que abren un poco el uso para post de tipo página e incluso post personalizados en algunos plugins como el Page Frog, sin embargo, no es menos común encontrarnos con versiones personalizadas bajo los mismos parámetros en unos pocos plugins razonablemente poderosos que por ahora existen en el mercado, de los cuales, AMP for WP es por lejos mi favorito, lo que deja en evidencia inmediatamente cual es el plugin que estas usando, ya que todos tienen estructuras bastante rígidas a la hora de elegir cosas como por ejemplo, donde y como disponemos nuestro menú.

Al final del día, vemos sitios WordPress cuya versión AMP no tiene nada que ver en cuanto a colores, imágenes, contenidos e incluso objetivos que la versión de escritorio y por tanto una pobre experiencia al usuario móvil.

Usa Headlines increíblemente atractivos

Recuerda que los usuarios móviles tienen “menos paciencia” que los de escritorio, la navegación móvil es mucho más volatil y por tanto tienes menos tiempo para seducir a tus usuarios. No te queda otra que hacer algo que realmente los mantenga en tu página, y para ello puedes utilizar, gráficas atractivas, textos grandes, botones y llamados a la acción, ojalá dentro de AMP-Carousel, de manera de mostrar varios mensajes en poco tiempo.

Usa Google Fonts y Font Awesome

¿Para que usar imágenes si puedes usar tipografía nativa para definir iconos?

Diferenciate de otros sitios utilizando tipografías poco comunes, al menos para los títulos.

Dale un aspecto distinto a tu web usando tipografías atractivas o fuera de lo común o simplemente más fáciles de entender

Evita usar %

Si vas a dimensionar tus imágenes o videos, prefiere pixeles y no uses %, pues la matemática se le hace mas difícil al Layout Engine del explorador si por ejemplo cambias el sentido de horizontal a vertical.

No te preocupes tampoco de usar dimensiones de imágenes muy grandes pues AMP redimensiona las imágenes de forma dinámica, y por tanto las dimensiones que definas solo serán tomadas como referencia para ofrecer una imagen proporcional.

Usa AMP-BIND

Es algo así que AJAX pero para AMP por lo que modifica contenidos sin recargar tu pagina.

Se usa mucho en e-commerce pero puedes usarlo para lo que sea que estés usando hoy AJAX

Usa AMP-EXPERIMENT

Te permitirá realizar pruebas y por otro lado cambiar tu contenido según el tipo de usuario. En este sentido, se hace fundamental su uso si deseas conocer a tus usuarios y realizar pruebas de UX.

¿Como Implementar AMP-EXPERIMENT?

Sigue estos 4 pasos:

  1. Importa la librería JS
  2. Modifica tu CSS
  3. Define JSON
  4. Mide con AMP-PIXEL, Google Analytics o Google Optimize
Importa la librería JS

No es otra cosa que cargar en tu página AMP el complemento JS amp-experiment-0.1.js como cualquier otra librería.

<script async custom-element=”amp-experiment” src=”https://cdn.ampproject.org/v0/amp-experiment-0.1.js”></script>

Modifica tu CSS

El CSS es un pilar findamental en AMP, pues te permite definir el diseño, diagramación y en general como se verá tu página.

Imagina que quieres probar un botón con diferentes colores y ver cual de esos colores atrae mas clicks, el CSS original sería algo como:

 

miboton {
propiedadCSS: valor;
}

Luego para integrar un experimento, basta con anteponer este texto:

body[amp-x-[NombreExperimento]=”variante1″]

Por lo que nuestra clase con experimento quedaría:

body[amp-x-[NombreExperimento]=”variante1″] .miboton {
propiedadCSS: valor;
}

NombreExperimento: Corresponde al nombre de tu experimento, a que te la habías imaginado 🙂

variante1: Corresponde a cualquier nombre que desees darle para identificarla, por ejemplo, rojo/azul, o grande/chico o visible/invisible o simplemente variante1, variante2, etc.

Puedes forzar la visualización de un experimento superponiendo este texto luego de la URL

http://tuURL/#amp-x-NombreExperimento=1

Define JSON

AMP-EXPERIMENT no es otra cosa que un JSON, en donde se define a quienes llegará cada variante del experimento., se decir, definiremos las audiencias.

<amp-experiment>
<script type=”application/json »>
{
nombre-experimento“: {
“variants”: {
variante0“: 30,
variante1“: 30,
variante2“: 30
}
},
nombre-experimento2”: {…}
}
</script>
</amp-experiment>

Cada valor de variante, representa el % de la audiencia a la que estará expuesta dicha variante CSS.

En este caso cada variante está expuesta al 30% de la audiencia (tráfico) y el 10% restante será asignado al valor por defecto de dicha clase CSS.

Puedes definir varios experimentos en el mismo JSON y las variantes pueden llamarse como quieras, incluso repitiendo los mismos nombres de variantes en experimentos distintos.

Mide con AMP Pixel, Google Analytics o Google Optimize

La mejor y más intuitiva forma de medir es vía Google optimize, que es como una especie de Google Tag Manager pero para experimentos, es gratis, pruébala.

En éste caso, voy a analizar una forma algo mas rudimentaria y dura de implementar.

<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “UA-tuanalytics
},
“requests”: {
“experiment”: “${pageview}&xid=${nombreExperimento}&xvar=${variante}”
},
“triggers”: {
“default pageview”: {
“on”: “visible”,
“request”: “experiment”,
“vars”: {
nombreExperimento“: “W4kYemYmQBSTIYNpoezCmg”,
variante“: “VARIANT(nombreExperimento)”
}
}
}
}
</script>
</amp-analytics>

Lo primero es definir tu cuenta de GA, luego se define un request de tipo experiment, que no es otra cosa que un request de URL, a la que se superponen dos variables xid, en donde pones el nombre del experimento, y la variable xvar, en donde incluyes la variante.

Para terminar solo queda acceder a Google Analytics y crear un experimento, que te entregará un ID de Experimento que incluyes en tu JSON en la linea:
nombreExperimento“: “W4kYemYmQBSTIYNpoezCmg” (este es el Experiment ID)

Usa Sticky

Muestra tu contenido a usuarios específicos, separados por grupos de experimentos o segmentos de audiencia.

Requiere aprobación del usuario, que logras vía AMP-NOTIFICATIONS, en donde a través del Client ID generado por Sticky, identificas al usuario por hasta 1 año.

Otros elementos AMP que te ayudarán con el UX

  • Carousel
  • Video
  • Imágenes
  • Tabs
  • Sidebars
  • Lightbox
  • Image Lightbox
  • Iframe

Como ves hay muchas herramientas para darle vida a tus AMP y enriquecer el UX. De ellos mi favorito es AMP- CAROUSEL pues te permite mostrar más información en menos espacio. Puedes usarlo por ejemplo como un slider tipo Revolution Slider, mostrando gráficas e integrando carouseles dentro de otros carouseles de manera de dar efectos de movimiento de texto sobre una gráfica, tal como sucede con Rev Slider.

Los sidebars, no solo los puedes usar para menús, sino para cualquier cosa que necesites se mantenga estática mientras el usuario hace scroll down, o algún mensaje para suscripción al newsletter o aviso de uso de cookies, etc.

AMP y WordPress

WordPress es el mayor cliente de AMP, es decir, que la mayoría de las páginas AMP que existen en el mundo corren bajo WP, por lo que hace muy relevante el plugin que usemos.

En un post anterior en donde muestro cuales son los 3 mejores plugins para AMP, muestro cuales son las ventajas y debilidades, de cada uno de estos 3, Page Frog, AMP Supremacy y AMP for WP, no sin haber probado prácticamente todos los plugins disponibles, incluyendo plugins comprados, como el Accelerated Mobile Pages ( AMP ) for WordPress en venta en Themeforest, que por favor, NO LO COMPREN, ES REALMENTE MALO!!

Ventajas de AMP for WP

  • Editor AMP en páginas y post
  • Personalización de CSS
  • Themes que puedes editar/personalizar
  • Incluir post relacionados
  • Redirección automática para móviles
  • Social share
  • Puedes usar extensiones para publicidad

 

Usa datos estructurados

Los datos estructurados te ayudaran principalmente en dos aspectos. uno es ayudar a Google a entender y catalogar de mejor forma a tu contenido, y la otra es que te permite “maquillar los SERPS”, potenciando tu aparición de distintas formas, como incluyendo fotos, 5 star rating  y otros elementos que resaltaran tu sitio en los resultados de búsqueda.

Algunos guidelines importantes

  • Títulos no deben exceder los 110 caracteres
  • Declara la canónica como mainEntityOfPage
  • Tu Logo en un rectángulo de 60x600px no cuadrado

NewsArticle

Hoy en los medios es un “must” pues google les da la posibilidad de incluir foto, título y descripción corta de una noticia directamente en los SERPS.

Dentro de los elementos básicos que debes configurar están:
  • mainEntityOfPage
  • headline
  • image
  • publisher
  • datePublished
  • dateModified
  • author (author.name)
  • description

Los marcados en naranjo son los elementos en que mas debes poner atención.

Procura mantener tanto el título como la descripción lo mas cortas que puedas, máximo 6 palabras para el titulo y 12 para descripción.

Recipies

Dentro de los elementos básicos que debes configurar están:
  • name
  • prepTime
  • image
  • recipeIngredient
  • recipeInstructions
  • aggregateRating
  • author (author.name)
  • description

Aquí el más importante es name e image, pero definir un aggregateRating puede ayudarte.

Otros datos estructurados compatibles con AMP

Organization, Hotel, 5 Star rating, rel=next / prev, Video, AggregateRating, Reviews, Local businesses, todos son tipos de datos que son compatibles con AMP, por lo que puedes usarlos sin problema.

Valida tus datos estructurados

Es fundamental validar tus datos estructurados ya que de no ser válidos, no serán procesados por Google.

Para ello, mi favorito es el validador de Google, aunque existe otro de Structured Data.

El validador de Google es el más completo, ofreciendo incluso el número de línea de código en donde encuentra el error.

 

Uso de Social Share

Para terminar, solo mencionarte que AMP es totalmente compatible con la opción de compartir páginas y para ello te ofrece la librería Social Share, que puedes personalizar con CSS.

Conclusiones

En un mundo que será mobile first en 2018, con AMP como versión móvil preferida de Google, se hace simplemente imprescindible implementar en tu sitio. Pero impleméntala bien, tomando en cuenta al menos estos aspectos:

  • No hagas una versión light de tu sitio, más bien mantén experiencias de usuario similares
  • Juégatela por personalizar el CSS y darle un aspecto sin igual a tus páginas
  • Usa datos estructurados, aunque no seas un medio o sitio de recetas
  • Experimenta con AMP-Experiment y aprende a conocer a tus usuarios móviles

 

¿Te gustó este artículo?

Pues déjanos tu voto :)

1 Estrella2 Estrellas3 Estrellas4 Estrellas5 Estrellas (1 votos, promedio: 5.00 de un total de 5)

Loading...

Experto SEO desde 2005 con más de 500 sitios optimizados y sobre 1000 posiciones TOP 1 alanzadas.

Unete a la discusión

Nuestro blog en tu correo:

Debes completar los campos marcados con *

más artículos

Ver todos los post