¿Cómo instalar y configurar AMP en WordPress?

Sin embargo, aunque sea bastante sencillo, debemos conocer las limitaciones o restricciones de la tecnología AMP. Por un lado, para ser consciente que hay partes de una página web que no pueden trasladarse a AMP; y, por otro, para saber configurar adecuadamente el plugin y conseguir el mejor resultado posible.

En este artículo, vamos a ver cómo instalar un plugin en WordPress y cómo configurar paso a paso sus opciones más importantes para conseguir que la versión AMP de nuestras páginas web mantenga la funcionalidad y optimizaciones de la versión completa.

     

 ¿Cómo funciona AMP?

A grandes rasgos, sabemos en qué consiste AMP (acrónimo de “Accelerated Mobile Pages”): “simplificar” una página web, según un conjunto de pautas y recomendaciones, que afectan a su estructura y contenido, para que se descargue rápidamente en dispositivos móviles y sea más fácil de leer en pantallas de pequeño tamaño.

En general, la versión AMP de una página web carece de elementos habituales como scripts, hojas de estilo CSS, imágenes decorativas, barra lateral, botones de compartición o formulario de comentarios.

En general, no necesitamos saber mucho más sobre qué hace AMP con el contenido y representación de las páginas web, pero sí que es importante que tengamos claro los siguientes aspectos de cómo operan las versiones AMP de una página web:

1. No hace falta crear, o “duplicar”, las páginas web y mantener dos versiones separadas de éstas (una completa y otra AMP), sino que la versión AMP se genera automáticamente a partir de la versión completa (gracias al plugin).


2. Tampoco es necesario crear una nueva dirección web para la versión AMP de las páginas web, sino que se toma automáticamente de la dirección web de la página web original, añadiendo la cadena “/amp/” al final.


3. El rastreador de Google detecta e indexa automáticamente cuando un sitio web tiene versiones AMP de sus páginas, sin que tengamos que hacer ninguna operación adicional para que aparezca en los resultados de búsqueda.


4. Google, con objeto de mejorar aún más la velocidad de descarga de las páginas AMP, las copia en servidores propios alrededor del mundo, de forma que cuando un usuario accede a esa página, en realidad la descarga desde uno de estos servidores (el más cercano y rápido al usuario).


5. Cuando un usuario hace una búsqueda desde un móvil, las páginas web que tenga una versión AMP aparecen etiquetadas con un símbolo, que informa al usuario que esa página se descargará y verá mejor en su dispositivo:

Haz clic en la imagen para ampliarla  

Con estas consideraciones, queda patente que cuando instalemos un plugin AMP en WordPress, nuestra principal tarea y preocupación será configurarlo, y no preocuparnos de detalles de implementación o funcionamiento de AMP.

 

 ¿Cómo validar si una página AMP es correcta?

Como es lógico, después de instalar y configurar un plugin AMP en WordPress, vamos a querer comprobar si funciona y que las páginas AMP se generan correctamente.

Una forma, la más evidente, es introducir la dirección web de la página AMP (es decir, terminada en “/amp/”) y comprobar que se muestra correctamente en el navegador, con toda la información y funcionalidad importantes de la página web original.

Sin embargo, lo que visualmente parece que está bien, puede tener errores internos en la codificación de la página AMP que afecten negativamente cuando Google rastree e indexe esa página.

A través de la opción AMP de la consola de búsqueda de Google, podemos ver qué páginas AMP tienen algún error, para identificarlo y corregirlo, como vemos en la siguiente imagen:

Haz clic en la imagen para ampliarla  

Sin embargo, este método nos obliga a esperar a que Google rastree, analice e indexe esa página. La espera no suele ser demasiado larga, pero tampoco es inmediata; podría tardar incluso días hasta indexar todas las páginas AMP del sitio web o la que estemos interesados de revisar.

Para no tener que esperar este tiempo, podemos instalar en el navegador Chrome la extensión “AMP Validator”, que añade un símbolo (similar a un rayo) a la barra de iconos.

Cuando accedemos a una página AMP, este símbolo puede adoptar dos colores: verde, para indicar que no hay ningún error AMP; o rojo, cuando ha detectado uno o varios errores.

En este caso, también nos muestra qué errores ha detectado y su localización dentro del fichero de esa página AMP:

 

 Plugins AMP para WordPress

