Cómo configurar el plugin AMP for WP

amp plugin

Si queremos posicionar mejor nuestra web y obtener más tráfico orgánico, es fundamental disponer de una versión AMP de nuestra página web. Cuando más completa y funcional sea, mejor será la experiencia de usuario de tus visitantes.

Así que vamos a ver cómo configurar el plugin AMP for WP - Accelerated Mobile Pages, un plugin muy completo y funcional que nos permitirá disponer incluso de home y páginas en formato AMP.

Instalación del plugin

Para instalar el plugin en nuestra página web solamente debemos ir a la sección de plugins de nuestro panel de configuración de WordPress y poner "AMP" en el buscador.

Nos aparecerán varios resultados, nos centraremos en AMP for WP - Accelerated Mobile Pages, en la segunda posición actualmente.

buscar plugin amp for wp
Desde nuestro panel de WP, buscamos el plugin con la palabra "AMP"

Ahora solo queda instalarlo, así que le daremos al botón "Instalar ahora" y una vez se haya instalado, aparecerá un nuevo botón al que también debemos hacer click "Activar".

activar plugin amp
Una vez instalado, es necesario activar el plugin.

Y con estos sencillos pasos, tendremos instalado nuestro plugin AMP for WP. Es importante recordar, que para evitar incompatibilidades no debemos tener mas plugins activados que gestionen la parte AMP de nuestra web.

Configurar AMP for WP - Accelerated Mobile

Esta parte puede parecer un poco compleja por la cantidad de opciones que tenemos, pero en realidad es muy sencilla. Solamente debemos centrarnos en las opciones que queremos activar, las estándar.

Lo primero que haremos será ir al panel de configuración de AMP for WP - Accelerated Mobile, situado en la parte inferior del menú de nuestro panel de configuración de WordPress.

seleccion amp
Hacemos click en AMP

Veremos que en la pantalla nos aparecen dos opciones "Run Installation Wizard" y "AMP Options Panel". La primera opción ejecuta un asistente sencillo de configuración, la segunda nos lleva directamente al panel de control.

Vamos a ver cómo configurar todas las opciones del plugin para optimizar nuestra página web. Más tarde veremos cómo funciona el asistente automático.

AMP for WP - Accelerated Mobile: Settings

Si hacemos click en la pestaña "Settings" se nos abrirá una ventana donde podremos ver varias funciones de los desarolladores. Entre ellas, valorar el plugin o acceder la versión "PRO".

La versión "PRO" del plugin es mas completa pues incluye formularios de contacto, mejoras en ADs (posiciones de anuncios), formulario de contacto, valoración por estrellas y un largo etc....

Puedes ver la versión "PRO" y todas sus funcionalidades desde:

amp for wp settings
Panel de control del plugin AMP for WP

Pero tranquilo, la versión gratuita es súper completa y funcional, por lo que podemos usarla sin necesidad de pagar nada. Pasemos a las partes mas importantes de la configuración.

AMP for WP - Accelerated Mobile: General

En este apartado debemos comenzar ya a trabajar para que la versión AMP de nuestra página Web quede estéticamente bonita y sea práctica y funcional.

Comenzamos por subir nuestro Logo, el plugin nos recomienda un tamaño de 190px x 36px, siendo aconsejable mantener estas medidas. O por lo menos los 36px de alto, sin excedernos de los 190px de ancho (si son menos, no es problema).

La opción "Resize" viene desactivada por defecto, si queremos la podemos activar para que el plugin redimensione nuestro logo con las medidas que queramos.

subir logo amp
Subir nuestro Logo es importante para evitar errores de código.

Justo debajo, veremos las opciones de soporte del plugin. Donde podremos elegir que tipo de páginas queremos que estén activas en la versión AMP de nuestra web.

Yo suelo ir mucho a por lo sencillo, así que he marcado las más importantes, dejando el resto para experimentar en un futuro próximo... Pero tu puedes trastear todo lo que quieras.

