Aprende a optimizar tus páginas AMP y llévalas al extremo con estos TIPs y buenas prácticas.
Esta presentación fue realizada para un Webinar de SEMRush en vivo, puedes verlo completo en https://www.youtube.com/watch?v=gzSt05cYI7c
Puedes ver el artículo completo en http://rank.tools/seo-amp/
3. 1.
¿Que es AMP?
Arquitectura HTML/Javascript
Sistema de distribución CDN
Sistema de cache
4. ¿Por que
AMP es tan
importante?
I/O 2017 5 Keynotes SEO, 4 de ellas AMP
Google seguirá impulsado AMP por al menos
5 años o hasta que la latencia en móvil baje
Google prefiere AMP como versión móvil de
sitio
2.
8. OPTIMIZA TU
CSS
▸ En serio, ¿50K?
▸ No uses frameworks de terceros, implementa el tuyo
▸ Minifica todo
Puedes usar https://cssminifier.com/
▸ Usa validadores
Google Chrome Dev Console (#development=1)
https://validator.ampproject.org
Extensión de Browser
9. OPTIMIZA LA
CARGA DE LIBRERÍAS
▸ IFRAME
▸ YOUTUBE
▸ LIGHTBOX
▸ ETC
SI NO LAS VAS A USAR NO
LAS CARGUES
O TENDRAS PROBLEMAS EN GSC
<script async custom-element="amp-image-lightbox" src="https://cdn.ampproject.org/v0/amp-image-lightbox-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
12. USA GTM
+ control del UE
Con GTM puedes medir el impacto de todos
los elementos en tu pagina, incluyendo:
▸ Scroll
▸ Imágenes
▸ Tiempo en la página
▸ Clicks en botones sociales
▸ mas
13. USA GTM
- CÓDIGO
Pixel de GTM
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-
XXXXXXX&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>
Con GTM usas siempre 1 sola línea de
código
14. USA GTM
- CÓDIGO
<amp-analytics type="googleanalytics"> <script type="application/json"> {
"vars": { "account": "UA-XXXXXXX-1" },
"triggers": { "default pageview": {
"on": "visible", "request": "pageview",
"vars": { "title": "Product" }
} ;
"triggers": { "default pageview": {
"on": "visible", "request": "pageview",
"vars": { "title": ”Category" }
}
}
}
</script>
</amp-analytics>
Sin GTM debes declarar cada Trigger en el
código, Cuando declaras 25 triggers, esto
puede ser un problema
16. UX USER
EXPERIENCE
Dale a tus usuarios móviles el
mismo o mejor trato que a tus
usuarios de escritorio
Google prefiere AMP como
versión móvil de sitio
22. UX
GOOGLE FONTS Y FONT AWESOME
¿Para que usar imágenes
si puedes usar tipografía
nativa para definir iconos?
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
23. UX
EVITA USAR %
Prefiere usar dimensiones exactas y no % para
evitar retrasos en el procesamiento del layout
por parte del browser.
24. UX
USA AMP-BIND
AMP-BIND es algo así que AJAX pero para AMP
Dinamiza datos sin recargar tu pagina
Se usa mucho en ecommerce pero puedes usarlo
para lo que sea que estés usando hoy AJAX
26. Como usar
AMP-EXPERIMENT
Importa librería JS
amp-experiment-0.1.js
Modifica tu CSS
body[amp-x-nombre-experimento=”nombreVariable"]
Define JSON
% de usuarios a los que llegará cada experimento
Mide con AMP Pixel, GA, GTM o Optimize
?
28. Como usar
AMP-EXPERIMENT
Modifica tu CSS
.selector {
propiedadCSS: valor;
}
body[amp-x-[NombreExperimento]=”variante1"] .selector {
propiedadCSS: valor;
}
body[amp-x-[NombreExperimento]=”variante2"] .selector {
propiedadCSS: otro valor;
}
Puedes forzar la visualización de un experimento
http://tuURL/#amp-x-NombreExperimento=1
2
29. Como usar
AMP-EXPERIMENT
<amp-experiment> es un JSON
nombre-experimento y sus variantes
3
<amp-experiment>
<script type="application/json »>
{
"nombre-experimento": {
"variants": {
“variante0": 30,
“variante1": 30,
“variante2": 30
}
},
"nombre-experimento2”: {…}
}
</script>
</amp-experiment>
El 10% restante lo
asume el valor
default definido en tu
CSS
32. Como usar
AMP-EXPERIMENT
Usa sticky
!
Muéstra tu contenido a usuarios específicos
Segmenta por grupos de experimentos
Requiere aprobación del usuario
Client ID identifica a un usuario hasta por 1 año
33. UX
ELEMENTOS QUE TE AYUDARÁN
▸ Carousel
▸ Video
▸ Imágenes
▸ Tabs
▸ Sidebars
▸ Lightbox
▸ Image Lightbox
▸ Iframe
34. UX
AMP y WordPress
Usa el plugin AMP for WP para
personalizar el diseño e incluir
varias funcionalidades a tu
AMP en WP
http://rank.tools/3-mejores-plugins-amp/
PageFrog
AMP Supremacy
AMP for WP
35. UX
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
▸ Puedes usar extensiones
38. DATOS ESTRUCTURADOS
GUIDELINES
Declara la canónica como mainEntityOfPage
Tu Logo en un rectángulo de 60x600px no cuadrado
Títulos no deben exceder los 110 caracteres
39. DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Usa NewsArticle
• mainEntityOfPage
• headline
• image
• publisher
• datePublished
• dateModified
• author (author.name)
• description
40. DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Usa Recipies
name
prepTime
image
recipeIngredient
recipeInstructions
aggregateRating
author (author.name)
description
41. DATOS ESTRUCTURADOS
DESTACA EN LOS SERPS
Muchos mas
Organization
Hotel
5 Star rating
rel=next / prev
Video
AggregateRating
Reviews
Local businesses