Cómo configurar AMP en WordPress + AdSense y Analytics (2018)

Hoy te quiero contar cómo configurar AMP en WordPress, y además, que aprendas a integrar anuncios de AdSense y el javascript de Google Analytics. ¿Por qué? Porque el tráfico móvil sigue creciendo cada día y es imparable. Esto no es un secreto ni para Google, ni para los webmaster, ni para los que somos aficionados al SEO. Por eso es super importante adaptar nuestras páginas webs a un formato amigable para ser visualizado desde un smartphone. Y no, el diseño responsive ya no es suficiente.

Configurar AMP en WordPress con AMP for WP

La gente quiere información inmediata. Pero ya de ya, nada de estar media hora cargando la página. Que casi sin tocar la pantalla ya aparezca por arte de magia lo que están buscando. Y ahí es dónde entra la magia de AMP. Las Accelerated Mobile Pages nos permiten servir contenido rápidamente, con un diseño minimalista y enfocado a satisfacer al usuario.

¿Y cómo integro AMP en WordPress? ¿Es fácil configurar AMP en WordPress? Bueno, realmente hay muchas formas. A mi la que más me gusta es AMP for WP, un plugin que además de ser gratuito, es muy fácil de configurar. Y tiene algunos extras interesantes:

• Nos permite integrar Google AdSense y configurar los tamaños de los bloques.
• Podemos insertar el JS de Google Analytics, un Pixel de Facebook y otras herramientas de analítica.
• Nos permite personalizar logos, colores y prácticamente todo el diseño sin picar código.
• Tiene un builder AMP.
• Nos permite seleccionar qué tipo de páginas, entradas, categorías o archivos tienen activado AMP y cuales no.
• Tiene un framework abierto para diseñar tu propia plantilla. Y hay algunas ya creadas bastante chulas.
• Tienen una tienda de extensiones (de pago pero asequibles) con caché, anuncios inline, formularios, integración con WooCommerce o los ratings.
• Tienen un canal de soporte en Telegram, y son bastante rápidos arreglando los bugs reportados por la comunidad (entre los que se incluye un servidor).

En definitiva, es un plugin muy completo y fácil de configurar con el que podremos tener AMP instalado en WordPress en cuestión de minutos.

Cómo instalar el plugin AMP for WP

1. Ve a la sección de Plugins en el panel admin de WordPress.
2. Selecciona «Añadir nuevo».
3. En el buscador, teclea «amp for wp».
4. Instala el plugin y actívalo.

Si prefieres instalarlo por FTP o por SSH con SCP porque eres muy friki y te gustan las cosas difíciles, puedes bajarte el ZIP desde el siguiente enlace, descomprimirlo y subirlo a la carpeta wp-content > plugins.

Descargar | AMP for WP desde el repositorio oficial

Ahora toca ponerse música chill out y empezar a configurar AMP en WordPress.

Cómo personalizar el diseño de AMP

Lo primero que vamos a hacer para configurar AMP en WordPress, es personalizar la plantilla de AMP.

El primer paso obligado es el de configurar el logo. Nos vamos a Settings > General y añadimos una nuevo logo desde la galería de WordPress.

Tiene varios campos:

• Custom Logo Re-Size: actívalo para que se adapte el tamaño del logo
• Resize Method: escoge si mantener fijo el ancho o hacerlo flexible.
• Width y Height: configura una anchura y altura respectivamente.

Recomendación: utiliza un logo oscuro y con fondo transparente si tu blog sale en Google Noticias para que se vea perfecto en las SERP.

Para cambiar la plantilla de AMP ve a Design > Themes. Verás una demo con cada estilo.

El tema de las plantillas o themes es una de las cosas que más me gusta de este plugin. Por defecto trae 4 themes: Diseño 1, Diseño 2, Diseño 3 (unos nombres curradísimos) y Swift. Prueba y quédate con el que más te guste. En la web oficial tienen dos más: «Blogging theme» y «Minimal» que también están bastante bien, y son de open source.

