AmpForWP: Accelerated Mobile Pages en WordPress
Ahora que ya has aprendido a encontrar ideas útiles para tus contenidos ¿Quieres que tu sitio web vuele?
Entonces AMP en WordPress te interesa. Al menos si los usuarios de tu web usan el móvil 🙂
Sigue leyendo.
Descubre AMP – Accelerated Mobile Pages
¿Qué es AMP?
Resumiendo mucho, AMP es una tecnología de publicación web liderada por Google. AMP significa Páginas de Móvil Aceleradas (Accelerated Mobile Pages), de lo que se puede deducir que el proyecto busca una carga muy rápida de las páginas web en los dispositivos móviles. De esta manera podrías llegar a mejorar la experiencia de tus usuarios.
Consta de una serie de recursos liberados como código open source que permiten desarrollar páginas web ligeras y estéticas. Las páginas AMP se codifican como un HTML simplificado, sin ficheros JavaScript ni hojas de estilo CSS externas.
A principios de 2019 ya había más de 25 millones de dominios que empleaban la tecnología AMP. Y parece que sigue creciendo.
Componentes de la tecnología AMP
Para crear una web AMP hay que considerar los siguientes componentes principales:
- AMP HTML: es una especie de HTML reducido pero con rendimiento contrastado.
- JavaScript de AMP: se asegura de que las páginas AMP HTML carguen a toda velocidad.
- Caché de AMP: permite mostrar páginas AMP HTML que estén guardadas en caché.
Página de ejemplo AMP
Para que te puedas hacer una idea de cómo es el código de una página web, a continuación te pongo una página de ejemplo. Si sabes algo de HTML, verás que el asunto no se complica demasiado.
Hay alguna etiqueta obligatoria y otras que cambian respecto a HTML. Por ejemplo, para insertar una imagen has de utilizar la etiqueta <amp-img> en lugar de <img>.
Si lo encuentras complicado, no te preocupes, hay muchas herramientas que hacen fácil crear un sitio web AMP. Por lo menos en WordPress que está el plugin AmpForWp, como verás más adelante.
Ventajas de AMP
Estos son los beneficios más destacados que lograrás pasando tu web a AMP:
- Navegación web más rápida para tus usuarios. Las páginas se cargan mucho antes en su dispositivo móvil.
- Tus usuarios es probable que pasen más tiempo en la página y se animen a visitar otras páginas de tu sitio web (bajaría el bounce rate).
- Fruto de lo anterior, se mejora la experiencia de usuario (UX), un punto fundamental al diseñar sitios web.
- Tendrás más posibilidades de aparecer en diferentes secciones de los resultados de búsqueda de Google, como en los fragmentos destacados.
- En general mejorará el posicionamiento SEO de tu web, al ser la velocidad de carga de la página uno de los factores fundamentales. Y más ahora que Google antepone el móvil al escritorio (Mobile-First).
- Tendrás menos sobrecarga en el hosting y comunicaciones, ya que Google cachea y presenta directamente las páginas AMP desde sus servidores, sin pasar por los tuyos en cada navegación de usuario.
Inconvenientes de AMP
Sí, también tienes desventajas con AMP. Estas son las más relevantes:
- La apariencia de las páginas AMP está limitada, ya que no podrás utilizar hojas de estilo externas.
- También quedan reducidas las funcionalidades de la página, puesto que tampoco te permite emplear JavaScript.
- Limitaciones en la monitorización con Google Analytics, que poco a poco parece que se van subsanando.
- Las páginas que se sirven están cacheadas, por lo que si actualizas frecuentemente el contenido, tus visitantes no siempre estarán accediendo a la última versión.
- La implementación de AMP no siempre es sencilla, depende mucho del entorno. Incluso en un CMS como WordPress, en ocasiones puede dar problemas de compatibilidad con otros plugins.
¿Cuándo utilizar AMP en un sitio web?
Te recomiendo que pruebes a utilizar AMP en tu web si cumples que:
- No tengas un diseño web complejo, con múltiples hojas de estilo.
- No sean imprescindibles funcionalidades basadas en JavaScript, tal y como sucede en muchas tiendas online.
- El cambio no te suponga un quebradero tecnológico.
AMP en WordPress
Plugins de AMP en WordPress
Si tu sitio web está desarrollado con WordPress, la fórmula para disfrutar de AMP es sencilla: utiliza uno de los plugins que permiten una adaptación rápida y directa.
Tienes bastantes opciones disponibles, siendo estas las más extendidas:
- AMP oficial. Es el plugin considerado oficial y hasta la fecha tiene el mayor número de instalaciones (más de 300.000). Acceso al plugin AMP.
- AmpForWp. Te lo recomiendo para arrancar. Más de 100.000 instalaciones. Acceso al plugin AmpForWp. Sigue leyendo para descubrir lo esencial de este plugin.
- Better AMP. Más de 10.000 instalaciones. Por si los anteriores no te convencen. Acceso al plugin Better AMP.
AmpForWp para WordPress
Me quedo con este plugin porque es ideal para arrancar y poner en marcha AMP con muchas funcionalidades disponibles. Aunque te advierto que también ofrecen muchas características y herramientas premium de pago.
La idea es que a partir de tu contenido (entradas y páginas, principalmente) este plugin de WordPress genera una versión AMP. El contenido será el mismo siempre que en el HTML origen no hagas uso de excesivas florituras de JavaScript o CSS. La dirección será la misma (es decir, como la URL canónica) pero concatenando al final “/amp”. De esta forma una página como esta:
https://www.mussamarketing.com/agencia-diseno-web/seguridad-wordpress-acceso-2019/
La transformaría, cuando se sirviera en modo AMP, a esta URL:
https://www.mussamarketing.com/agencia-diseno-web/seguridad-wordpress-acceso-2019/amp
La instalación es tan sencilla como cuando añades cualquier otro plugin en WordPress. Busca AMP for WP y te saldrá el primero.
Configuración de AmpForWp
En el menú de WordPress te saldrá una nueva sección denominada AMP, con múltiples opciones de configuración. Te indicamos qué tienes que tocar para tener una primera versión AMP decente de tu web.
Settings -> General
Añade el logo de tu web, para que aparezca en todas las páginas para móvil.
Selecciona el tipo de contenido que deseas que se sirva como AMP para la versión móvil. Te recomiendo limitarlo de inicio a las entradas (posts). Si no tienes contenido de blog, prueba a poner las páginas y, cuando estés más rodado en AMP, te lanzas también a la página principal.
Settings -> Performance
Activa la opción de Minify para que se mejore todavía más el tiempo de carga de tus páginas.
Settings -> Analítica
Si utilizas Google Analytics u otra herramienta similar, la puedes activar en este apartado.
Settings -> Advanced Settings
Habilita la redirección a móviles para que cada vez que se entre a una página no-AMP desde un móvil, se presente la página AMP. Ten cuidado en esta parte de la configuración ya que hay que saber muy bien lo que se hace; así que lo puedes dejar todo por defecto. En todo caso, hay opciones muy interesantes como la posibilidad de poner código personalizado en diferentes partes de las páginas AMP.
Settings -> Translation Panel
Si tu web no está en inglés, no te olvides de traducir todos los textos de esta página de configuración. Para traducciones avanzadas puedes hacer unos de ficheros POT.
Cambiamos de zona…
Design -> Themes
Hay cuatro temas AMP gratuitos, para arrancar elige el que más te guste.
Sé que está un poco limitado pero para un arranque con AMP seguramente sea suficiente para tu proyecto. Por supuesto, desde AmpForWp ofrecen muchos temas y layouts adicionales de pago.
Design -> Global
Elige el color corporativo de tu web para que los enlaces estén en sintonía con tu imagen. También puedes poner la clave de las fuentes de Google.
Simplemente con esto ya tendrías una primera versión AMP de tu web, que puedes comprobar fácilmente accediendo a tu sitio desde un móvil o tablet.
Resumen AMP en WordPress
AMP es una tecnología que puede impulsar tu sitio web en ciertos aspectos, sobre todo por una mejora en la velocidad de carga del contenido para el usuario. Te animo a ponerlo en marcha con el fin de que puedas valorar si se adecua a tu proyecto. Con el plugin AmpForWp tienes una forma rápida de hacerlo en WordPress.
No te olvides de comentar cualquier aspecto en el que te gustaría que profundizara en este tema de AMP para WordPress. Y tampoco te olvides de contar con Mussa Marketing para cualquier reto web que se te plantee.
13/02/2019 @ 11:04
Un artículo genial! muchas gracias por compartirlo.
Una pregunta, lo acabo de instalar y he hecho los cambios que sugerís, pero no veo cambios en mi web.
¿Puede ser que solo vaya a ver los cambios en los post que publique en adelante?
Gracias!!
13/02/2019 @ 11:46
Hola Carmen, me alegro de que te haya gustado el artículo.
Hemos visto tu web y parece que sí lo tienes configurado. Para probarlo, accede a una entrada de tu blog y añade, al final de la dirección, lo siguiente: «/amp»
En realidad, si en «Settings -> Advanced Settings» has habilitado la casilla de «Mobile Redirection», cada vez que entres desde un móvil, te tendría que hacer la redirección automática de la versión no-AMP a la versión AMP. Por favor, revísalo y nos cuentas.
Saludos.
14/02/2019 @ 16:25
Muchas gracias Gralen, no había activado la redirección. Pensaba que cambiaría el aspecto de mis entradas al minimizar los CSSs, pero no han variado nada ??
En cualquier caso, muchas gracias por el artículo, no conocía la herramienta y me será de gran utilidad ?
14/02/2019 @ 17:00
Se acaba de actualizar y ya funciona! Efectivamente, ha cambiado la apariencia, pero hemos pasado de tener un 6 en pagespeedinsights a tener un 62!!! mil gracias ??
14/02/2019 @ 17:36
Genial Carmen, buen trabajo.. Seguro que, con una web más rápida, Google os recompensa con más visitas.
Te animo a seguir a Mussa Marketing en las redes sociales, como en Facebook. Gracias.