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?
  • Componentes de la tecnología AMP
  • Ejemplo de página AMP
  • Ventajas de AMP
  • Inconvenientes de AMP
  • ¿Cuándo utilizar AMP en un sitio web?
• AMP en WordPress
  • Plugins de AMP para WordPress
  • AmpForWp para WordPress
  • Configuración de AmpForWp

 

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:

1. No tengas un diseño web complejo, con múltiples hojas de estilo.
2. No sean imprescindibles funcionalidades basadas en JavaScript, tal y como sucede en muchas tiendas online.
3. 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.