En la sección Design > Global puedes cambiar los colores principales, el color de la tipografía y  de los enlaces. Aquí también tienes la opción de añadir código CSS por si quieres darle un toque más personal.

En la sección Design > Header podemos configurar la cabecera de AMP. Estas son las diferentes opciones:

• Navigation Menu: permite activar o desactivar el menú de la barra superior.
• Call Now Button: añade un teléfono al header. Al pulsar sobre él hará una llamada.
• Non-AMP HomePage link in header and Logo: al hacer clic sobre el logo, llevará al usuario a la página principal (no AMP).
• Make Header UnSticky:  activa o desactiva el menú anclado a la parte superior de la pantalla.
• Search: activa o desactiva la búsqueda.
• Header background y Elements: configura el color del fondo del header y el texto.

Para crear un menú para AMP, tienes que hacer prácticamente lo mismo que con un menú normal:

1. Ve a Apariencia > Menús.
2. Crea un nuevo menú o selecciona uno ya existente.
3. En la parte de «Ajustes del menú», asócialo a «AMP Menú».

Seguimos con la sección de la página de inicio (HomePage). Si no vas a activar AMP en las páginas, no es necesario que configures esta sección. En caso contrario, tienes estas opciones:

• Featured Slider: Selecciona la categoría que quieras para mostrar las entradas como un slider. Una opción muy chula.
• Excerpt on small screens: interesante hacer excerpt del texto (recorte) en móviles pequeñitos. Mejora la legibilidad y simplifica la interfaz.
• Published Time: muestra u oculta la fecha de publicación de las entradas. Es interesante desactivarla para reducir el tiempo de carga un poco, aunque no tiene un impacto importante.
• Loop Display Controls: muestra las últimas entradas en la home y excluye las categorías que quieras.

En Design > Single podremos establecer qué campos se muestran en cada página AMP. Es quizás la parte más importante de toda la configuración de AMP for WP.

Esta es mi configuración favorita:

Y aquí tienes las opciones detalladas, para que sepas qué puedes hacer con cada una:

• Breadcrumbs: muestra u oculta las migas de pan debajo del header.
• Categories: muestra la categoría o categorías de la entrada AMP.
• Tags: muestra las etiquetas de la entrada.
• Sticky Social Icons: activa o desactiva los botones de compartición «pegajosos» en la parte inferior. Personalmente, prefiero desactivarla para que se vea más contenido en la pantalla.
• Excerpt: crea un pequeño resumen debajo del título. Poco útil.
• Next-Previous Links: artículos siguiente y anterior. Es muy interesante para mejorar la navegabilidad y facilitar a los robots la indexación.
• Author Bio: muestra/oculta la biografía del autor. Desactivar la biografía reduce el tiempo de carga.
• Link to Author Pages: enlace a la página de autor. Poco útil en AMP. Yo prefiero desactivarla.
• Post Pagination: activa o desactiva la paginación en los posts muy largos.
• Related Post by: artículos relacionados. Muy interesante. Aquí depende qué arquitectura web hayas elegido. Puedes buscar relacionados por categorías o etiquetas.
• Image in Related Post: mostrar u ocultar la imagen en los posts relacionados. Quitar la imagen reduce el tiempo de carga, pero también disminuye el CTR. Yo esta la dejo casi siempre.
• Excerpt in Related Post: abrevia las descripciones de los artículos relacionados. Recomendado.
• Sort Related Posts Randomly: ordena de forma aleatoria los posts relacionados. No recomendado, aumenta el tiempo de carga.
• Number of Related Post: número de artículos relacionados. A tu gusto. A más relacionados, más tiempo de carga. Creo que lo ideal es 2 o 4.
• In-Content Related Post: artículos relacionados entre el contenido. Es una funcionalidad útil para aumentar el tiempo de estancia, pero puede no quedar bien según cómo publiques tu contenido.

En Design > Date podemos activar o desactivar la fecha del artículo. El plugin nos permite mostrar la fecha de la última modificación o la fecha de publicación. También podemos ajustar el formato.

