Cómo configurar Google AMP para un blog de WordPress

Este artículo es la guía definitiva donde se explica con todo lujo de detalles la forma de configurar Google AMP para un blog de WordPress.

COMO-CONFIGURAR-GOOGLE-AMP Cómo configurar Google AMP para un blog de WordPress

En este artículo repasaremos qué es AMP (Accelerated Mobile Pages) y cómo configurar Google AMP para un blog de WordPress.

Este era precisamente uno de mis propósitos para el inicio de 2017: configurar Google AMP para Blogpocket.

Los accesos a blogs y páginas Web se realiza, cada vez más, mediante dispositivos móviles. Google también va a penalizar, a partir de enero de 2017, los sitios cuya usabilidad en dispositivos móviles no sea la adecuada.

El 53% de los usuarios móviles abandona un sitio web que tarda más de tres segundos en cargar. Eso significa que si no optimizas los tiempos de carga en dispositivos móviles, podrías estar perdiendo tráfico.

Esto ha supuesto una preocupación en Blogpocket y hemos dedicado espacio a proporcionar métodos y herramientas sencillas para optimizar los tiempos de carga, en general. Ahora hay que prestar especial atención al tiempo que tardan en cargar las páginas en dispositivos móviles.

Entonces, tenemos que resolver una problemática que posee dos caras:

¿Qué te parecería si hubiese una herramienta que solventara ese doble problema de una sola atacada?

Pues esa herramienta existe ye conoce como Google AMP.

AMP es una iniciativa de Google y otras empresas para simplificar la estructura de los sitios Web, de manera que las páginas Web de contenido carguen mucho más rápido y su usabilidad, de cara a los dispositivos móviles, sea óptima.

¿Qué es Google AMP?

Google AMP es un proyecto de Google cuya finalidad es conseguir que las páginas web para móviles se carguen mucho más rápido.

¿Cómo se consigue eso? Básicamente, simplificando al máximo el código, eliminando todo lo superfluo y destacando el contenido.

En Blogpocket siempre hemos sido partidarios del minimalismo. Así que ¡nos gusta AMP!

Grabé un podcast con una introducción a AMP. Te invito a escucharlo a continuación.

Escúchalo en SoundCloud.

Además del audio anterior, con una introducción a AMP, te recomiendo que veas y escuches completo el siguiente vídeo. En él, Juan Felipe Rincón, responsable del equipo de Calidad de Búsquedas de Google, responde a algunas preguntas muy interesantes sobre la adaptación a dispositivos móviles y AMP.

Pero las páginas AMP no solo son buenas para optimizar la velocidad de carga sino que Google les da un tratamiento especial, mostrándolas en un slider en la parte superior de los resultados.

Esta es una de las páginas de Los Archivos de Blogpocket, en formato AMP y así se ve en un móvil:

pagina-AMP-576x1024 Cómo configurar Google AMP para un blog de WordPress

Existen indicios de que Google ya considera las páginas AMP como un factor de posicionamiento. Pero, además de la oportunidad de ganar clics al aparecer en el carrousel (más bien orientado a webs de noticias, por el momento), veremos a continuación que podemos usarlas como alternativa a la versión responsive o la de plugins como WP Touch.

De esa forma, tendremos tres posibilidades para hace nuestro blog mobile frindly:

  • Sitio responsive. Esta es la forma más sencilla de tener un sitio mobile friendly. Pero el theme elegido no debe arrojar errores de usabilidad. Asegúrate bien de esto último.
  • Usar un plugin como WP Touch. Con esta opción usas un theme especialmente dedicado para móviles y que es diferente al que se muestra en escritorio. Con esta solución también debes asegurarte de que no tienes problemas de usabilidad. La ventaja es que, por ejemplo, con la versión de pago de WP Touch puedes eliminar ciertos plugins que puedes ser incompatibles con la usabilidad.
  • Páginas AMP. Esta es una alternativa muy interesante porque, además de conseguir una versión de tu blog perfectamente adaptada a móviles y sin problemas de usabilidad, optimizas al máximo la velocidad de carga de las páginas. El inconveniente es que el theme es absolutamente minimalista, exclusivamente enfocado al contenido. Y es un proyecto en desarrollo por lo que también debes asegurarte de no tener errores en el test de prueba.

Configurar Google AMP para WordPress

Automattic, la empresa que está detrás de WordPress ha desarrollado un plugin que permite configurar Google AMP.

Sin embargo, este plugin no posee ninguna opción de personalización ni configuración alguna. Simplemente, tras su instalación, el usuario (¡y Google!) tiene acceso a «loquesea.com/post/amp». Es decir, se añade al final de cada URL el sufijo «/amp».

