Cómo Google desde ayer ya muestra las páginas web con soporte AMP en los resultados de búsqueda móviles, vamos a explicar brevemente como activar AMP en WordPress.
El objetivo de las páginas AMP («Accelerated Mobile Pages») es que las páginas se carguen casi de forma instantánea en los móviles. Hay muchas webs lentas, de hecho, la mayoría de la gente que usa Internet a través de un móvil siguen utilizando conexiones 2G y 3G.
¿Cómo consigue AMP que las páginas se carguen más rápidamente? Restringiendo lo que se puede mostrar en una página HTML; básicamente es una versión de la web sin elementos bonitos de diseño, prestando toda la atención al contenido y no en la forma que se presenta.
Las páginas AMP parecen versiones reducidas de las páginas que no contienen nada más que el contenido importante.
No funcionan todos los servicios de publicidad ni tampoco todos los servicios de analítica y se eliminan todos los enlaces «leer más» que pueda tener el tema.
O sea, una página AMP es una página sin adornos.
La verdad es que las webs pierden su atractivo visual y personalmente no me convencen mucho; pero es lo que Google está potenciando. Y si tenemos una web donde se publiquen noticias o un blog, es imprescindible implementar AMP en algún momento. Cuanto más tardemos, más desventaja tendremos frente a los que compiten por las mismas palabras que nosotros y que si que lo implementen.
Nosotros lo estamos probando en algunos WordPress y cuando consideremos que esto está estable lo incorporaremos también en este blog.
¿Qué implica exactamente el uso de AMP en una web?
Lo más importante es que AMP restringe mucho el uso de Javascript, haciendo que formularios, comentarios y otro elementos no funcionen. OJO: Esto se puede evitar usando Iframes (aquí hay más información) sobre este tema, aunque de momento no se puede recomendar su uso.
O sea, que en un blog de WordPress NO funcionarán los comentarios
También es muy posible que haya que hacer ajustes en los CSS, ya que los CSS in-line deben ocupar menos de 50KB y las fuentes personalizadas hay que cargarlas con una extensión especial de AMP (incluida en el plugin del que vamos a hablar luego: PageFrog.
Los elementos multimedia también tienen sus complicaciones. Las imágenes tienen que usar el componente amp-img e incluir siempre la altura y anchura. Si se usan GIFs animados hay que usar el componente amp-anima extended.
Con los vídeos HTML5 pasa lo mismo que con las imágenes, hay que usar un componente llamado amp-video; y para los vídeos de YouTube: amp-youtube.
Para mostrar un carrusel de imágenes se puede usar el componente amp-carousel y cada red social (Facebook, Twitter, Instagram, Pinterest y Vine) tienen su propio componente extendido.
Google Analytics se puede añadir también, pero por cada implementación de AMP solo se puede añadir una forma de medir. Hay más información aquí.
Todos estos componentes no son difíciles de usar, pero hay que tenerlo en cuenta.
¿Cómo descubre Google que una página tiene soporte AMP?
Mediante una etiqueta rel canonical a la versión AMP con rel=»amphtml».
En algunas plataformas el soporte AMP debería tener meta-datos Schema.org para especificar el contenido de la página (ahora mismo: artículo, receta, revisión y video). Hay más información en la página AMP Discovery. También indica que el marcado Schema es obligatorio para aparecer en el carrusel de noticias de Google Search.
¿Qué redes de anuncios se pueden utilizar en AMP?
Actualmente AMP (mediante el componente amp-ad extended): Amazon A9, AdReactor, Google AdSense, AOL AdTech, Google Doubleclick, Flote, Tabula, Adform, DotAndAds, lista, Smart AdServer y Yieldmo. Hay ejemplos aquí: archivos .md en la página de AMP en GitHub.
Resumen de cómo funciona AMP
AMP consiste de tres partes básicas:
- AMP HTML: Un versión reducida de HTML con algunas etiquetas y propiedad específicas y mucha restricciones. Aquí está el marcado que toda página AMP debería tener.
- AMP JS: Una framework Javascript para páginas móviles. Sobre todo maneja la carga asíncrona y los recursos. OJO: No se permite el uso de Javascript externo en AMP.
- AMP CDN: Es opcional usar un CDN que cachea las páginas AMP y automáticamente realiza mejoras de rendimiento.
O sea: De cada artículo habrá dos versiones, una versión «normal» que verán los usuarios de forma estándar y otra versión AMP de la página.
¿Cómo activar el soporte AMP en WordPress
Para activar el soporte de AMP, Automattic (la empresa detrás de wordpress.com) ha creado un plugin llamado AMP. Al activar el plugin todas las URLS automáticamente reciben una URL con AMP que se muestra al añadir /amp/ al final de la misma. Lo malo de este plugin es que solo permite personalizar el logo a través de la apariencia del tema, porque el plugin en si mismo no tiene opciones.
¿Cómo podemos crear páginas AMP más bonitas en WordPress
Utilizando un plugin llamado PageFrog.
OJO: La configuración de PageFrog aparece en el menú lateral en «Mobile Formats», por tanto no busquéis por «PageFrog», que no lo encontrareis.
Este plugin añade la posibilidad de configurar la apariencia de las páginas AMP (Movile Formats / Styling): El encabezado, el título, el cuerpo y el footer.
Lo más importante: Activar el soporte de Google Analytics (si usais Analytics) en AMP dentro de PageFrog: Mobile Formats / Analytics.
Y finalmente nos deja configurar anuncios de Facebook y Google Adsense (Mobile Formats / Ads).
¿Yoast SEO funciona de forma automática con AMP?
No. Para que las meta-etiquetas de Yoast se muestren correctamente, hay que instalar y activar el plugin Glue for Yoast Seo AMP.
Y con esto ya tendremos el AMP configurado correctamente en nuestro WordPress. A partir de entonces esperar a que aparezcan los primeros resultados AMP en Google.
¿Cómo validar la versión de AMP?
Validar AMP con Google Search Console / Google Webmaster Tools
Desde hace algunos días hay una sección nueva en Google Search Console llamada «Accelerated Mobile Pages» donde se muestra si Google ha detectado correctamente las versiones AMP de los artículos enlazados con rel=»amphtml».
OJO: Esto es lento. Si se hacen cambios o se implementa AMP puede tardar días en aparecer.
Validar AMP con Google Chrome
Dentro de Google Chrome cargamos una página AMP y se añade «#development=1» al final de la URL. Pulsamos Control + Shift + I para abrir las herramientas de Desarrollo de Chrome y vamos a consola. Puede ser necesario recargar la página pero debería de mostrar «AMP validación successful» o en caso contrario mostrar una lista de problemas a solucionar.
OJO: Los problemas de validación más importantes vienen de los anchos y altos de las imágenes.
Con esta información ya sabéis algo más de AMP y cómo implementarlo en WordPress de forma sencilla y rápida.
Dejarnos preguntas en los comentarios. Iremos comentando conforme vayamos teniendo resultados de los experimentos que estamos haciendo.
P.D. Todos nos preguntamos: ¿Será el AMP como el AUTHORSHIP? ¿Un juguete que Google prueba y abandona en uno o dos años? ¿Nos vamos a gastar dinero en implementarlo para que después lo eliminen? Cómo de momento va a dar ventajas en los resultados de búsqueda móviles frente a los que no lo tengan, creemos que es IMPRESCINDIBLE incorporarlo. A lo mejor no ahora que es nuevo, nuevo; pero si en unas semanas cuando hayamos visto si funciona correctamente. Y si tu web está en WordPress, es sencillo y rápido.
Imágenes: gui jun peng, Sasin Paraksa, alphaspirit, alphaspirit
El mejor articulo sobre el tema en todo Internet incluyendo los que están en ingles, que gusto da ver gente que prioriza el contenido sobre inclinaciones personales. Muchas gracias
Gracias por tu comentario. Nos alegra que te ha parecido tan interesante.
El artículo esta muy completo. Ufff, habrá que ponerse las pilas 😀
Hola Fabian. Eso es verdad, habrá que ponerse las pilas con este tema. En WordPress es sencillo, aunque hay bastantes temas que seguimos investigando (por ejemplo los códigos de remarketing de Google, el píxel de remarketing de Facebook, etc). Si no se usa WordPress el tema es más complicado. Mucho más complicado.
Hola,
En Pagefrog estaba activándolo en un blog con algo más de 10000 entradas, viendo que ya llevaba un buen rato aplicándolo a las entradas ya publicadas estoy probando con otro blog con 36 entradas.
La cuestión es que ya lleva rato aplicando a estas 36. En vuestro caso también tarda tanto?
Hola Toni. Nosotros no hemos tenido ningún problema con retardos al activarlo. Lo tenemos en blogs con pocas y con muchas entradas y siempre ha sido instantáneo o al menos no nos ha llamado la atención que haya tardado.
Siento que no te podamos ayudar con este tema.
Qué buen artículo! Sumamente claro y completo. Digno de compartir. Saludos
Me alegra que te haya parecido interesante y digno de compartir. Gracias.
Gracias por este artículo. Todo muy bien explicado. A mi los errores que me aparecen al verificar son estos, pero sin embargo Google Search Console no me lanza error alguno.:
validator.js:407 AMP validation had errors:
GC @ validator.js:407
(anonymous function) @ validator.js:419
f.Ta @ validator.js:335
BB @ validator.js:338
qB.vd @ validator.js:338
pB @ validator.js:333
validator.js:407 /tenemos-articulos-instantaneos-en-facebook/amp/:222:57 The attribute ‘ref’ may not appear in tag ‘a’.
GC @ validator.js:407
(anonymous function) @ validator.js:420
f.Ta @ validator.js:335
BB @ validator.js:338
qB.vd @ validator.js:338
pB @ validator.js:333
¿Alguna idea?
Saludos y gracias
Hola Juan. Nos alegra que te haya gustado el artículo. Esos errores no sabemos qué son. Lo importante es que Google en Search Console no de errores de validación. Cómo en tu caso es así, nosotros no nos preocuparíamos en exceso.
No los da pero tampoco resuelve los amp en dispositivos móviles y ya no sé por qué puede ser
Hola Juan A. A nosotros nos funciona correctamente en todos los sitios donde lo tenemos implementado y sin hacer nada más que activar los plugins. Sentimos que no podamos ayudarte para solucionarlo.
Hola Ramon, excelente aporte y gran ayuda para todas las personas que estan trabajando en el SEO. con AMP de Google el contenido que uno creará en su nuestro sitio web o blog será mucho más accesible para todos los dispositivos móviles y eso Google lo valorará.
Gracias por el aporte.
Hola
Gran artículo. Mucha información para novatos como yo!!
He leído mucho al respecto de AMP. Principalmente «pros y contras»
Parece ser que AMP está enfocado a artículos y periódicos online.
¿Quizás para blogs con contenido más «perenne» no es demasiado adecuado?
Actualmente mi blog tiene instalado AMP pero estoy pensando en quitarlo. Esto generará errores 404, ¿no?
¿Hay alguna solución oficial al respecto?
Un saludo y gracias
Hola Javi. Para mi AMP es interesante sobre todo para periódicos online (y creo que ni eso). No lo veo adecuado para blogs con contenido más «perenne» porque no fomenta la lectura de otros contenidos. Si que hay páginas AMP con un diseño muy trabajado y que si que puede incitar a leer más contenidos, pero normalmente no es así. A mi lo que me gustaría es que AMP permite explorar contenidos y este sea su enfoque, pero de momento no es así (y tampoco parece que sea lo que Google quiera).