En mi caso, he marcado las imprescindibles "Post", "Pages" y "Homepage".

seleccion de paginas amp
Activamos estas opciones y guardamos los cambios.

Después de seleccionar las opciones que queremos ver reflejadas en la versión AMP, debemos guardar los cambios. Para ello, haremos click en "Save Changes".

AMP for WP - Accelerated Mobile: Page Builder

En esta sección nos explican con vídeo cómo crear nuestras propias estructuras AMP dentro de las páginas web. Algo que nos viene muy bien si queremos realizar una idea en particular.

Sin embargo, cómo haremos una configuración sencilla y práctica, dejaremos este apartado sin tocar. Ya que realmente podemos funcionar perfectamente con la configuración por defecto sin necesidad de complicarnos.

AMP for WP - Accelerated Mobile: Advertisement

Llegamos a una de las partes más importantes del plugin, el lugar donde colocar nuestra publicidad. Gracias a ella, podremos recaudar algo de dinero extra con los anuncios de Google Adsense.

Disponemos de seis posiciones donde colocar nuestros anuncios:

  • AD #1: Nos permite insertar un anuncio bajo la cabecera de la web.
  • AD #2: En este apartado podemos poner nuestro anuncio en el Footer.
  • AD #3: Si colocamos aquí un anuncio, se mostrará al inicio del contenido (encima).
  • AD #4: En esta pestaña podemos colocar un anuncio que se mostrará después del contenido.
  • AD #5: Esta opción es para colocar el anuncio debajo del título.
  • AD #6: Esta pestaña nos permite insertar un anuncio encima de los artículos relacionados.

Para hacer funcionar las diferentes pestañas, solamente debemos añadir nuestro código de anuncio. En AMP no es necesario poner el código completo, con insertar el identificador de cliente (Data AD Client) y el identificador del anuncio (Data AD Slot) es suficiente.

Si nuestro anuncio es "Resposive" y no de tamaño fijo (el cuál también podemos seleccionar), debemos marcar esa opción también.

anadir anuncios a amp
Para mostrar anuncios, activamos y añadimos nuestro código

Podemos insertar tantos anuncios cómo queramos, hasta llegar al máximo de seis. Una vez configuradas las opciones, recuerda guardar los cambios mediante el botón "Save Changes" situado en la parte inferior.

AMP for WP - Accelerated Mobile: SEO

En la sección "SEO" podemos elegir entre introducir nosotros mismos nuestras propias meta-descripciones de forma individual en cada artículo o usar las meta-descripciones que ya tenemos puestas para las versiones NO-AMP (Escritorio y Móvil).

Obviamente nos vamos a por lo sencillo así que dejamos esta opción desmarcada y justo debajo, en "SEO plugins integration" seleccionamos nuestro plugin de SEO, en mi caso, Yoast By SEO.

seo en amp
Podemos usar la configuración SEO estándar de nuestra web

Un poco mas abajo, en "Adcanced Indexing" es recomendable marcar la opción disponible, para activar la compatibilidad con el nuevo Search Console.

Más info sobre esta nueva opción aquí :  Google Webmasters Central Blog

Bajamos, salvamos los cambios y pasamos a la siguiente opción de configuración para AMP for WP.

AMP for WP - Accelerated Mobile: Performance

En este apartado simplemente podemos elegir si queremos o no que nuestra web se optimice mediante "Minify". Obviamente solo afectará a la versión AMP de nuestra web, no al resto.

Personalmente tengo esta opción activada y funcionando, sin problemas.

minify en amp
Activamos la opción "Minify"

AMP for WP - Accelerated Mobile: Analytics

Como sabrás las páginas AMP son independientes del resto de nuestra web, por eso es necesario añadirles nuestro código de Analytics. De otra forma, no podríamos contabilizar el número de visitas que reciben.

Para ellos vamos a la pestaña "Analytics" y seleccionamos la primera opción. Luego insertamos nuestro número de ID de Google Analytics, dejando el resto de opciones sin activar.