Como decíamos, con los plugins AMP podemos integrar esta tecnología en un sitio web WordPress sin necesidad de conocimientos técnicos avanzados ni tener que modificar lo que ya existe en el sitio web.

A la hora de seleccionar qué plugin AMP instalar en un sitio web, distinguimos dos grupos, en función de las características funcionales del sitio web:

• Sitios web pequeños o principalmente informativos, en los que apenas hay interacción con el usuario (como formularios o comentarios), o funcionalidades adicionales (como anuncios o scripts). En este caso, un plugin básico como AMP resulta más que suficiente, con una configuración muy básica.
  Además de este plugin, también hay que instalar Glue Yoast SEO & AMP, para integrar la optimización SEO de las páginas web completas originales.


• Sitios web grandes, con elementos interactivos y dinámicos, que necesitamos que permanezcan operativos en la versión AMP de las páginas web.
  En este caso, el plugin AMP for WP ofrece una solución muy completa, para integrar y configurar estas funcionalidades, junto con la posibilidad de instalar extensiones para integrar funcionalidades de plugins como WooCommerce, Contact Form 7 o Star Ratings.

 

 Instalación y configuración del Plugin AMP for WP

El primer plugin (AMP) que se indica en la sección anterior es muy básico, y prácticamente autoexplicativo, que no requiere una asistencia externa ni un tutorial paso a paso para instalarlo ni configurarlo (a excepción de instalar también el plugin Glue Yoast for SEO & AMP).

En cambio, AMP for WP tiene muchas opciones de configuración y es el que veremos a partir de ahora, mostrando cómo configurar los elementos más importantes y habituales en un sitio web.

El siguiente vídeo explicativo muestra un recorrido general de la instalación y configuración de este plugin, destacando los elementos más importantes que, casi en cualquier sitio web, deberíamos personalizar:

 

Veamos a continuación, paso a paso, cada una de las pestañas de configuración de AMP for WP, con los valores recomendados para cada opción (que se muestra en los pantallazos) y los aspectos que debemos tener en cuenta para personalizar las páginas AMP a las características de nuestro sitio web.

 

 Instalación de AMP for WP en WordPress

Haz clic en la imagen para ampliarla  

El plugin está en el repositorio de WordPress, por lo que su instalación y activación sigue el proceso habitual desde el panel de control.

Esto es, dentro del menú Plugins->Añadir nuevo, buscamos el texto “amp” y, de entre los plugins que muestra, instalamos “AMP for WP – Accelerated Mobile Pages” y, una vez instalado, lo activamos normalmente.

Desde este momento, podemos acceder a sus opciones de configuración desde el propio panel de Plugins de WordPress, o desde el nuevo menú “AMP” que aparece en el menú lateral de WordPress:

 

 Selección del tema de visualización (pestaña de diseño)

Haz clic en la imagen para ampliarla  

Antes de nada, debemos decidir cómo queremos que se visualicen las páginas AMP, seleccionando uno de los temas que proporciona este plugin.

Disponemos de varios temas, como vemos en la imagen anterior, pero solo uno es gratuito. El resto pertenecen a la versión PRO, por lo que solo podemos seleccionarlo previo registro y pago del plugin.

Una vez seleccionado el tema, podemos personalizarlo para hacerlo coherente con el diseño del sitio web principal, como colores, logos, tipos de letra, etc., para distintos componentes o elementos de diseño, como se muestra en la pestaña de diseño en la imagen anterior: cabecera, pie, post, página, etc.

 

 Botones de compartición social

Haz clic en la imagen para ampliarla  

Dentro de la pestaña de diseño, destaca la opción “Social”, que nos permite incorporar botones de compartición en las redes sociales dentro de las páginas AMP. Si no usamos esta opción, los usuarios que visiten las páginas AMP no podrán compartirla directamente, aunque sí tengan esta opción en las páginas web completas.

La configuración es muy sencilla. Tan solo debemos indicar en qué lugar de la página queremos que se muestren los botones de compartición y seleccionar en qué redes sociales el usuario podrá compartir las páginas AMP.

 

 Pestaña de configuración del plugin

Haz clic en la imagen para ampliarla  

En la pestaña de configuración (“Settings”) se despliega el menú con todas las opciones de configuración del plugin. Como se puede ver en la imagen anterior, dispone de muchas opciones, agrupadas por el tipo de configuración o elemento para cada grupo de opciones.

En los próximos apartados, vamos a revisar cada uno de estos menús y, para cada uno de ellos, los pantallazos mostrarán los valores recomendados para cada parámetro, válido para la mayoría de sitios web.