Ahora vamos a configurar el footer en Design > Footer. Nos encontramos estas opciones:

• Link to Non-AMP page in Footer: añade un link a la versión no AMP en el footer. Considero que es importante tener activada esta opción , ya que ayuda a Googlebot a detectar que hay una versión no AMP. La etiqueta canonical debería ser suficiente, pero funciona mejor con este enlace.
• Back to Top link: vuelta al comienzo. Interesante para mejorar la navegabilidad.
• Credit link: desactiva los créditos de los desolladores del plugin.
• Make «View Non-AMP» link nofollow: añade nofollow al link a la versión no AMP. Útil según qué casos.

Además, podemos añadir o quitar redes sociales para que aparezcan en los botones de compartición. Podemos añadir un botón like de Facebook (aumenta tiempo de carga), compartir por Facebook, Twitter, Google Plus, email, Pinterest, LinkedIn, WhatsApp o Line entre otros.

Para traducir las cadenas de texto que aparecen en el plugin, puedes utilizar los campos que encontrarás en Settings > Translation Panel o activar el POT y traducirlos con Poedit o Loco Translate. Cuidado con los campos de la fecha de publicación. Revísalos para que queden perfectos, porque en inglés el orden varía. Sabrás de lo que te hablo cuando lo pruebes.

Por último nos vamos a Settings > Notice Bar. Aquí vamos a activar el aviso de Cookies. Simplemente activa la opción «Enable Notifications» y aparecerá el mensaje emergente. Una cookie recordará la selección del usuario. Te recomiendo añadir en el footer un link al aviso legal.

¡Listo! ¿A que no ha sido para tanto? Ya tienes el diseño de tus entradas AMP listo y preparado para que Google pueda servírselo a tus visitantes.

Configuración SEO de AMP for WP

Además de las opciones básicas para configurar AMP en WordPress, el plugin AMP for WP también tiene algunas funcionalidades interesantes para SEO, integrándose con Yoast SEO y All in One SEO.

Esta de arriba es mi configuración SEO para AMP. Aquí en detalle cada opción:

• Meta Description: añade la metadescripción al head de la entrada o página en AMP. Imprescindible.
• Additional tags for Head section AMP page: aquí puedes añadir URL canónicas, metaetiquetas o lo que quieras. Recuerda que es un ajuste general para todas las entradas y páginas.
• Select SEO Plugin: selecciona entre Yoast SEO o All in One SEO.
• Meta Tags from Yoast: añade las meta tags de Yoast al post. Es una opción interesante e importante, sobre todo por el Open Graph de Facebook.
• Yoast Description in ld+json: si tienes un schema personalizado, por ejemplo para recetas, deberías activar esta opción.

Bueno vale, pero… ¿Qué paginas debo indexar y cuales marco como noindex en AMP? Todo dependerá del proyecto, pero para un blog de noticias cualquiera, esta puede ser una buena configuración:

• Sub páginas: noindex
• Archivos de autor: noindex
• Archivos por fecha: noindex
• Categorías: index
• Tags: index o noindex (dependiendo de la arquitectura que hayas escogido).

Y si por un casual quieres deshabilitar AMP para toda una categoría, puedes hacerlo desde Settings > Hide AMP Bulk Tools.

Por último, nos vamos a Settings > Performance y activamos «Minity AMP Page«. Esto eliminará todos los comentarios y espacios en blanco del código HTML de cada página AMP. Es muy útil si por algún motivo añades CSS adicional a AMP. Reduces el peso de la página, mejoras la velocidad de carga y Googlebot te querrá un poquito más.

Otros ajustes avanzados para AMP for WP

Ve a Settings > Advance Settings y échale un ojo a estas opciones:

• Mobile Redirection: redirecciona todo el tráfico móvil a AMP. Imprescindible activar AMP en homepage, páginas y entradas.
• Change End Point to ?amp: sustituye en la URL /amp por ?amp. Útil si por algún motivo te saltan errores 404 por alguna configuración rara del servidor o de los permalinks.
• Enter HTML in Head: añade código HTML a la cabecera. Útil para añadir promociones, eventos o sorteos, a mi por lo menos.
• Enter HTML in Body (beginning of body tag): añade código HTML al cuerpo de la versión AMP.
• Enter HTML in Footer: añade código HTML al footer.
• Auto Add AMP in Menu URL: añade /amp a todos los enlaces del menú. Aquí depende de cómo hayas añadido los enlaces al menú. Si son enlaces personalizados que ya terminan en /amp, no hace falta añadir esta opción. En cambio si estás usando el mismo menú principal para AMP y no AMP, es útil.
• Category base remove in AMP: elimina /amp de la URL de la categoría. Yo la elimino casi siempre.
• Tag base remove in AMP: elimina /amp de la URL de las etiquetas. Yo la elimino casi siempre.
• Featured Image from Custom Fields: añade una imagen destacada a ciertos campos personalizados.
• Featured Image from The Content: añade una imagen destacada en el contenido.
• Duplicate Featured Image: duplica la imagen destacada.
• Dev Mode in AMP: activa o desactiva el modo debug de AMP.
• Plugin Update Notification Bar: desactiva las notificaciones de actualización del plugin.
• Disable wptexturize: desactiva la función de WordPress wptexturize.

Una vez hecho esto digamos que ya has podido configurar AMP en WordPress con éxito. El resto de pasos a partir de ahora son opcionales.

Integrar los comentarios de WordPress, Disqus o Facebook en AMP

Después de configurar AMP en WordPress, podemos integrar los comentarios de WordPress, los comentarios de Disqus y los Facebook Comments. Ya hemos visto las diferencias entre Facebook Comments y Disqus, y Rubén Alonso nos da más opciones para configurar Disqus en AMP, así que tú decides qué sistema de comentarios quieres usar. Simplemente tendrás que activarlo. Yo uso Disqus así:

Para integrar Disqus en AMP tendrás que hacer una configuración un poco más compleja. Para descargar los comentarios a la página AMP necesitamos un intermediario. Puedes revisar el post de Rubén que te comentaba arriba si tienes dudas. Básicamente se trata de crear un subdominio, añadir un fichero PHP con el código que nos dan los developers del plugin y listo.

Recomendación: No te olvides de activar el SSL en el subdominio para evitar contenido mixto.

Cómo añadir anuncios de AdSense en AMP para WordPress

Como no podía ser de otra forma, podemos configurar AMP en WordPress con anuncios de Google AdSense.

En la sección Ads, o Advanced AMP ADS si tienes la extensión de pago, podrás añadir los códigos de AdSense, y personalizar en qué posición salen.

Como se suele decir, aquí cada maestrillo tiene su librillo. Aunque sí deberías pasarte por el mega post de Bruno Ramos para multiplicar ingresos en AdSense y echarle un ojo, vale la pena.

Para mi gusto funcionan muy bien bloques de enlaces, bloques de 300×250 o de 320×100. Haz pruebas y test A/B para ver cual te genera un mejor rendimiento.

También tenemos disponible la opción de añadir anuncios automáticamente en AMP mediante la opción «AMP Auto Ads».

Importante: la versión gratuita de AMP for WP solo te deja añadir bloques de anuncio antes del contenido, al principio del contenido, al final del contenido y después del contenido. Si quieres añadir bloques de anuncio en medio del contenido, tendrás que comprar la extensión de pago.

Cómo añadir Google Analytics en AMP for WP

Integrar Google Analytics en AMP es muy fácil. En la sección de Settings > Analytics tenemos un espacio disponible para añadir el ID de seguimiento, y un poco más abajo otros campos para diferentes herramientas.

Incluso puedes trackear dimensiones o eventos personalizados. ¿No será por opciones verdad?

Si has llegado hasta aquí y sigues vivo, ya nos podemos tomar una caña y disfrutar viendo lo rápido que carga nuestra web. Espero que te haya gustado esta guía para configurar AMP en WordPress y puedas activar las Accelerated Mobile Pages en todo tu contenido.