sportium
amp en wordpress

Guía para configurar AMP en WordPress + Google Adsense y Analytics

A las buenas, en este artículo vamos a ver como implementar AMP en WordPress de forma gratuita, con Google Analytics y Adsense, esto, te puede venir muy bien si quieres (posicionar mejor en Google móvil o ganar más dinero con Adsense).

Es cierto que si tienes una tienda online necesitaras un plugin AMP de pago, con este podrás adaptar tu negocio WooCommerce completamente a los dispositivos móviles, mejorando las ventas así como la experiencia de usuario.

Sin embargo, si tienes un blog simple de entradas, con la versión gratuita nos bastara para conseguir un resultado estupendo.

Si algo me he dado cuenta, es que incluir esta tecnológica en mi proyecto, ha sido una de las mejores decisiones que he tomado, mis ganancias se han multiplicado de forma exponencial en un solo mes.

¿Qué es AMP – Accelerated Mobile Pages?

AMP se caracteriza por tener las siglas “accelerated mobile pages”, y se trata de una nueva forma de navegación que se caracteriza por ser más rápida y fluida, consiguiendo una mejor experiencia de usuario en dispositivos móviles o tablets.

Realmente, si hablo de AMP me refiero a un framework desarrollado en HTML, CSS y Javascript que sirve como un lenguaje propio para crear páginas web simples desactivando elementos innecesarios.

amp project

Podría decir que amp nos recuerda a las primeras páginas web del pasado, ya que su principal función es mostrar el texto utilizando únicamente HTML y CSS deshabilitando elementos JV innecesarios para el usuario que entra desde su smartphone.

Una de las mayores razones por lo que hoy disfrutamos de esta tecnología móvil es, por que recibe el apoyo de Google, y con él, el desarrollo completo de AMP project.

Hoy en día ya no basta con conseguir un diseño web responsive, esta tecnología va mucho más lejos de lo que podemos llegar a pensar. Cómo tal ofrece una serie de ventajas.

  • Velocidad de carga: Cómo sus propias siglas indican, esta tecnología fue diseñada para ofrecer una velocidad insuperable, aunque, el diseño web nos recuerda a las páginas antiguas de FrontPage.
  • Aumento de ganancias: Otra de las grandes ventajas del Accelerated mobile pages, es que nos permiten aumentar las ganancias con Adsense u otros servicios de publicidad.
  • Posicionamiento web: Por último, no nos podemos olvidar que configurar AMP en WordPress es muy importante para el SEO en dispositivos móviles.

Estos, son 3 motivos fundamentales por lo que te recomiendo incluir un diseño adaptado a dispositivos smartphone, si estás interesado, sigue leyendo.

¿Qué páginas web pueden usar AMP?

¿Te has preguntado qué tipos de páginas web pueden usar esto?, es muy fácil, AMP no sustituye la versión responsiva de tu sitio a no ser que tú lo configures para que se muestre de esa forma.

AMP Porject está diseñado para portales de contenido, como pueden ser periódicos, revistas, blog o incluso “tiendas online”, pero nunca para sitios corporativos como son las páginas web de servicios

Muy en contra de lo que pueden opinar otros sitios web, (una tienda online en WordPress si puede ofrecer una mejor experiencia de compra usando AMP con HTML, CSS y JV).

Ya sabes quién puede usar esto, nunca vayas a implementarlo dentro de una página de servicios, ya que todo el diseño que tenías se puede ir al garete.

¿Qué diferencia hay entre AMP y responsive?

Hay mucha diferencia entre diseños web responsives y accelerated mobile pages, esto, no quiere decir que una sea mejor que otra, cada cual tiene sus ventajas.

  1. El proyecto de Google Amp es un framework únicamente desarrollado y optimizado para ofrecer una mejor experiencia en la entrega de contenido web.
  2. Las páginas web responsives son una forma de organizar y adecuar el contenido de tu sitio para que encaje perfectamente en la pantalla de un móvil.

Ya te habrás dado cuenta que cada una tiene una serie de diferencias que las hacen únicas y exclusivas, aunque te recomiendo de que incluyas las dos en tu proyecto si tienes un blog.

¿Cómo instalar y configurar AMP en WordPress?

amp en wordpress

Bueno, ahora sí que sí, nos vamos a dejar de materia y nos vamos a poner manos en la masa con la implementación de WordPress y AMP.

Como ya sabrás, los que trabajamos con WordPress tenemos las cosas muy fáciles, tanto es así que a continuación te voy a mostrar una serie de plugins para hacer de tu web en versión móvil una autentico cohete.

En esta lista, solo te voy a mostrar los plugins que vamos a usar para configurar la tecnología AMP con Analytics y Adsense.