analytics en amp
Añadimos nuestro identificador de Analytics para contabilizar visitas

En "General Analytics Providers" tenemos todas las alternativas a Google Analytics, por si prefieres medir tu afluencia de tráfico con otra opción. Guardamos los cambios y pasamos a otra opción.

AMP for WP - Accelerated Mobile: Structured Data

En la sección "Schema & Structured Data" podemos elegir que tipo de datos estructurados queremos para cada tipo de publicación.

Esta sección es en realidad un poco avanzada pero totalmente necesaria para evitar errores en Google. Así que elegimos "BlosPosting" para Post y "Article" para Pages.

En "Default Values Setup" podemos dejar algunos valores por defecto cómo el logo de nuestra web, imágenes por defecto para publicaciones o capturas para vídeos.

Generalmente no toco nada aquí, así que solo compruebo que está todo bien, subo el logo y paso al siguiente apartado.

elegimos datos estructurados amp
Seleccionamos el tipo de datos estructurados que queremos y guardamos.

AMP for WP - Accelerated Mobile: Notice Bar & GDPR

Este apartado es nuevo y realmente funcional, ya que desde hace relativamente poco tiempo es obligatorio tener el consentimiento de los usuarios de Europa antes de instalar cookies.

Así que podemos elegir dos opciones, o activar la barra que informa del uso de Cookies o activar la opción GDPR. Para los visitantes de Europa es obligatorio el uso de GDPR.

Por lo que personalmente te recomiendo que optes por la opción GDPR aunque sea un poco más compleja a la hora de configurar.

barra cookies amp
Activamos la barra de Cookies o la GDPR y guardamos cambios.

Solo nos queda guardar la configuración para no perder los cambios realizados, mediante el botón de "Save Changes".

AMP for WP - Accelerated Mobile: Push Notifications

Este apartado es por si estamos registrados en Onesignal, de forma que podremos poner nuestro ID y activar los Push.

Personalmente paso mucho de este tipo de configuraciones, pero si tu quieres hacerlo, adelante... En realidad no es algo necesario para el funcionamiento AMP, sino un complemto extra.

Así que simplemente dejamos esta opción desactivada y pasamos al siguiente punto.

AMP for WP - Accelerated Mobile: Contact Form

Llegamos a la parte donde podemos activar la compatibilidad con el formulario de contacto de "Contact Forms" o con los formularios de "Gravity Forms Support".

La versión gratuita de este plugin no trae estas opciones, así que o bien las compramos si las necesitamos, o pasamos a la versión PRO del plugin, que si trae estas opciones activadas.

Personalmente no necesito un formulario de contacto en AMP así que lo dejaré desactivado, pero es una opción muy interesante.

formulario de contacto en amp
Podemos activar un formulario de contacto para la versión AMP de nuestra web

AMP for WP - Accelerated Mobile: Comments

Esta sección es muy importante ya que damos permiso a nuestros lectores para dejar comentarios en los artículos en versión AMP. Si tenemos activados los comentarios en nuestro Blog / Web, podemos seleccionar "WordPress Comments".

Si somos un poco mas sibaritas y tenemos un plugin diferente cómo Disqus o comentarios de Facebook, también podemos usarlos en AMP gracias a estas opciones.

comentarios en amp
Debemos elegir entre activar o no los comentarios en AMP

Personalmente recomiendo tener siempre los comentarios activos, ya que influyen mucho en el posicionamiento SEO e incluso en el LinkBuilding. Aunque si no disponemos de tiempo para revisarlos, aprobarlos y contestarlos... es mejor desactivarlos.

Guardamos cambios y pasamos a la siguiente configuración.

AMP for WP - Accelerated Mobile: Instant Articles

Si tenemos activados los Instan Articles de Facebook, en este apartado del plugin podremos configurar varios datos de forma que queden sincronizados.

Esto no implica la publicación directa ni nada similar, solamente la compatibilidad entre ambos. Personalmente no uso Instant Articles porque ya no pagan bien, Facebook comenzó pagando bien, pero en la actualidad no merece la pena.