Si te estás preguntando si se provoca contenido duplicado, no te preocupes porque las páginas «/amp» llevan el correspondiente «link rel=»canonical»».

Como sabes, el atributo «rel=”canonical”» le dice a Google qué versión del contenido duplicado es la buena.

Lo que veremos, a continuación, es que existe otro plugin, que funciona con el de Automattic instalado, y que proporciona algunas opciones de configuración. Y, sobre todo, que te permite redirigir las páginas de tu blog, en dispositivos móviles, a las correspondientes páginas AMP. Y eso es una alternativa muy interesante para disponer de un blog mobile friendly y, además, con una velocidad de carga óptima.

Plugin oficial para configurar Google AMP

amp-plugin-oficial Cómo configurar Google AMP para un blog de WordPress

Para tener páginas AMP en tu blog, instala el plugin AMP pero no hace falta que configures nada 😉 .

Este plugin solo añade páginas AMP a las entradas de un blog, no a las páginas.

Y, como ya te he indicado, no puedes personalizar nada. Vamos a ver ahora qué plugin puedes instalar para terminar de configurar Google AMP y tener muchas más opciones.

Configuración del plugin «AMP for WP»

amp-plugin-personalizacion Cómo configurar Google AMP para un blog de WordPress

Instala el plugin AMP for WP. Este plugin solo funciona si tienes previamente instalado el oficial de Automattic, AMP.

Una vez instalado, ve a la nueva opción «AMP» del escritorio de WordPress.

Configuración general

amp-general Cómo configurar Google AMP para un blog de WordPress

Para tener configurar Google AMP, empezaremos yendo a la pestaña «General».

En dicha pestaña puedes configurar el logo y añadir el código de Google Analytics. También puedes activar la redirección de las páginas de las entradas del blog, en dispositivos móviles, a las de AMP.

amp-configuracion-2 Cómo configurar Google AMP para un blog de WordPress

Además, en la pestaña «General», existen opciones para lo siguiente:

  • Crear página AMP para la frontpage. En sitios que tengan páginas de home y blog, y si quieres que la página del blog tenga AMP, pon el switch «Front Page» a «OFF».
  • Enlace a «No-AMP» en el footer. Si quieres que el usuario tenga la posibilidad de cambiar a la versión no-AMP, pon en switch «Link to Non-AMP page in Footer» a «ON».
  • Soporte RTL (right to left). Si necesitas activar el soporte de lenguaje RTL pon le switch «RTL Support» a «ON».
  • AMP en páginas. Para activar AMP también en las páginas del blog activa la opción «AMP on Pages». Si activas esta opción, debes volver a guardar los enlaces permanentes, yendo a «Ajustes > Enlaces permanentes», en el escritorio de WordPress.
  • Enlace a páginas «No-AMP» desde la cabecera. Para activar esta opción, pon a «ON» el switch «Non-AMP HomePage link in Header and Logo.

Diseño

amp-diseno-1 Cómo configurar Google AMP para un blog de WordPress

Respecto al diseño, en la pestaña «Design» hay posibilidad de elegir entre dos esquemas, dentro del desplegable «Design Selector».

Y haciendo clic en el botón «Launch post builder» del apartado «Drag & Drop Post Builder» pasas a poder configurar la estructura de cada página AMP. Ver figura siguiente.

amp-diseno-2 Cómo configurar Google AMP para un blog de WordPress

En este apartado, se pueden mover los elementos. Por ejemplo, colocar los metadatos del post debajo del título.

Es posible añadir o eliminar elementos, cambiar los colores del texto y el fondo de la cabecera; y elegir entre un esquema de color claro u oscuro.

Todos los cambios se previsualizan tanto para las versiones de escritorio como para las de tablets o smartphones.

SEO

amp-seo Cómo configurar Google AMP para un blog de WordPress

En cuanto al SEO, se pueden añadir las etiquetas sociales y Open Graph desde la configuración que tengas implementada en el plugin Yoast SEO. Para ello, pon el switch «Add Meta Tags from Yoast» a «ON».

También puedes añadir la descripción de la meta etiqueta que tengas en Yoast SEO activando la opción «Yoast Custom Description for AMP page».

Menú

amp-menu Cómo configurar Google AMP para un blog de WordPress

Haz clic en el enlace que aparece en esta pestaña para configurar el menú.

Lo ideal es que crees un nuevo menú para las páginas AMP, distinto al que muestras en tus páginas no-AMP. Para ello, ve a la pestaña «Editar Menús».

Después, selecciónalo en el desplegable «AMP menú» de la pestaña «Gestionar lugares».

Puedes añadir publicidad a tus páginas AMP.

Single

amp-single Cómo configurar Google AMP para un blog de WordPress