Si quieres tener todas las funciones en un solo complemento
Te recomiendo configurar AMP con Aanlytics y Adsense desde un solo plugin, yo estoy usando (WP AMP — Accelerated Mobile Pages for WordPress and WooCommerce)

Ahora bien, si te decantas por la opción gratuita, tendremos que instalar 3 plugins desde el repositorio de WordPress. Cabe decir que mientras hacia este post, el plugin que iba a utilizar llamado Facebook Instant Articles & Google AMP Pages by PageFrog “ya no está funcionando”.

Así que, he buscado otras opciones más que interesantes para incluir las funciones básicas de AMP, los plugins que necesitamos son.

Lo primero que vamos a hacer es instalar el primer plugin de la lista AMP for WordPress, con este plugin ya tendremos nuestra web en formato AMP, pero sin ninguna configuración.

amp for wordpress

⚠ Es importante saber que este plugin ha sido desarrollado por WordPress, en el pie de página se encuentran los créditos, por lo que no sé hasta qué punto puede afectar de cara al SEO, date cuenta de que le estas mandando un enlace dofollow desde todas las páginas de tu sitio.

Una vez lo tengas instalado en tu proyecto de WordPress, nos vamos a centrar en instalar el segundo plugin gratuito, Adsense for AMP desde, (plugins, añadir nuevo).

adsense for amp

Este complemento es bastante eficaz para poner AMP con WordPress, te ofrece un montón de configuraciones imprescindibles para sincronizar Adsense en la vista móvil de tu web.

Cuando lo tengas instalado, veras que aparece una nueva sección en el panel de administración de WordPress llamado Adsense for AMP con un corazón.

Ahora, solo queda instalar el tercer plugin de la lista Analytics Tracker, este plugin nos servirá para vincular Analytics con WordPress y AMP, pero eso lo veremos más abajo.

analytics tracker

Para comprobar que todo marcha correctamente, tan solo tienes que poner la URL con /amp/ al final, por ejemplo…

¿Has visto que fácil?, hoy en día, implementar AMP project en nuestro sitio no tiene misterio.

Personalizar la apariencia de AMP en WordPress

Hasta ahora, hemos visto como incluir AMP en una página web de WordPress, pero nos muestra es la configuración por defecto, por lo tanto, toca personalizar la apariencia para que nuestra versión móvil quede lo más profesional posible.

Si nos dirigimos a “Apariencia > Personalizar dentro de nuestro panel de control veremos un sección llamada AMP”.

 

apariencia amp

Aunque las opciones de personalización son muy escasas, al menos nos sirven para adaptar el color al de nuestra marca.

apariencia-amp1

Las opciones que nos trae, solo nos deja modificar la el color de la cabecera y el esquema de color.

Aunque lo cierto es que todavía podemos encontrar más opciones para configurar un poco mejor nuestra web. Si te diriges a “AMP” podrás ver que podemos elegir la compatibilidad con tipos de contenido.

apariencia amp2

Ahora sí, dicho esto vamos a seguir con la configuración de AMp en WordPress.

Conectar Google Analytics en WordPress AMP

Debes saber que, la versión amp de wordpress no te permite integrar ni un solo código de JavaScript, esto complica las cosas, y entonces, ¿cómo conectamos Analytics y AMP?.

Pues es más fácil de lo que cree, el proceso de inclusión es bastante sencillo.

Si te diriges a “Google Analytics en el panel de control de WordPress” veremos una serie de opciones que nos permiten configurar y adaptar el servicio de tracking con tus visitas a través del móvil.

vincular analytics amp

Esta sección nos ofrece varias configuraciones que explicare adecuadamente en los siguientes puntos, pero antes, vamos a vincular nuestra cuenta de Analytics en la primera sección Google Analytics tracking ID, para ello, accede a tu cuenta.

vincular cuenta de analytics con amp

Una vez estés dentro, veras un ID de seguimiento personal como el de la siguiente imagen, ese será el que tenemos que poner dentro de la primera sección del plugin.

id de seguimiento de analytics

Ahora que hemos metido el ID de seguimiento, la plataforma ya debería de funcionar correctamente con la versión AMP de tu web. Por lo que queda ver las opciones disponibles.

  • User ID: marcaremos la primera opción para que nos identifique como usuario único.
  • Anoymize IP: si quieres que los usuarios que entren a tu sitio tengan la IP oculta marca esta opción “yo recomiendo no marcarla”.
  • Display Features: de igual forma dejaremos esta opción desmarcada, ya que si la pulsas le pasaras la información a otra empresa.
  • Enhanced Link Attribution: sirve para mejora la precisión de los enlaces y las visitas entrantes, recomiendo marcarla.
  • Event Tracking: se trata de una función de seguimiento que nos permite seguir descargas, correos entre otras, yo la marcaría.

