Instala las AMP de Google en tu WordPress

¡Comparte! 😉
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneBuffer this page

Las AMP de Google

El tráfico desde dispositivos móviles hace tiempo que es superior al de ordenadores de escritorio. Pero es que en ocasiones (muchas más de lo que parece) un usuario puede encontrar la navegación desde un smartphone o tablet algo frustrante; mucho de los sitios web no siempre están correctamente adaptados para ello. Por eso, Google ha dado la luz al proyecto AMP, cuyo principal objetivo es el de mejorar la velocidad de carga de las páginas web para dispositivos móviles. Si tienes un blog en WordPress, puede ser interesante tener indexadas versiones optimizadas de tus posts. Para saber más y conocer los pasos necesarios que se necesitan, he preparado un post muy informativo e ilustrativo para adaptarte a esta nueva tecnología.

 

– Qué son las AMP (Accelerated Mobile Pages)

 

Las AMP o “páginas móviles aceleradas” son una iniciativa de Google y otros grandes medios, cuyo proyecto se presentó hace un año y que finalmente se ha puesto en marcha en febrero de 2016. Están enfocadas a lograr que los contenidos web de todo tipo de publicaciones online se descarguen de forma más rápida en nuestros dispositivos móviles; la tecnología utilizada se basa en AMP HTML, un nuevo formato abierto con licencia Apache. El objetivo es generar páginas web más ligeras de HTML;  para conseguirlo, la utilización de HTML se restringe a las etiquetas permitidas en la especificación. Además, con JavaScript la plataforma también suministra los recursos necesarios por lo que AMP limita el uso del JS a sus librerías.

Resumiendo: para que las páginas carguen más rápido, AMP reduce el peso del código. Las páginas AMP son una versión simplificada de las normales; aunque contienen toda la información esencial, se decantan por la velocidad frente al diseño. De nuevo, los dispositivos móviles están en el punto de mira del SEO, y Google quiere premiar las páginas que se adapten a esta nueva idea. La velocidad de carga sigue siendo un lastre por complejidad de la mayoría de sites, a pesar de las diferentes generaciones de tecnologías en telefonía móvil. Las páginas realizadas con AMP se cargan de media cuatro veces más rápido y utilizan unas 10 veces menos datos que las normales.

 

– Cómo reconocer las webs con AMP

 

Las páginas web optimizadas mediante AMP HTML son versiones más ligeras, pero facilitan que si llevan algún contenido multimedia carguen de forma instantánea. Seguramente, ya habrás entrado en alguna página con versión AMP: llevan incorporado el /amp/ al final de la URL. Un ejemplo podría ser el actual post (puede que incluso ya estuvieras visualizándolo); estas páginas también son visibles desde un ordenador normal:

 

https://mibloguel.com/instala-las-amp-de-google-en-tu-wordpress/amp/

 

Como verás, la presentación es un poco más sencilla ya que no lleva cargado la personalización del tema, menús o widgets varios; lo justo para que accedamos al contenido expresamente.

Además, Google ha ampliado este servicio a todas sus búsquedas móviles; podrás identificar estos resultados por medio del icono de Google AMP en los rankings orgánicos:

 

AMP Icono

 

Los iconos de Google AMP van a tener un click-through-rate mejorado ya que estos resultados destacarán sobre el resto. Quienes realizan búsquedas en dispositivos móviles, comenzarán a escudriñar las páginas Google AMP específicamente ya que accederán a ellas antes que las páginas móviles tradicionales.

 

– Quién debería usar AMP

 

Google ha puesto todo su empeño en el proyecto, así que tendrás que prestar atención si te preocupa algo tu posicionamiento web; si un cambio nos favorece en los resultados de búsqueda, tiene toda nuestra atención. Pero también es verdad que, en algunos casos, no está hecho a la medida de todo el mundo.

Si tienes una web nueva con muy poco contenido, un blog personal o de empresa, tienes que implementar ya las AMP; incluso me atrevo a decir que en los próximos meses no vas a tener otra opción. Esto es un método de mejorar la velocidad de carga de tu web, enriquecer la experiencia del usuario móvil y respaldado por Google; vas a conseguir beneficiarte en términos de SEO mediante unos sencillos pasos que describiré a continuación.

En el caso de que lleves una tienda online o una web en la que el diseño y la creatividad son la forma de llegar a tus clientes, quizás las AMP no son una necesidad ahora. Más adelante es posible, si evoluciona el proyecto o surgen variaciones en esta tecnología. De todas formas, no bajes la guardia y aplica las alternativas que puedas para optimizar el site. Google se toma muy en serio lo que funciona, y puede apretar el acelerador de su algoritmo en cualquier momento.

 

– Creando las AMP en WordPress

 