Aún puedes añadir más posibilidades para configurar Google AMP con esta pestaña.

Si quieres añadir los botones sociales, pon a «ON» el switch «Sticky Social Icons». Estos iconos aparecerán de forma flotante. Si quieres que aparezcan de forma fija, al pie de cada post, usa la opción «Social Icons» dentro de la personalización del diseño de páginas AMP (apartado «Diseño»).

Con «Next-Previous Links» a «ON» añadirás los enlaces de «anterior» y «siguiente» para navegar dentro de la serie de entradas del blog.

Finalmente, configura el tamaño de la imagen destacada, añade posts relacionados y los enlaces a categorías y etiquetas, si lo prefieres.

Social

En la pestaña «Social» eliges las redes sociales que aparecerán si has optado por los botones sociales en el apartado «Single» (tanto en la opción «Sticky Social Icons» como en las opciones adicionales para controlar el aspecto de las páginas individuales).

Structured Data

Personaliza aquí las imágenes por defecto de los datos estructurados.

Notifications

Si quieres mostrar el típico aviso de cookies, usa este apartado poniendo en «ON» el switch «Enable Notifications».

Traslation Panel

Y, finalmente, puedes traducir todos los textos a través de esta pestaña.

Validación

El último paso, antes de dar por buena la implantación de AMP en tu blog, es asegurarte de que tus páginas no poseen errores. Para ello, existe el validador de AMP: validator.ampproject.org.

La herramienta Search Console de Google también arroja los posibles errores que tengas en tus páginas AMP. Para ello, acude a «Apariencia en el buscador > Accelerated Mobile Pages».

¿Y si tengo un sitio de e-commerce?

AMP está especialmente pensado para sitios de noticias y blogs. Al hilo de esta duda, es revelador lo que se puede leer en la Web de «AMP for WP». Concretamente, en este artículo de su documentación: Guide to E-Commerce for AMP:

Configurar Google AMP se puede hacer en cualquier sitio y para cualquier plataforma. Sin embargo, el propósito de AMP es hacer la experiencia móvil mejor y más rápida.

Muchas personas creen que AMP es sólo para sitios de noticias y blogs, pero AMP también es apropiada para los sitios web de comercio electrónico. No obstante Google dijo: «AMP es un ajuste natural para el comercio electrónico, porque AMP hace que las páginas web carguen rápido, y las páginas rápidas ayuda con las conversiones de compra.»

En KISSmetrics.com se afirma que un sitio web de comercio electrónico que hace 100.000 dólares por día, potencialmente podría perder 2,5 millones de dólares en ventas cada año si una página tiene un retraso de ¡sólo 1 segundo!

Conclusiones

Así terminamos de configurar Google AMP para WordPress.

Pero, la pregunta del millón es ¿debemos habilitar las páginas AMP en nuestro blog?

Mi opinión es que sí. AMP es un proyecto especialmente enfocado al contenido, a lograr que las páginas con contenido carguen más rápido y sean usables.

Ahora bien, si no sales en el carrousel (y, al parecer, ahora solo salen los grandes medios periodísticos), AMP solo tiene sentido:

  • Si Google posiciona mejor tu sitio por el solo hecho de tener implementado AMP. Esto son solo suposiciones, aunque algunos seos han experimentado mejoras en el ranking solo poniendo AMP en su sitio.
  • Si usas las págínas AMP como versión mobile friendly de tu sitio. En este artículo te he explicado cómo configurar AMP para WordPress y usar las capacidades del plugin «AMP for WP» con este fin.

Es muy fácil con los dos plugins que acabamos de ver. Y, además, se resuelven a la vez los dos problemas asociados al mobile friendly.

  • Páginas que deben cargar muy rápido en dispositivos móviles para no perder visitas. Ya sabemos que si un blog tarda en cargar, la gente no volverá.
  • Usabilidad. Si las páginas para dispositivos móviles no son usables, entonces Google puede penalizarlas en el posicionamiento.

Lo importante es la velocidad de carga y la usabilidad. Da igual si lo logras con AMP u otro mecanismo, como vimos al principio (diseño responsive, plugin WP Touch, etc.). Pero AMP aporta el carrousel, dando mayor visibilidad a tu blog en móviles; así como un formato que te asegura la velocidad y la usabilidad.

En Search Console encontrarás información sobre los requerimientos y detalles de la implementacion de AMP: Directrices de la Búsqueda de Google para las páginas de AMP.

Estaré atento a tus ideas, sugerencias y experiencias, relacionadas con este artículo, en los comentarios.