Sin embargo, no debemos limitarnos a marcarlos a ciegas, sino comprobar que el valor se ajusta a las características y funcionalidades de nuestro sitio web (por ejemplo, el proveedor de analítica web que utilicemos).

 

 Configuración general

Haz clic en la imagen para ampliarla  

En este apartado, configuramos los parámetros generales de AMP:

• El logo de nuestro sitio web, que se mostrará en el lugar reservado para ello en el tema que hayamos elegido en la pestaña de Diseño. Es recomendable marcar que el logo pueda cambiar de tamaño (“resize”), para que se adapte mejor al tamaño de la pantalla del móvil.


• Soporte AMP, para marcar qué páginas o tipo de páginas tendrán una versión AMP. En general, vamos a querer que sean todos los posts, páginas y la portada principal (homepage), pero también podemos especificar únicamente tipos de posts personalizados (si nuestro sitio web los tuviera).

 

 Soporte de Anuncios AdSense

Haz clic en la imagen para ampliarla  

Si nuestro sitio web tiene anuncios AdSense, éstos no aparecerán en la versión AMP, salvo que los configuremos a través de esta opción. El plugin nos permite insertar hasta 6 anuncios por página, en distintas ubicaciones (debajo de la cabecera, debajo del pie, debajo del contenido, etc.).

Para cada anuncio que activemos, debemos introducir los códigos del proveedor de anuncios AdSense (Data AD Cliente y Data AD Slot), así como las dimensiones (ancho por alto) del anuncio.

Si utilizáramos otro proveedor de anuncios, podemos instalar una extensión del plugin (“Ads for WP”), que amplía la lista de proveedores soportados y facilita aún más su gestión.

 

 Optimización SEO para AMP

Haz clic en la imagen para ampliarla  

Como es lógico, queremos que el esfuerzo dedicado a optimizar el posicionamiento SEO de nuestras páginas web también repercuta en sus versiones AMP. Esta opción de configuración nos permite hacerlo.

Para ello, debemos seleccionar el plugin SEO que estemos utilizando (en la imagen anterior, Yoast) e indicar qué datos y valores de la optimización SEO se incorporarán también en las páginas AMP.

En general, marcaremos todas las opciones, incluidas las referencias “canonical” si las estuviéramos utilizando en el plugin SEO.

 

 Soporte para la analítica web

Haz clic en la imagen para ampliarla  

Si utilizamos algún servicio de analítica web (cosa que deberíamos hacer, dicho sea de paso), tampoco estará disponible en la versión AMP por defecto, sino que debemos configurarlo a través de esta opción.

El plugin AMP for WP ofrece soporte a diversos servicios de analítica web. Para activarlos, tan solo debemos marcarlo (en la imagen, se ha marcado Google Analytics) e introducir nuestro identificador de seguimiento.

Esta operación deberemos hacerla para cada proveedor, en caso de que utilicemos varios.

 

 Soporte de Datos Estructurados

Haz clic en la imagen para ampliarla  

La información contenida en los datos estructurados es importante porque permite a los rastreadores de Google reconocer e identificar la semántica de los distingos bloques de información de las páginas, que puede favorecer al posicionamiento orgánico de la página o la creación de fragmentos enriquecidos.

Los datos estructurados se identifican e insertan dentro de cada página, como parte del código y los ficheros de los temas, a partir del contenido de éstas.

En este apartado configuramos aspectos generales que afectan al sitio web en su conjunto.

Concretamente, el tipo de datos Schema para los posts (normalmente, blogposting) y las páginas (normalmente, webpage), así como el logo y datos de la imagen por defecto de los posts.

 

 Consentimiento de Cookies

Haz clic en la imagen para ampliarla  

Otro aspecto que no debemos olvidar es informar al usuario sobre la protección de datos y el consentimiento para el uso de cookies. En el caso de que el script o plugin que utilicemos en el sitio web no tenga soporte AMP, esta opción nos permite activar y configurar todo lo relativo al consentimiento de cookies.

Para ello, tan solo debemos activar la casilla “GDPR Compliancy” e introducir la imagen, los textos y los enlaces que debe leer y aceptar el usuario para continuar la navegación por las páginas AMP.

 

 Activación de notificaciones Push

Haz clic en la imagen para ampliarla  