Para activar las AMP en sitios creados en WordPress, basta con usar un simple plugin. Pero si quieres que quede todo preparado para la posterior indexación, compatibilidad con Analytics y que se muestre una página /amp/ un poco más interactiva, habrá que echar mano de otros plugins y tocar algo de código. Tranquilo, vayamos por partes.

 

1. Instalación del plugin para AMP

 

Lo primero, descargamos e instalamos el plugin AMP de Automattic, bien desde su página o buscándolo dentro de nuestro CMS favorito en la sección de Plugins. Que no os asuste su bajo número de versión o el mensaje de compatibilidad: viene de la mano de uno de los mejores desarrolladores de WordPress, es totalmente fiable y funciona a la perfección. Es muy sencillo en su propósito: el plugin añade una etiqueta meta en la cabecera de las páginas para que los bots de Google sepan que existen estas nuevas versiones.

Cuando actives el plugin, todas las URLs de las entradas en tu WordPress tendrán una versión /amp/. Y ya está, puedes ir a cualquiera de tus posts en un navegador, añadir /amp/ al final de la URL (o /amp=1/, dependiendo de tu configuración en permalinks) y ver la versión AMP. Será totalmente básica, ya que este plugin no tiene personalización alguna; si necesitas lo mínimo para tu blog, con esto ya estarías preparado.

 

2. Personalizando las AMP y configurando Google Analytics

 

Siempre se puede intentar mejorar el resultado (por lo menos cambiar colores, añadir algún icono, etc.). El plugin de Automattic no tiene ningún tipo de configuración sobre el diseño de las AMP; además, si quieres tener un mejor control sobre el SEO, y quieres hacer seguimiento por Google Analytics de las AMP, necesitamos echar mano de una ayuda extra. Si ya estás utilizando el plugin Yoast SEO (deberías, es la utilidad por excelencia para SEO en WordPress), instala y activa su hermano pequeño Glue for Yoast SEO & AMP.

Con este plugin terminarás de integrar las AMP con el SEO de tu WordPress, limpiando y acoplando los metadatos que pudieran causar algún problema grave en la indexación. Los autores de Yoast han comentado que con el tiempo, sus dos plugins estarán fusionados en uno, aunque por ahora habrá que tenerlos separados. De todas formas, si accedes al menú SEO -> AMP, verás que están integrados. Ahí podrás modelar varias opciones:

 

  • Elegir los tipos de post que tendrán apoyo de AMP (las páginas todavía no tienen soporte).
  • Añadir un icono corporativo en la cabecera.
  • Definir una imagen por defecto para el post que no la tenga.
  • Modificar los colores en párrafos y enlaces.
  • Introducir código extra para la cabecera/CSS.
  • Código Google Analytics.

 

Glue for Yoast SEO & AMP - Opciones

 

Yendo a la pestaña de Analytics, podrás introducir un código de seguimiento específico si lo deseas para que Google Analytics haga recuento de forma correcta de tus resultados AMP; por defecto, estará introducido el código UA que tenías configurado en Yoast SEO.

Si miras el código de la página versión AMP, encontrarás que se ha indicado con la etiqueta canonical en qué URL se encuentra el contenido equivalente de la versión de escritorio; de esta forma se evita que sea considerado como contenido duplicado por Google.

 

3. Incluir los botones de redes sociales

 

Como ya te habrás dado cuenta, es posible que tu versión AMP no contenga los botones para compartir en redes sociales; existen plugins que son compatibles, pero son los menos y a lo mejor no es tu caso. Como es un engorro tener que cambiar o instalar uno nuevo, existe una alternativa para no abarrotar WordPress de plugins; además, tu post seguirá descargándose rápido en dispositivos móviles, que es de lo que se trata. Y por supuesto, queremos que los lectores compartan nuestros contenidos; independientemente de que lo hagan desde su smartphone y a través de nuestras AMP.

Aunque es una tecnología que busca la rapidez de descarga y usa ciertas especificaciones, sigue estando basada en HTML. Por eso, usando un sencillo código dentro del plugin, podemos volver a tener operativos los botones para compartir en redes sociales dentro de nuestras AMP.

Primero, desde WordPres entramos en Plugins -> Editor; en la nueva pantalla, arriba a la derecha, elegimos AMP en “Elige el plugin a editar“. Buscamos en los “Archivos del plugin” y pinchamos en amp/templates/single.php.

 

Archivos del plugin AMP

 

Dentro de la ventana de edición del archivo, pegamos el siguiente código dentro de la sección de encabezado <head>:

 

<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>

 

Nos quedaría tal que así:

 

Cabecera archivo single.php

 

Ahora, en el mismo archivo, pegamos el código que generará los botones de redes sociales, dentro del cuerpo del documento; necesitarás introducir tu Facebook App ID en la línea correspondiente para poder publicar en Facebook:

 

 

