Accelerated Mobile Pages (AMP) en Joomla!: Por qué y cómo

@SiteGround_ESwww.siteground.es
#SGwebinar
Accelerated Mobile Pages
¿Por qué y cómo?
Yannick Gaultier
@weeblr
weeblr.com
por

Invitado Especial
Yannick Gaultier
Owner, weeblr.com
#SGwebinar

Historial
● Desarrollador de extensiones
● Desde 2006
● Sólo con licencia GPL
● Experto en SEO y gestión de contenidos
● sh404SEF, wbAMP (Joomla)
● weeblrAMP (WordPress)
#SGwebinar

● ¿Qué es AMP?
● ¿Por qué?
● ¿Cómo?
#SGwebinar

Demostración…
#SGwebinar

¿Qué es AMP?
#SGwebinar
● Especificación web abierta cuyo objetivo es la velocidad
● Desarrollado de forma abierta y colaborativa (Github)
● HTML / JavaScript / súper-optimizado
● Perfecto tanto en dispositivos móviles, como en
ordenadores
● Desde febrero de 2016

¿Qué es AMP?
#SGwebinar
● Convive con tus páginas convencionales, en tu sitio
● El plugin wbAMP crea AMP en tiempo real
● Enlace invisible a la versión AMP agregado en las
páginas convencionales
Los motores de búsqueda y otros servicios ven que existe
una versión AMP

#SGwebinar
ejemplo.com/mi-pagina/ ejemplo.com/mi-pagina/amp/
Descubrir
páginas AMP

¿Qué es AMP?
#SGwebinar
• Utilizando AMP:
• Búsqueda: Google, Bing, Baidu
• Twitter, Pinterest, LinkedIn, Feedly,…
• Proveen páginas AMP:
• Guardian, BuzzFeed, Reddit,…
• Shopify, Ebay,…
• ¡Tú!

● ¿Por qué?
#SGwebinar

Diario The Irish Times, Conexión 3G Rápida
#SGwebinar
3.10s 4.85s
5.47s 7.29s 12.39s

Diario The Irish Times, Conexión 3G Rápida
#SGwebinar
3.10s 4.85s

AMP, ¿Por qué?
#SGwebinar
• Usuarios: visualización ultrarrápida, sin jitter
• Un sitio más rápido significa
+ visitas
+ clics
+ conversión, ventas…

AMP, ¿Por qué?
#SGwebinar
• SEO :
• Posición “0”: Datos Estructurados
• Visibilidad en SERP
• Tasa de conversión
Oficialmente, ningún
beneficio de clasificación

● ¿Cómo?
#SGwebinar

AMP, ¿cómo?
#SGwebinar
• Elementos HTML específicos
<amp-img>,<amp-video><amp-analytics>,…
• Sin JavaScript externo. En absoluto.
• Sin CSS externo. En absoluto.
• <form>, con condiciones
• <iframe>, con condiciones

AMP, ¿cómo?
#SGwebinar
• Código manual versión AMP
• Plugins CMS
• Servicios en línea

AMP, ¿cómo?
#SGwebinar
• plugin wbAMP – gratis en el JED
• Flujo de trabajo:
• El plugin convierte en tiempo real lo que puede
• Elimina lo demás
• Limita las interacciones, la navegación,…

1. Cosas que hacer
#SGwebinar

AMP, ¿cómo?
#SGwebinar
• Definir la estrategia
• ¿Objetivos? ¿Mostrar anuncios? ¿Inscripciones, ventas?
• ¿Traer de nuevo al visitante al sitio convencional?
• ¿Navegación? ¿Búsqueda?
• ¿Interactividad: formularios? ¿Comentarios?
• Seleccionar el contenido a AMPlificar

AMP, ¿cómo?
#SGwebinar
1. Mantenga AMP tanto como sea posible
• Menú de navegación, enlace a las paginas AMP
• Resultados de búsqueda AMP
• Enlaces AMP a los artículos Siguiente/Relacionado
Algunos prefieren vincular de nuevo al contenido
convencional lo antes posible.
Recomiendo una experiencia consistente. AMP es sobre
la mejor experiencia de usuario - y la conversión.

AMP, ¿cómo?
#SGwebinar
2. Máxima interactividad en AMP
• Formularios: comentarios, formularios de contacto
• E-commerce: Añadir al carrito de compras, navegación en
categorías / productos -> codificación personalizada
• Comentarios (Disqus) compartidos entre AMP y las páginas
convencionales

AMP, ¿cómo?
#SGwebinar
3. Atención al diseño
• Consistente con el sitio convencional
• Mantenlo Simple
• La mayoría de las cosas son posibles, a
pesar de las restricciones de
JavaScript (con componentes de
AMP)

#SGwebinar
Formularios
(Contacto)
Comentarios
(Disqus)

AMP, ¿cómo?
#SGwebinar
• Resumen de las cosas que hacer:
• Mantenga AMP tanto como sea posible
• Interactividad máxima en las páginas AMP
• Personalice lo más cerca posible del sitio
convencional

2. Cosas a evitar
#SGwebinar

#SGwebinar
• ¡La peor cosa posible que hacer!
• AMP está destinado a aumentar los
clics y la conversión
• Instalación básica del plugin = no
marca, el mismo aspecto que su
vecino
No se AMPlifica así!

Validar
#SGwebinar
• ¡Sólo se indexan páginas válidas!
• Paso 1: Search Console
https://search.google.com/search-console/amp
• Paso 2: Herramienta de pruebas de datos estructurados
https://search.google.com/structured-data/testing-tool/
Más útil = extensión Chrome AMP Validator

Medir / Analytics
#SGwebinar
• Las páginas AMP se pueden mostrar desde la caché
• Medición del tráfico + complejo
• “Rebotes” sesgados
• Sesiones sesgadas
• Utilice un ID Analytics separado
• Parece resuelto, API AMP client ID, disponible con todos
los plugins AMP adecuados

Promover / Compartir
#SGwebinar
• Las páginas AMP se pueden mostrar desde el caché
• Compartición de URL: no siempre la URL correcta
• Tendrá siempre sus propios botones de uso compartido
• Todos los enlaces AMP internos se dirigen a su sitio, no a la
caché de Google

Metadatos
#SGwebinar
• Carrusel / Mejores historias
• Metadatos específicos obligatorios
• Imagen por página: ancho mínimo 696px
• Logotipo del editor: altura 60px

Gracias ☺
#SGwebinar
• AMP
• https://www.ampproject.org
• https://ampbyexample.com/
• Lectura recomendada:
• #BrightonSEO, Aleyda Solis, @aleyda
• https://www.slideshare.net/aleydasolis/setting-amp-for-
success-at-brightonseo
slides: https://goo.gl/X2wW6W

Síguenos en
@SiteGround_ES
SiteGround España
SiteGround España
#SGwebinar
SiteGround España

Accelerated Mobile Pages (AMP) en Joomla!: Por qué y cómo

Recommended

Recommended

More Related Content

More from SiteGround España

More from SiteGround España (20)

Recently uploaded

Recently uploaded (14)

Accelerated Mobile Pages (AMP) en Joomla!: Por qué y cómo