Mucho se ha hablado ya sobre las “páginas móviles aceleradas” o Accelerated Mobile Pages (AMP), y aquí nos hemos hecho eco de todo ello.

Nos sabemos la teoría, pero no la hemos puesto todavía en práctica. Por ello, en el post de hoy nos centramos en como implementar las AMP en un sitio web creado con WordPress.

Cómo utilizar AMP en WordPress

La forma más sencilla es a través del plugin oficial AMP, desarrollado por Automattic, y de descarga gratuita.

Una vez esté activo el plugin, todas las entradas de tu sitio generarán dinámicamente versiones compatibles con AMP. Puedes corroborarlo desde tu navegador web en versión escritorio, añadiendo /amp/ o bien /?amp=1 al final de las URLs de tus entradas.

A la hora de implementar una versión AMP de nuestro contenido, debemos tener en cuenta que no deja de ser una copia de las páginas que ya tenemos. Pensando en el SEO de nuestra web, ¿se considera contenido duplicado? No, ya que el plugin establece por defecto etiquetas de relación entre las versiones originales y las AMP, o dicho de otra forma, indica con la etiqueta canonical en la versión AMP, en qué URL se encuentra el contenido equivalente de la versión de escritorio.

Si tienes dudas sobre la indexación y empleo correcto de la versión AMP, en Google Webmaster Tools (Search Console) podrás corroborar su funcionamiento, así como los posibles errores que puedan presentar.

AMP para WordPress

Cómo personalizar las AMP

El plugin, por defecto, deja margen a cierta personalización de las AMP. En el panel de administración de WordPress de tu sitio web, en Apariencia > AMP, podrás cambiar el color del header y texto, así como el de los enlaces.

Ante este poco margen de cambio, se han ido desarrollando plugins complementarios a AMP que permiten ampliar la personalización del diseño. Aquí te dejamos, a nuestro ver, los más interesantes, todos ellos gratuitos:

Pagefrog

Desde el panel de administración de WordPress, en AMP > Mobile Formats > Styling, Encontrarás un apartado donde configurar elementos básicos como colores del header y footer, y tipos de letra. También permite personalizar Facebook Instant Articles y Apple News Format.

Entre sus puntos fuertes, está poder conectar el código de Analytics para filtrar las visitas generadas a través de AMP, así como incluir anuncios con Adsense.

AMP Toolbox

Permite modificar el CSS, la imagen de cabecera y los colores de las páginas. Además, posibilita añadir un enlace en los artículos, en su versión AMP, que lleve a la versión original en la web de escritorio, o responsive (si dispusiese de ella).

Custom AMP

Para nosotros, este plugin es el parche de AMP que más parámetros permite modificar. Además de configurar el icono y logo, permite cambiar el ancho del contenido en AMP,  insertar un contador de comentarios en la página AMP para cada artículo, y añadir contenido en el header y footer de la versión AMP (como post relacionados, autor y etiquetas).

Además, deja configurar el código de tracking de Google Analytics, e inlcuir el menú de nuestra web en modo desplegable.

El único inconveniente que tiene, es que no posibilita incluir Adsense, pero para eso, te traemos un bonus track que te facilitará incluirlo a través del FTP de tu sitio web, solo con seguir los siguientes pasos:

  1. Crea un bloque de anuncios adaptable en tu cuenta de Adsense con las medidas 300×200.
  2. Copia el ID del editor (data-ad-client); por ejemplo, ca-pub-1234567891234567, y el ID del bloque de anuncios (data-ad-slot): por ejemplo, 1234567890
  3. Sustituye estos valores en el siguiente código:

<amp-ad width=300 height=200
type=”adsense”
data-ad-client=”ca-pub-xxxxxxxxxxxxxxxx”
data-ad-slot=”xxxxxxxxxx″>
</amp-ad>

  1. Localizar y edita el archivo single.php que encontrarás dentro del plugin AMP, en la carpeta Templates, y selecciona a tu gusto la ubicación del mismo. Ejemplo: si lo quieres debajo del texto, deberás colocarlo a continuación de <div class=»amp-wp-article-content»>

(Importante: para incluir Adsense, debes tener actualizada la versión WordPress a 4.7.0, o superior)