¿Estás buscando hosting?
SiteGround es el hosting de Blogpocket ¡pruébalo!:SITEGROUND-EL-HOSTING-QUE-ME-GUSTA Cómo configurar Google AMP para un blog de WordPress

16 comentarios

  1. Hola antonio,

    Tu blog tiene amp, pero no tiene instalado ningún plugin para ello. esta insertado con código, ¿me podrías resumir un poco como podría hacerlo?

    saludos

  2. Hola Antonio, he realizado LAS OPERACIONES COMO INDICAS, PERO ME SURGEN DOS DUDAS.

    eN SEARCH CONSOLE ,HE VISTO QUE GOOGLE RECONOCE AMP EN ACCELERATED MOBILE Y ME INDICA QUE NO TENGO ERRORES (no estan todavias todas las páginas pero supongo será cuestión de unos días ) . pERO MI DUDAS SON:

    eSTUVE PROBANDO EN MI MóVIL Y NO ME SALE, solo SALE LA OPCIóN NORMAL, PARA QUE SALGA TENGO QUE PONER AL FINAL /AMP,

    ¿esto no lo detecta el navegador del propio teléfono de forma automática? ¿o falta indicar algo más que se me ha pasado?

    Otra duda que tengo, es que yo tengo el all in one seo pack, lo que comentas de metaetiquetas y demás, ¿sabes como se haría con este plugin? ¿o cambio de plugin y le pongo el seo yoast?

    Gracias un saludo.

    • Hola Mingo, la versión AMP sale automáticamente en las búsquedas en móviles. Pero si todavía no se han indexado todas las páginas en Google o la versión AMP contiene errores, no verás la versión AMP (esta se indica con el icono del rayito en móviles).
      Si quieres que tus usuarios de móviles vean siempre la versión AMP (no solo en las búsquedas) tienes que redirigir con el plugin «AMP for WP».
      En principio daría igual que uses All in one SEO o el Yoast SEO. Aunque yo te recomiendo este último.
      Gracias por tu comentario, saludos, :))

  3. Hola Antonio, excelente artículo. He realizado la configuración tal y como indicas en tu artículo, pero tengo el problema de que en páginas tipo categoría o principal del blog, en las que hay varias entradas resumidas con su correspondiente título, solo me sale la primera entrada las demás no.

    ¿Sabes si se debe a algo mal que he configurado?

    En tu caso veo que te salen todas sin problemas, por ejemplo en tu home te salen cuatro.

    • Hola Manuel. En principio, AMP debe mostrar las entradas que tengas configuradas para la home, página de categorías, etc. Revisa, el número de entradas que tienes en «Ajustes > Lectura». O si tienes un theme de Genesis, en la configuración del tema. Si tienes otro theme, revisa si tiene panel de configuración extra. Ya me contarás. Gracias y saludos :))

  4. Hola, Antonio. Veo que a ti no te da problemas, pero en mi caso ha sido instalar los plugins de AMP y Yoast SEO ha dejado de funcionar. Lo curioso es que solo me ha sucedido a mí, pero no al resto de administradores que estamos en la web. Creo que el problema surge con la extensión «Page Builder», que a mí me aparece y a los demás no, cuando no he sido yo el administrador que ha instalado los plugins ni quien los ha configurado. ¿Sabes a qué puede deberse o cómo puedo eliminar esta extensión sin tener que desactivar el plugin y volver a hacer todo el trabajo?

  5. Se puede realizar cambios en un sitio en blogger? porque escuchado y leído sobre las desventajas y dejar de usar algunos widgets que realmente son útiles en algunos casos.

    • Es mejor un sitio de WordPress que de Blogger. En Blogger se pueden realizar cambios pero se está más limitado. Créate un blog de prueba aquí: http://poopy.life/ Y mira las posibilidades. En Blogpocket encontrarás toda la información, incluso para migrar de Blogger a WordPress. Un saludo :))

  6. ¡Hola Antonio!

    Te escribo para decirte que en este artículo hay enlaces a archivos jpg que no están ni se ven en la página, para ver si lo puedes arreglar.

    Por ahora no voy a instalar esto de AMP. Después de configurar hoy mi blog alojado en SiteGround para que sea el más rápido del Oeste con todas tus instrucciones, voy a descansar y apuntarme esto en Pendientes, para implementarlo más adelante, quizá cuando ya tenga el sitio abierto. (Que por ahora, está en obras).

    ¡Millón de gracias!

  7. Saludos Antonio, estoy buscando el plugin amp for wp y todo indica que ya no esta disponible desde hace un buen tiempo, quisiera saber entonces que plugin debo utlilizar en su lugar? muchos saludos, y gracias de antemano.

Deja un comentario

Ver más

  • Responsable: Antonio Cambronero.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a SiteGround que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Ir al contenido