ia amp
Compatibilidad de Instant Articles con AMP

En mi caso, no selecciono nada y lo dejo todo desactivado, guardo cambios y sigo con la configuración. Si usas Instant Articles, simplemente rellena los campos.

AMP for WP - Accelerated Mobile: Hide AMP Bulk Tools

Si por algún motivo queremos que una parte de nuestra página web no esté en la versión AMP de la misma, desde aquí podemos hacer que no se incluya.

Es muy sencillo, solamente selecciona la categoría que no quieres que se incluya y guarda los cambios. Personalmente recomiendo no excluir nada, pero tu mismo con tu web.

ocular en amp
Podemos evitar que algunas categorías se excluyan, si queremos.

AMP for WP - Accelerated Mobile: Advance Settings

En esta sección podemos configurar de forma mas avanzada nuestro plugin AMP, con multitud de opciones e incluso la posibilidad de insertar código propio.

Para serte totalmente sincero, no suelo toquetear nada en esta sección. Aunque admito que es súper completa, algo de lo que carecen muchos otros plugins de AMP.

Revísala en profundidad y si tocas algo, recuérdalo. Porque si hay algún error de código posiblemente sea porque trasteaste algo pro aquí que luego tendrás que eliminar.

opciones avanzadas amp
Opciones de configuración avanzadas

Insisto, cuidado con lo que tocas en esta sección, antes de activar nada asegúrate bien de lo que haces.

AMP for WP - Accelerated Mobile: Translation Panel

Su propio nombre lo indica, aquí pondremos en nuestro idioma las palabras mas utilizadas por el plugin, que por defecto, las utiliza en Inglés.

Es recomendable repasarlas todas y dejar su traducción al Español, guardando luego los cambios.

panel idiomas amp
Es recomendable traducir las palabras a nuestro idioma, Español.

Diseño de AMP for WP - Accelerated Mobile

Una vez tengamos todos los parámetros bien configurados, es momento de pasar a la parte estética y funcional de la versión AMP de nuestra página web.

Para ello dispondremos de varias opciones incluidas en la versión gratuita y de muchas mas, en la versión de pago. Dado que estoy usando la versión gratuita, explicaré cuales son nuestras opciones.

AMP for WP - Accelerated Mobile: Themes

La versión gratuita trae cuatro themes que podemos utilizar, algunos de ellos realmente interesantes para ser gratis.

Simplemente debemos elegir una opción mediante el desplegable y ver el resultado en la imagen de ejemplo.

elegir theme amp
Seleccionamos el theme que mas nos guste

Una vez seleccionado el theme, guardamos los cambios y continuamos.

AMP for WP - Accelerated Mobile: Global

En esta opción podemos elegir el color preferido para los enlaces / links de nuestra página web. Es conveniente elegir el color de nuestro theme para que no quede excesivamente recargado.

También podemos añadir código css con mucho cuidado, pues podemos generar errores.

color y css
Elegimos color para nuestros links y guardamos cambios

AMP for WP - Accelerated Mobile: Header

En esta sección debemos marcar la casilla "Navigation Menu" para que la versión AMP de nuestra web también tenga un menú de navegación. Recuerda activar la casilla "AMP" en el menú correspondiente (Apariencia / Menú).

Por otro lado podemos integrar nuestro teléfono de contacto, un enlace a la versión No-AMP de la web y un apartado de búsqueda.

Selecciona lo que necesites y guarda los cambios, recomiendo marcar todo excepto el teléfono, pero si eres una empresa de servicios, márcalo también.

activar menu amp
Activamos el menú en la versión AMP

Insisto... activa también la opción en el menú (Panel de configuración de WP - Apariencia - Menús).

amp menu 2
Recuerda activar esta casilla en el menú que quieras usar

AMP for WP - Accelerated Mobile: Homepage