Las notificaciones Push permiten informar a los usuarios de un sitio web de sus novedades y últimas publicaciones en tiempo real, mostrando un cuadro emergente de notificación en su pantalla, sin necesidad de tener que visitar el sitio web.

El plugin AMP for WP ofrece la posibilidad de incorporar este servicio de notificaciones si utilizamos el proveedor OneSignal, para lo cual debemos activarlo e introducir el identificador (“APP ID”) que nos proporciona OneSignal. A continuación, introducimos los textos de suscripción y cancelación que se muestran en los cuadros de notificación.

 

 Funcionalidades extra: formularios, comentarios, eCommerce...

Haz clic en la imagen para ampliarla  

Hasta ahora, hemos visto características que el plugin AMP for WP ofrece en su paquete básico de forma gratuita. Sin embargo, hay varias opciones de este menú que requieren la adquisición e instalación de una extensión adicional.

En cada caso, en función del plugin (como Contact Form o Gravity, para los formularios) que estemos utilizando o del proveedor extetno (como Disqus, para los comentarios), debemos descargar la extensión correspondiente e instalarla.

Para los comentarios, el plugin AMP for WP permite incluir un enlace que lleva a la versión completa de la página web, para que allí el usuario pueda introducir su comentario. Conseguimos interacción con el usuario, pero a costa de perder compatibilidad AMP.

 

 Artículos instantáneos de Facebook

Haz clic en la imagen para ampliarla  

Si utilizamos el servicio “Instant Articles” de Facebook, podemos activarlo y configurarlo en esta opción, indicando nuestro Facebook Page ID (que proporciona Facebook), para que también esté disponible en AMP.

Una vez activado, debemos configurar el servicio, indicando qué información queremos que aparezca en la página AMP, si utilizamos los anuncios, activar la analítica para estas páginas o personalizar el código HTML en cabecera, cuerpo o pie de la página.

 

 Traducción de los mensajes

Según el tema que hayamos seleccionado, puede ser necesario traducir las cadenas de texto que aparezcan. En esta opción, aparecen todas estas cadenas y tan solo debemos introducir el texto correspondiente al texto inglés que se muestra.

Aunque hay temas que no utilizan todos los textos que aquí se muestran, es recomendable traducirlos todos, por si en el futuro cambiamos de tema, ya estén traducidos y evitamos que el usuario se encuentre textos en inglés.

 

 Pestaña de Extensiones “Premium”

Haz clic en la imagen para ampliarla  

Como se ha comentado anteriormente, el plugin AMP for WP permite ampliar el tipo de funcionalidades que se pueden incorporar en las páginas AMP, además de las soportadas por la versión gratuita.

A través de esta pestaña podemos consultar y adquirir todas las extensiones que dispone el plugin, como caché, comentarios, cuadros Pop-Up, WooCommerce, WPML... y así hasta 30 extensiones.

Alternativamente, podemos actualizar a la versión Pro, que incluye más de 15 extensiones, temas AMP y soporte técnico, mediante una tarifa anual, con posibilidad de licencia para varios sitios web.

 

 Conclusiones

Disponer de páginas AMP en un sitio web en WordPress nos proporciona una ventaja ante los usuarios que hacen búsquedas a través de dispositivos móviles, que podrán aprovechar su mayor velocidad de descarga y mejor visualización.

Instalando un plugin AMP en WordPress, no necesitamos realizar ninguna implementación adicional para tener páginas AMP, sino que el plugin las genera automáticamente a partir de las páginas web “completas” del sitio.

La configuración de un plugin AMP se centra fundamentalmente en los siguientes aspectos, que no requieren conocimientos técnicos avanzados:

• Elegir una plantilla o “tema” de visualización, con el que se mostrará el contenido de la página AMP, personalizando elementos como logos, colores, estructura, etc.
• SEO de las páginas AMP, para asegurar que las optimizaciones realizadas en la página web original (como las etiquetas meta) se integren también en la versión AMP.
• Scripts de analíticas, como Google Analytics, para que el tráfico de las páginas AMP también queden registrados para su posterior análisis web.
• Formularios, botones de compartición, anuncios... así como otros elementos dinámicos, que debemos configurar por separado para asegurar que sigan operativos en la versión AMP.

Una vez instalado y configurado el plugin AMP, en Chrome podemos utilizar la extensión “AMP Validator” para comprobar que las páginas AMP funcionan correctamente, o esperar a que Google las rastree e indexe y consultar su estado en la consola de búsqueda.