<div align="center">
 <amp-social-share type="twitter"
 width="60"
 height="44"> </amp-social-share>
 <amp-social-share type="gplus"
 width="60"
 height="44"></amp-social-share>
 <amp-social-share type="email"
 width="60"
 height="44"></amp-social-share>
 <amp-social-share type="pinterest"
 width="60"
 height="44"></amp-social-share>
 <amp-social-share type="linkedin"
 width="60"
 height="44"></amp-social-share>
 <amp-social-share type="facebook"
 width="60"
 height="44"
 data-param-app_id="0000000000000000"></amp-social-share>
 </div>

 

Así debería ir:

 

Cuerpo archivo single.php

3.1 Facebook App ID

Si no sabes cuál es tu Facebook App ID o no tienes uno, tan sencillo como entrar en Facebook for developers para pedirlo. Introduce tus datos de Facebook, y busca una aplicación o añade una nueva rellenando los datos del formulario:

 

Facebook App ID

 

Escribe un nombre para la aplicación (por ejemplo “MiNuevaApp“), un correo de contacto y elige una categoría cualquiera. Se creará el identificador de la aplicación; copia este número y sustitúyelo en la línea:

data-param-app_id=”0000000000000000“>

 

4. Validando y testando nuestras AMP en Google

 

Teniendo ya nuestras entradas con el formato AMP, Google las irá indexando (a su ritmo, eso sí). No esperes tenerlas todas al mismo tiempo, y lo normal es que cualquier corrección que hagas tarde varios días en aparecer (y seguramente tengas que corregir algo).

Para hacer una validación de las páginas, puedes hacerlo desde el navegador Chrome. Entra en una de las páginas AMP y añade “#development=1” al final de la URL. Pulsa Control + Mays + I (o entra en “Herramientas para desarrolladores“) y selecciona “Console” en el menú. Refresca la página pulsando la tecla “F5” y en la ventanita debería aparecer el mensaje “AMP validation successful” (quiere decir que está todo bien), o un listado con correcciones por hacer:

 

Herramientas para desarrolladores - Console

 

También debes hacer el seguimiento desde tu cuenta de Search Console; entra en tu perfil de la página web y en el menú pulsa Aspecto de la búsqueda -> Accelerated Mobile Pages. Ahí te irán apareciendo las páginas AMP indexadas y las que tengan problemas, para ir corrigiéndolas. Con el tiempo, podrás hacer búsquedas desde un navegador móvil y aparecerán en los resultados de Google.

Por supuesto, no es instalar y ya está. Aunque el plugin te creará todas las entradas en versión AMP, tendrás que supervisar todo el proceso de indexación. Con los plugins recomendados no encontrarás dificultades; si quieres tener páginas más completas, sigue los pasos relatados para que queden más completas. Es verdad que hay que estar un poco más pendiente, pero tener tus posts preparados para la nueva característica de Google para las búsquedas móviles, es algo que merece la pena.

 

Si quieres hacer una pregunta, o te gustaría aportar algún comentario, estaré encantado de leerte.

¡Comparte! 😉
Tweet about this on TwitterShare on FacebookShare on Google+Share on LinkedInPin on PinterestEmail this to someoneBuffer this page
Tagged , , . Bookmark the permalink.