Desde este apartado podemos elegir si queremos que los artículos mostrados en la página principal de la versión AMP (AMP Homepage) tengan texto o no, indicando el número de caracteres, mediante "Excerpt on Small Screens".

Si queremos redimensionar las fotos de la portada, también podemos hacerlo mediante "Override Homepage Thumbnail Size".

Y elegir entre si queremos que se muestren post o alguna página en concreto. Es muy configurable todo.

amp homepage
Configura a tu gusto la Homepage de AMP

AMP for WP - Accelerated Mobile: Single

Esta sección está completa de opciones donde podremos configurar a nuestro gusto las diferentes configuraciones de los post / publicaciones.

Desde mostrar u ocultar las "Migas de pan" (Breadcrumbs) a incluir artículos relacionados, sin olvidar detalles cómo la caja de autor.

Dedica unos minutos a leer bien todas las opciones y elige las que mas te gusten.

single amp
Configuración avanzada para los artículos / post

AMP for WP - Accelerated Mobile: Footer

Desde aquí podemos seleccionar las opciones disponibles para mostrar el en Footer de las páginas AMP. La versión gratuita no trae muchas opciones, pero son suficientes para dejar nuestra web bien coqueta.

footer amp
Configuración del footer para páginas AMP

AMP for WP - Accelerated Mobile: Page

En este apartado podemos elegir entre mostrar la "meta-información" en las páginas u ocultarla. También si queremos mostrar las subpáginas o no. Por defecto, suelo dejarlo todo desactivado.

AMP for WP - Accelerated Mobile: Social

Apartado súper importante ya que gracias a el nuestros lectores podrán compartir nuestra publicación en las redes sociales si quieren.

Es muy completa, simplemente debemos seleccionar las opciones que queremos mostrar e insertar el enlace hacia nuestro perfil en la red social seleccionada.

rrss amp
Activar redes sociales en la versión AMP de nuestra web

Recuerda, no importa si ya tienes activadas tus redes sociales en tu web. Este apartado es solo para la parte AMP de tu página, tendrás que volver a configurarla.

AMP for WP - Accelerated Mobile: Date

Desde aquí podemos seleccionar cómo queremos que se muestre la fecha en las publicaciones, ediciones, etc... Incluso el orden en el que se muestra la fecha.

AMP for WP - Accelerated Mobile: Misc

Desde este apartado podemos activar la opción de multilenguaje en nuestra web o la inserción de sub-categorias en las categorías de página. Por defecto suelo dejarlo todo desmarcado, pero si necesitas algo de eso, actívalo y guarda cambios.

misc amp

Extensiones AMP for WP - Accelerated Mobile

Imagina que no quieres comprar la versión "PRO" the plugin pero si quieres usar algunas de las funciones de pago.

Estás de suerte, ya que podemos comprar la extensión que necesitemos de forma independiente. Así pagaremos solo por lo que realmente necesitamos.

Si echas un vistazo, verás que hay opciones disponibles de sobra en esta sección. Desde formularios de contacto a compatibilidad con tiendas online.

extensiones amp
Extensiones disponibles par el plugin AMP for WP

Y poco más que contar sobre el plugin, en la sección "FREE vs PRO" podemos ver todo lo que ofrece la versión completa del plugin, en comparación con la gratuita.

Conclusiones finales

Se trata sin lugar a dudas de uno de los mejores plugins para AMP que existen, de forma gratuita y de pago. Ya que ofrece un montón de opciones de configuración para optimizar a fondo nuestra Web.

He probado muchos, pero que muchos plugins AMP y este es de los mas completos con diferencia. Si no necesitas las extensiones, la versión FREE es mas que suficiente para agregar la función AMP a nuestra página web.

¿Cómo saber si funciona todo bien? Validar

Una vez hayamos configurado todo y guardado los cambios, debemos vaciar la caché de nuestro plugin de caché (si no tenemos ninguno, no debes vaciar nada xD).

Para ver si nuestra página ya funciona en AMP, solo debemos añadir "/amp" al final de cualquier publicación. Por ejemplo, en mi página es así:

http://beseomyfriend.com/que-es-el-link-juice/?amp

Y si se muestra una página y no un error, felcidades, ya tienes AMP funcionando. Pero no cantes victoria aun, tenemos que verificar que funcionan bien en Webmasters Tools.

Para ello iremos al validador de Google e insertaremos ahí nuestra url con la terminación AMP:

comprobar amp
Comprobamos que todo funcione OK

Si nos sale el símbolo verde es que todo está OK, ahora el útimo paso, comprobar los datos dentro de la página AMP.

Para ello, haremos click en "Consultar valores opcionales" y se ejecutará un nuevo test AMP en profundidad, mirando uno a uno todos los datos.

Si todo está bien, no saldrá ningun error. Si hay algo mal, aquí veremos los errores y donde están localizados.

amp sin errores
Validación final de errores AMP

¡Felicidades! Ya tienes instalado el plugin AMP for WP y está configurado sin errores. En pocos días Google indexará estas nuevas páginas y muchos visitantes podrán cargar tu página de forma ultra-rápida.

Si te ha quedado alguna duda, puedes dejarla en los comentarios e intentaré ayudarte a solucinarla.

  1. Victoria dice:

    Excelente articulo!! Muchas gracias, me ha sido super util para poder instalar este pluging. Estoy probando este pluging porque tenia otro, AMP que me traia muchisimos error y tenia la version movil bastante lenta. Voy a ver si este pluging me ayuda un poco mas¡
    De nuevo, muchas gracias¡¡

    1. Jose Antonio Ramos dice:

      De nada Victoria, me alegra saber que te ha sido de ayuda 🙂

      Saludos

  2. laura Arcila dice:

    hola!
    primero quiero agradecerte por compartir esta guia tan completa, soy tu nueva seguidora!

    Me animo a escribirte porque estoy creando un blog y espero que me puedas ayudar, si tienes algo de tiempo para una torpe empirica de wordpress.

    probe AMP for WP y todo de maravilla... bueno casi todo!

    Tengo problemas con al compartir con facebook. algunas veces comparte el articulo, pero cuando lo abro en facebook me aparece un 404, otras veces nada más al compartirlo me aparece "pagina no encontrada"

    No se nada de SEO y espero tener tráfico de facebook, pero sin esta función me será casi imposible
    espero puedas guiarme para corregir el problema

    Desde ya mil gracias!

    1. Jose Antonio Ramos dice:

      Buenos días Laura,

      En primer lugar comentarte que todos, incluido yo mismo, hemos sido torpes empíricos de WordPress jeje, todo se aprende con la práctica así que mucho ánimo. El mundo del SEO no es tan complejo como pueda parecer, es simplemente cogerle el punto y realizar muchas, pero que muchas pruebas para ver lo que realmente funciona y lo que no.

      Sobre tu plugin de AMP, creo que algo no está bien configurado. He revisado tu página web y veo que todas las entradas aparecen directamente cómo AMP, cuando no debería ser así. AMP es un extra que solo debe servir para Google, para que lo utilice cuando quiera mostrar tu web en formato reducido (bajo peso) para dispositivos móviles con una baja velocidad en internet.

      AMP no es necesaria no ser que tengas una web muy lenta, en tu caso no puedo hacer la prueba de velocidad porque actualmente me redirige automáticamente hacia amp.

      Te propongo que desactives el plugin de AMP, borres la caché de tu plugin de caché y hagas una prueba en pagespeed: https://developers.google.com/speed/pagespeed/insights/?hl=es

      Si tienes mala velocidad, entonces prueba a usar un plugin de AMP que sea muy sencillo cómo este mismo: https://es.wordpress.org/plugins/amp/ y en la configuración selecciona las URLs "clásicas" (las que añaden /amp al final).

      Saludos!

  3. Juan Carlos dice:

    Muy interesante tu articulo, gracias a los pasos tan detallados que explicas logre implementar los AMP en mi sitio web.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Subir