Las opciones restantes sirven para dar prioridad a una categoría, página, entrada o etiqueta, lo dejaremos igual.

Haciendo esto, ya tendrás todos los datos de tu cuenta vinculados con el plugin de Analytics.

Sincronizar Adsense con AMP y WordPress

Como te comente al principio del post, poner AMP en mi sitio web ha sido de las mejores decisiones que he tenido, mis ganancias se han multiplicado literalmente por 10 con Google Adsense.

ganancias adsense amp

Esto se debe a que la tecnología AMP y los anuncios de Adsense encajan bastante bien en el móvil, los usuarios que entran a través de este suelen pulsar en los anuncios casi sin darse cuenta.

Así que vamos a ver cómo podemos poner Adsense y AMP en WordPress conjuntamente ¿no?. Para configurar Adsense debe dirigirte al plugin que instalamos anteriormente, “Adsense for AMp”.

 

incluir adsense en amp

Como podrá ver aparecen dos opciones (Above the post content y Below the post content), la primera nos sirve para poner Adsense al principio de nuestra entrada y la segunda al final.

El proceso de configuración es exactamente igual uno de otro, así que veremos cómo incluirlo configurando la primera opción. Es importante mencionar que este plugin te permite poner Adsense o elegir un banner previamente creado por ti en la versión AMP de tu sitio.

Para configurar tus anuncios, tienes que entrar en tu cuenta de Adsense, dentro de ella “dirígete a anuncios > bloques de anuncios” para seleccionar el bloque adecuado.

incluir adsense en amp1

Una vez estés dentro, te recomiendo que selecciones un bloque de anuncios cuadrado para que se adapte perfectamente a las pantallas de smartphone y tablet.

Ahora, pulsa en obtener código para que nos muestre el código del bloque de anuncios y fíjate en las dos opciones que pone (data-ad-cliente y data ad slot).

incluir adsense en amp2

Con estas dos opciones podremos poner nuestros anuncios, así que “selecciona la primera opción después del signo de comillas “” sin soltar el click del ratón y copia pulsando Ctrl + C de tu teclado”

Si lo as hecho bien te debería de quedar algo como esto, ca-pub-7994312939447086, ese texto lo deberás de pegar en la primera opción llamada Publisher id.

Ahora tendrás que repetir el mismo proceso pero con la segunda opción, para copiar y pegar el segundo texto llamado Ad unit id.

Por último, tienes que cambiar la última opción del complemento Ad size y poner tus anuncios en responsive.

Si pulsamos en guardar cambios, podrás darte cuenta de que ahora se muestran anuncios de Adsense en la pantalla AMP de tu móvil.

Verificar AMP en Google Webmasters Tools

Estamos llegando al final, no sin revisar el cambio que hemos implementado en nuestro sitio web, para revisar que todo marcha correctamente, solo tendrás que dirigirte a la plataforma para webmasters de Google y seleccionar el proyecto donde hemos hecho los cambios.

Estando dentro, dirígete a la zona de (aparición de búsqueda > Accelerated Mobile Pages) dentro de la herramienta podrás revisar si la versión AMP ya se ha indexado.

verificar amp en google webmasters tools

Si lo acabas de aplicar, te mostrara un mensaje de, no hemos encontrado ninguna página de Accelerated Mobile Pages en tu sitio web.

Esto es muy normal, el robot de Google tiene que pasarse por nuestro sitio antes de incluir la versión AMP de nuestro sitio en los resultados de búsqueda.

Sobre todo ten un poco de paciencia, haciendo todo lo que hemos visto, tu web va a empezar a indexarse en esta versión, cuando Google lo detecte, veras algo como esto.

verificar amp en google webmasters tools1

A mí me aparecen algunos errores porque estuve probando algunos plugins de AMP, mucho cuidado con los complementos no oficiales, como vez pueden traer problemas a tu página web AMP.

Vídeo para instalar Accelerated mobile pages en WordPress

Para terminar te quiero dejar un vídeo que he creado donde muestro como instalar AMP en WordPress, aunque como os comente al empezar, este vídeo lo hice basándome en el plugin que ha dejado de funcionar…

Cabe mencionar que, en el vídeo os muestro como configurar el plugin AMP de pago que tengo en mi sitio, si decides adquirirlo, en este vídeo podrás ver como configuro en directo todas las opciones.

Con esto termino, espero que te haya gustado y como siempre, ¡hasta el próximo!.

5/5 (5)

2 Comments

  1. Nosunelanube noviembre 20, 2018
    • DanielBlanco noviembre 21, 2018

Leave a Reply