16 Responses to Instala las AMP de Google en tu WordPress

  1. Robert says:

    Hola Miguel, muy bueno tu artículo.
    Me ayudó a configurar AMP en mi blog. Muchas gracias!
    Solo tuve problemas con el plugin Glue. Al inicio no fue posible guardar el código de Analytics. Finalmente lo logré. Debe ser el código de AMP para Analytics.

    • MiguelAngelddl says:

      Hola Robert, muchas gracias por tu comentario.

      Me alegro que te sea útil. Ahora solo tienes que estar pendiente del Search Console para revisar cómo te va indexando cada página AMP.
      Recuerda borrar si tienes un plugin de caché para que no interfiera en el proceso.

      Un saludo.

  2. Dani says:

    Hola Miguel,

    Muy buen artículo, llevaba tiempo buscando una guia para usar AMP en mi página, porque mirando analytics veo que mi masa principal de visitas viene desde móvil, y quería usar la tecnología AMP para potenciar las visitas, y con la guía que has hecho me veo capaz de hacerlo.

    A ver si se nota en los resultados

    Saludos

    • MiguelAngelddl says:

      Buenas Dani.

      Así es. Cada vez van a ser más las visitas que lleguen por medio de dispositivos móviles, y tendremos que preparar nuestras webs para ello.
      Google ha puesto a nuestra disposición una tecnología práctica y muy interesante, y sin duda hay que aprovecharla.

      Saludos.

  3. Hey,

    I’m the author of AMPforWP plugin
    AMPforWP
    I would appreciate if you could have a look and share your thoughts in a review 🙂

    Regards,
    Ahmed Kaludi

  4. Hola Miguel Angel. Lo instalé pero lo he vuelto a borrar. Esperare un poco a ver si evoluciona un poco todo ya que el post al que accedo sólo se vé bien una vez hago clic en deja un comentario. Hasta que se hace clic y en el caso que se haga me genera error en el formulario de suscripción, caja de autor y las imagenes de widgets. Un desastre vamos. O sacan un plugin más compatible o las amp muy a mi pesar tendrán que esperar.

    El artículo genial eso si, y en otra web me ha funcionado sin problema todo perfecto pero genera muchas incompatibilidades y mi web personal no va bien.

    Un saludo

    • MiguelAngelddl says:

      Buenas José.

      Ten en cuenta que el plugin lo único que hace es traducir la página tal cual, sin añadir la parafernalia de las páginas originales como iframes, widgets, etc.
      Si quieres añadir más instrumentos a la página amp, debes usar código (tal como hemos hecho con los botones de redes sociales). Y tiene que ser el código específico de amp html. Un buen sitio para empezar a empaparse, es la página de AMP Project.

      También puedes usar algún plugin alternativo. Aquí en los comentarios han puesto uno (lo siento, no lo he probado).

      Es verdad que instalar las amp no es tan directo como puede parecer en principio (en realidad lo es, pero tiene su período de adaptación, y por supuesto, indexación). Mi recomendación es que no tires la toalla; mira si has seguido todos los pasos dentro de WordPress e intenta hacer más pruebas. Tienes tiempo por delante, a fin de cuentas los bots de Google no te las van a examinar todas desde el primer día (se lo toma con calma con las amp, vaya 🙂 ). Y los beneficios que nos va a reportar en materia de SEO, creo que merecen mucho la pena.

      Saludos.

  5. Carmen says:

    Hola Miguel Angel,

    Mi página web no esta hecha con WordPress, está hecha mano. ¿Qué deberia poner en el codigo para contar con AMP?

    Muchas gracias! Esta información es realmente útil!

    • MiguelAngelddl says:

      Hola Carmen.

      Pues como tienes que introducir el código a mano, lo ideal es entrar en la página AMP Project (el enlace está en mi comentario anterior). Ahí encontrarás los listados y archivos que tienes que subir al servidor para crear páginas AMP.

      El tutorial está muy bien explicado, y te permite añadir más opciones para que el resultado sea muy parecido a las páginas normales.

      Saludos.

  6. borjagiron says:

    Te recomiendo que la cambies a WordPress lo antes posible. Un saludo!

  7. borjagiron says:

    Muy buen post! Yo he instalado el plugin Ahmed Kaludi y funciona muy bien con Yoast SEO. Probaré el que comentas más adelante ya que es de Yoast. Lo bueno de AMPforWP es que vienen ya los botones sociales y otras muchas opciones sin tocar código. Un saludo y gracias por el post!

    • MiguelAngelddl says:

      Hola Borja.

      Pues ahí queda tu recomendación. Cuantas más posibilidades tengamos, mejor.
      Gracias por tus comentarios y aportación.

      ¡Saludos!

  8. Hola Miguel.
    Todo perfecto! ;). gracias a tu estupenda explicación. Rara vez doy a la primera con los códigos y esta vez ha sido tan rápido que ni yo me lo creo 😀
    Mil gracias y ¡buen fin de semana!

    • MiguelAngelddl says:

      Buenas Ana, qué tal.

      Me alegra que te haya servido el post. Es verdad que puede parecer confuso al principio, pero he intentado concretar al máximo todos los pasos, y creo que el resultado ha sido satisfactorio.

      Un saludo, gracias a ti por el comentario y, ¡buen fin de semana! 🙂

  9. Ramón says:

    Hola Miguel, gracias por la información que compartes. Quería consultarte si sabes cuánto tiempo tarda Google en indexar y reindexar ese contenido amp. El motivo es que por un error se me han indexado las páginas amp con un error 404 y quiero decirle al buscador que ya está resuelto, que indexe las páginas de nuevo ¿puedo hacerlo?¿cuánto tiempo pasa hasta que sea efectivo el cambio?. Gracias por adelantado.

    • MiguelAngelddl says:

      Qué tal Ramón.

      Pues he comprobado que Google se lo toma con calma con el tema de las AMP. Lleva varios días indexar todo el contenido, pero tranquilo que termina haciéndolo.
      Para notificar a Google los cambios y echar un vistazo al estado de indexación, puedes usar Google Search Console. En el Menú Apariencia en el buscador->Accelerated Mobile Pages verás las páginas AMP y si alguna tiene cualquier problema. Para decirle a Google que envíe de nuevo a sus bots, desde el menú Rastreo->Explorar como Google tienes la opción de solicitar una nueva indexación.
      Saludos.

Comparte un comentario: