En este artículo repasaremos qué es AMP (Accelerated Mobile Pages) y cómo configurar Google AMP para un blog de WordPress.
Este era precisamente uno de mis propósitos para el inicio de 2017: configurar Google AMP para Blogpocket.
Los accesos a blogs y páginas Web se realiza, cada vez más, mediante dispositivos móviles. Google también va a penalizar, a partir de enero de 2017, los sitios cuya usabilidad en dispositivos móviles no sea la adecuada.
El 53% de los usuarios móviles abandona un sitio web que tarda más de tres segundos en cargar. Eso significa que si no optimizas los tiempos de carga en dispositivos móviles, podrías estar perdiendo tráfico.
Esto ha supuesto una preocupación en Blogpocket y hemos dedicado espacio a proporcionar métodos y herramientas sencillas para optimizar los tiempos de carga, en general. Ahora hay que prestar especial atención al tiempo que tardan en cargar las páginas en dispositivos móviles.
Entonces, tenemos que resolver una problemática que posee dos caras:
- Acelerar el sitio web.
- Hacer el sitio mobile friendly
¿Qué te parecería si hubiese una herramienta que solventara ese doble problema de una sola atacada?
Pues esa herramienta existe ye conoce como Google AMP.
AMP es una iniciativa de Google y otras empresas para simplificar la estructura de los sitios Web, de manera que las páginas Web de contenido carguen mucho más rápido y su usabilidad, de cara a los dispositivos móviles, sea óptima.
¿Qué es Google AMP?
Google AMP es un proyecto de Google cuya finalidad es conseguir que las páginas web para móviles se carguen mucho más rápido.
¿Cómo se consigue eso? Básicamente, simplificando al máximo el código, eliminando todo lo superfluo y destacando el contenido.
En Blogpocket siempre hemos sido partidarios del minimalismo. Así que ¡nos gusta AMP!
Grabé un podcast con una introducción a AMP. Te invito a escucharlo a continuación.
Escúchalo en SoundCloud.
Además del audio anterior, con una introducción a AMP, te recomiendo que veas y escuches completo el siguiente vídeo. En él, Juan Felipe Rincón, responsable del equipo de Calidad de Búsquedas de Google, responde a algunas preguntas muy interesantes sobre la adaptación a dispositivos móviles y AMP.
Pero las páginas AMP no solo son buenas para optimizar la velocidad de carga sino que Google les da un tratamiento especial, mostrándolas en un slider en la parte superior de los resultados.
Esta es una de las páginas de Los Archivos de Blogpocket, en formato AMP y así se ve en un móvil:
Existen indicios de que Google ya considera las páginas AMP como un factor de posicionamiento. Pero, además de la oportunidad de ganar clics al aparecer en el carrousel (más bien orientado a webs de noticias, por el momento), veremos a continuación que podemos usarlas como alternativa a la versión responsive o la de plugins como WP Touch.
De esa forma, tendremos tres posibilidades para hace nuestro blog mobile frindly:
- Sitio responsive. Esta es la forma más sencilla de tener un sitio mobile friendly. Pero el theme elegido no debe arrojar errores de usabilidad. Asegúrate bien de esto último.
- Usar un plugin como WP Touch. Con esta opción usas un theme especialmente dedicado para móviles y que es diferente al que se muestra en escritorio. Con esta solución también debes asegurarte de que no tienes problemas de usabilidad. La ventaja es que, por ejemplo, con la versión de pago de WP Touch puedes eliminar ciertos plugins que puedes ser incompatibles con la usabilidad.
- Páginas AMP. Esta es una alternativa muy interesante porque, además de conseguir una versión de tu blog perfectamente adaptada a móviles y sin problemas de usabilidad, optimizas al máximo la velocidad de carga de las páginas. El inconveniente es que el theme es absolutamente minimalista, exclusivamente enfocado al contenido. Y es un proyecto en desarrollo por lo que también debes asegurarte de no tener errores en el test de prueba.
Configurar Google AMP para WordPress
Automattic, la empresa que está detrás de WordPress ha desarrollado un plugin que permite configurar Google AMP.
Sin embargo, este plugin no posee ninguna opción de personalización ni configuración alguna. Simplemente, tras su instalación, el usuario (¡y Google!) tiene acceso a «loquesea.com/post/amp». Es decir, se añade al final de cada URL el sufijo «/amp».
Si te estás preguntando si se provoca contenido duplicado, no te preocupes porque las páginas «/amp» llevan el correspondiente «link rel=»canonical»».
Como sabes, el atributo «rel=”canonical”» le dice a Google qué versión del contenido duplicado es la buena.
Lo que veremos, a continuación, es que existe otro plugin, que funciona con el de Automattic instalado, y que proporciona algunas opciones de configuración. Y, sobre todo, que te permite redirigir las páginas de tu blog, en dispositivos móviles, a las correspondientes páginas AMP. Y eso es una alternativa muy interesante para disponer de un blog mobile friendly y, además, con una velocidad de carga óptima.
Plugin oficial para configurar Google AMP
Para tener páginas AMP en tu blog, instala el plugin AMP pero no hace falta que configures nada 😉 .
Este plugin solo añade páginas AMP a las entradas de un blog, no a las páginas.
Y, como ya te he indicado, no puedes personalizar nada. Vamos a ver ahora qué plugin puedes instalar para terminar de configurar Google AMP y tener muchas más opciones.
Configuración del plugin «AMP for WP»
Instala el plugin AMP for WP. Este plugin solo funciona si tienes previamente instalado el oficial de Automattic, AMP.
Una vez instalado, ve a la nueva opción «AMP» del escritorio de WordPress.
Configuración general
Para tener configurar Google AMP, empezaremos yendo a la pestaña «General».
En dicha pestaña puedes configurar el logo y añadir el código de Google Analytics. También puedes activar la redirección de las páginas de las entradas del blog, en dispositivos móviles, a las de AMP.
Además, en la pestaña «General», existen opciones para lo siguiente:
- Crear página AMP para la frontpage. En sitios que tengan páginas de home y blog, y si quieres que la página del blog tenga AMP, pon el switch «Front Page» a «OFF».
- Enlace a «No-AMP» en el footer. Si quieres que el usuario tenga la posibilidad de cambiar a la versión no-AMP, pon en switch «Link to Non-AMP page in Footer» a «ON».
- Soporte RTL (right to left). Si necesitas activar el soporte de lenguaje RTL pon le switch «RTL Support» a «ON».
- AMP en páginas. Para activar AMP también en las páginas del blog activa la opción «AMP on Pages». Si activas esta opción, debes volver a guardar los enlaces permanentes, yendo a «Ajustes > Enlaces permanentes», en el escritorio de WordPress.
- Enlace a páginas «No-AMP» desde la cabecera. Para activar esta opción, pon a «ON» el switch «Non-AMP HomePage link in Header and Logo.
Diseño
Respecto al diseño, en la pestaña «Design» hay posibilidad de elegir entre dos esquemas, dentro del desplegable «Design Selector».
Y haciendo clic en el botón «Launch post builder» del apartado «Drag & Drop Post Builder» pasas a poder configurar la estructura de cada página AMP. Ver figura siguiente.
En este apartado, se pueden mover los elementos. Por ejemplo, colocar los metadatos del post debajo del título.
Es posible añadir o eliminar elementos, cambiar los colores del texto y el fondo de la cabecera; y elegir entre un esquema de color claro u oscuro.
Todos los cambios se previsualizan tanto para las versiones de escritorio como para las de tablets o smartphones.
SEO
En cuanto al SEO, se pueden añadir las etiquetas sociales y Open Graph desde la configuración que tengas implementada en el plugin Yoast SEO. Para ello, pon el switch «Add Meta Tags from Yoast» a «ON».
También puedes añadir la descripción de la meta etiqueta que tengas en Yoast SEO activando la opción «Yoast Custom Description for AMP page».
Menú
Haz clic en el enlace que aparece en esta pestaña para configurar el menú.
Lo ideal es que crees un nuevo menú para las páginas AMP, distinto al que muestras en tus páginas no-AMP. Para ello, ve a la pestaña «Editar Menús».
Después, selecciónalo en el desplegable «AMP menú» de la pestaña «Gestionar lugares».
Advertisement
Puedes añadir publicidad a tus páginas AMP.
Single
Aún puedes añadir más posibilidades para configurar Google AMP con esta pestaña.
Si quieres añadir los botones sociales, pon a «ON» el switch «Sticky Social Icons». Estos iconos aparecerán de forma flotante. Si quieres que aparezcan de forma fija, al pie de cada post, usa la opción «Social Icons» dentro de la personalización del diseño de páginas AMP (apartado «Diseño»).
Con «Next-Previous Links» a «ON» añadirás los enlaces de «anterior» y «siguiente» para navegar dentro de la serie de entradas del blog.
Finalmente, configura el tamaño de la imagen destacada, añade posts relacionados y los enlaces a categorías y etiquetas, si lo prefieres.
Social
En la pestaña «Social» eliges las redes sociales que aparecerán si has optado por los botones sociales en el apartado «Single» (tanto en la opción «Sticky Social Icons» como en las opciones adicionales para controlar el aspecto de las páginas individuales).
Structured Data
Personaliza aquí las imágenes por defecto de los datos estructurados.
Notifications
Si quieres mostrar el típico aviso de cookies, usa este apartado poniendo en «ON» el switch «Enable Notifications».
Traslation Panel
Y, finalmente, puedes traducir todos los textos a través de esta pestaña.
Validación
El último paso, antes de dar por buena la implantación de AMP en tu blog, es asegurarte de que tus páginas no poseen errores. Para ello, existe el validador de AMP: validator.ampproject.org.
La herramienta Search Console de Google también arroja los posibles errores que tengas en tus páginas AMP. Para ello, acude a «Apariencia en el buscador > Accelerated Mobile Pages».
¿Y si tengo un sitio de e-commerce?
AMP está especialmente pensado para sitios de noticias y blogs. Al hilo de esta duda, es revelador lo que se puede leer en la Web de «AMP for WP». Concretamente, en este artículo de su documentación: Guide to E-Commerce for AMP:
Configurar Google AMP se puede hacer en cualquier sitio y para cualquier plataforma. Sin embargo, el propósito de AMP es hacer la experiencia móvil mejor y más rápida.
Muchas personas creen que AMP es sólo para sitios de noticias y blogs, pero AMP también es apropiada para los sitios web de comercio electrónico. No obstante Google dijo: «AMP es un ajuste natural para el comercio electrónico, porque AMP hace que las páginas web carguen rápido, y las páginas rápidas ayuda con las conversiones de compra.»
En KISSmetrics.com se afirma que un sitio web de comercio electrónico que hace 100.000 dólares por día, potencialmente podría perder 2,5 millones de dólares en ventas cada año si una página tiene un retraso de ¡sólo 1 segundo!
Conclusiones
Así terminamos de configurar Google AMP para WordPress.
Pero, la pregunta del millón es ¿debemos habilitar las páginas AMP en nuestro blog?
Mi opinión es que sí. AMP es un proyecto especialmente enfocado al contenido, a lograr que las páginas con contenido carguen más rápido y sean usables.
Ahora bien, si no sales en el carrousel (y, al parecer, ahora solo salen los grandes medios periodísticos), AMP solo tiene sentido:
- Si Google posiciona mejor tu sitio por el solo hecho de tener implementado AMP. Esto son solo suposiciones, aunque algunos seos han experimentado mejoras en el ranking solo poniendo AMP en su sitio.
- Si usas las págínas AMP como versión mobile friendly de tu sitio. En este artículo te he explicado cómo configurar AMP para WordPress y usar las capacidades del plugin «AMP for WP» con este fin.
Es muy fácil con los dos plugins que acabamos de ver. Y, además, se resuelven a la vez los dos problemas asociados al mobile friendly.
- Páginas que deben cargar muy rápido en dispositivos móviles para no perder visitas. Ya sabemos que si un blog tarda en cargar, la gente no volverá.
- Usabilidad. Si las páginas para dispositivos móviles no son usables, entonces Google puede penalizarlas en el posicionamiento.
Lo importante es la velocidad de carga y la usabilidad. Da igual si lo logras con AMP u otro mecanismo, como vimos al principio (diseño responsive, plugin WP Touch, etc.). Pero AMP aporta el carrousel, dando mayor visibilidad a tu blog en móviles; así como un formato que te asegura la velocidad y la usabilidad.
En Search Console encontrarás información sobre los requerimientos y detalles de la implementacion de AMP: Directrices de la Búsqueda de Google para las páginas de AMP.
Estaré atento a tus ideas, sugerencias y experiencias, relacionadas con este artículo, en los comentarios.
SiteGround es el hosting de Blogpocket ¡pruébalo!:
Deja una respuesta