Cómo configurar correctamente AMP para WordPress

Según un estudio realizado por Google, más del 50% de las búsquedas en todo el mundo se realizan a través de dispositivos móviles. Como tal, asegurarte de que tu sitio de WordPress se cargue rápidamente y se vea bien para esos usuarios debería ser una prioridad. Afortunadamente, la iniciativa Google Acelerated Mobile Pages (AMP) hace que esta tarea sea mucho más fácil.

En este artículo te explicaremos cómo configurar AMP en WordPress de dos maneras:

  1. Usando el plugin AMP for WordPress.
  2. A través del plugin AMP for WP – Accelerated Mobile Pages.

También explicaremos qué es AMP para WordPress y discutiremos cómo validarlo una vez que se haya completado la configuración. ¡Empecemos!

Qué es AMP para WordPress (y cómo puede beneficiar a tu sitio)

amp-wordpress-homepage

Google Acelerated Mobile Pages (AMP) es una biblioteca de código abierto que te ayuda a crear versiones rápidas, con desplazamiento fluido y desglosadas de tus páginas web que se ven geniales en dispositivos móviles. AMP es extremadamente fácil de usar, basándose en plataformas y marcos existentes. Además, es totalmente compatible con WordPress.

En pocas palabras, Google AMP funciona al permitirte crear un duplicado de tu sitio usando AMP HTML. Este proceso elimina la mayoría de los elementos que hacen que tu sitio web se cargue lento (JavaScript, scripts de terceros, etc.). Google luego reduce aún más para tiempos de carga aún más rápidos.

Google AMP ofrece muchos beneficios, aunque también tiene algunos posibles inconvenientes. Exploremos ambos lados de la moneda. En primer lugar, las ventajas incluyen:

  • Una mejora en la optimización para motores de búsqueda (SEO). El beneficio más obvio que proporciona Google AMP es aumentar la velocidad. Dado que la velocidad de la página es un factor crítico cuando se trata del posicionamiento de tus páginas en Google, esto puede ayudar a que tu sitio sea más visible. Google AMP también se asegurará de que las páginas de tu sitio aparezcan en el carrusel de Google News, que se ubica en la posición superior de las búsquedas móviles (lo que ayuda aún más a tu SEO).
  • Una experiencia de usuario mejorada. Se estima que un 33% de todas las ventas potenciales fallan cuando un sitio web no está optimizado para dispositivos móviles. Un estudio aún más preocupante reveló que el 57% de los usuarios de Internet dijeron que no recomendarían un negocio con un sitio web móvil mal diseñado. Google AMP facilita la creación de páginas web móviles fáciles de usar, para ayudarte a evitar estas trampas.
  • Mayor rendimiento del servidor. Google AMP se beneficia de algunas de las características de optimización clave de Google. Reduce el uso del ancho de banda para las imágenes en un 50% (sin afectar la calidad de la imagen) y aumenta el rendimiento del lado del servidor. Al reducir la carga en tu servidor, AMP ayuda a mejorar el rendimiento de tu sitio.

Por otro lado, estos son los posibles inconvenientes asociados al uso de Google AMP:

  • Limitaciones en CSS y JavaScript. Aunque Google AMP te permite lograr tiempos de carga vertiginosos, esto puede ocurrir a expensas de los elementos de marca. AMP eliminará los gráficos de alta definición, animaciones elaboradas y otros elementos llamativos que usan CSS y JavaScript.
  • Solo se muestran las páginas almacenadas en caché. La alta velocidad de Google AMP se pueden atribuir en parte al hecho de que permite que Google muestre versiones en caché de tus páginas web. Por este motivo, es posible que tus usuarios no siempre tengan acceso a la última versión de tu contenido.
  • Capacidades de ingresos publicitarios restringidas. Aunque Google AMP admite anuncios, el proceso para implementarlos es bastante complicado. También tiene una integración limitada con plataformas publicitarias externas.

Si estos inconvenientes son suficientes para detenerte, podrías considerar mejor invertir en un diseño web responsive para tu sitio. Sin embargo, si estás buscando una forma rápida y fácil de hacer que tus páginas web se vean y funcionen bien en los dispositivos móviles, vale la pena considerar Google AMP.

En la siguiente sección cubriremos dos métodos para configurar AMP en WordPress, con la ayuda de algunos prácticos plugins de WordPress para páginas móviles aceleradas.

Cómo configurar AMP en WordPress usando 2 plugins

Para configurar AMP en tu sitio, necesitarás un plugin AMP para WordPress. Antes de continuar con cualquiera de los siguientes métodos, te recomendamos hacer una copia de seguridad de tu sitio de WordPress. Una vez que hayas hecho eso, ya estás listo para comenzar.

1. Usa el Plugin AMP for WordPress

AMP for WordPress es una herramienta excelente si quieres configurar AMP para tu sitio de WordPress de forma rápida y sencilla. Aunque la versión predeterminada tiene una cantidad mínima de funciones para personalizar tu configuración de AMP, tus opciones se pueden ampliar con la ayuda de plugins adicionales. Cubriremos ese proceso más adelante. Por ahora, veamos cómo configurar el plugin.

Primero, ve a Plugins -> Añadir nuevo en tu escritorio de WordPress. Escribe ‘AMP for WordPress‘ en la barra de búsqueda y busca el plugin AMP correcto para WordPress. Luego, instálalo y actívalo.

A continuación, ve a la nueva pestaña Apariencia > AMP en tu panel. Esto abrirá la página del personalizador de AMP. Una vez allí, selecciona la pestaña Diseño:

Captura de pantalla de la página de configuración general de AMP for WordPress Plugin

Una vez allí, marca las casillas debajo de Compatibilidad con tipos de contenido para las opciones que quieres incluir en tu AMP para WordPress, y haz clic en Guardar cambios.

Probablemente notarás que no hay muchas opciones de personalización aquí. Afortunadamente, hay varios plugins que puedes usar para ampliar tus opciones. Por ejemplo, puedes usar Glue for Yoast SEO & AMP para integrar el popular plugin Yoast SEO con tu configuración de AMP.

Ve a Plugins > Añadir nuevo, luego busca, instala y activa el plugin Yoast SEO.

Después de eso, haz lo mismo con el plugin Glue for Yoast SEO & AMP. A continuación, navega a SEO> AMP en tu escritorio. Desde allí, puedes seleccionar si quieres habilitar las publicaciones y los tipos de medios para que tengan compatibilidad con AMP:

Tipos de publicaciones de The Glue for Yoast SEO en la página

Luego, presiona el botón Guardar cambios. También puedes configurar ajustes adicionales en la pestaña Diseño (Design). Allí puedes establecer un ícono para tu sitio AMP de WordPress, ajustar tu combinación de colores e incluso agregar CSS personalizados:

Captura de pantalla de la Pestaña Glue for Yoast SEO Diseño

Una vez más, no olvides guardar los cambios cuando hayas terminado de configurar tu sitio.

AMP for WordPress es un excelente plugin si quieres agregar funcionalidad AMP básica a tu sitio. Sin embargo, si quieres un mayor control sobre la apariencia de tu sitio WordPress con AMP (y la posibilidad de ampliar su funcionalidad aún más) nuestro próximo plugin WordPress de Accelerated Mobile Pages puede adaptarse mejor a tus necesidades.

2. Instala el plugin AMP for WP – Accelerated Mobile Pages

Además de proporcionar una interfaz elegante y amigable para que principiantes puedan configurar sus páginas, este plugin para WordPress AMP se puede integrar con muchas herramientas adicionales. Estos incluyen WooCommerce (el plugin líder de comercio electrónico para WordPress), Alexa para mejorar tus estrategias SEO, notificaciones de OneSignal y más.

Para usar este plugin de AMP para WordPress, primero ve a Plugins > Añadir nuevo en tu escritorio. Busca ‘AMP for WP‘ e instala y descarga el plugin:amp-for-wp

A continuación, ve a la nueva pestaña AMP en tu tablero de WordPress. Verás un menú desplegable con secciones para SettingsDesignExtensions, etc. Echemos un vistazo más de cerca a la opción de Settings:

meta descripciones, integración con plugins de SEO, etc.

  • Rendimiento: hay una configuración única para activar y desactivar la minificación de archivos. La minificación puede mejorar aún más la velocidad de tu sitio.
  • Analytics: Aquí puedes configurar la integración con Google Tag Manager, así como las opciones de analítica.
  • Comentarios: Esto te permite configurar si quieres incluir comentarios de WordPress, Disqus y/o Facebook en tu AMP para WordPress.
  • Configuración avanzada: Puedes ingresar HTML personalizado para encabezados y pies de página, configurar la redirección móvil y activar o desactivar las imágenes retina.
  • Asegúrate de hacer clic en Guardar cambios para cada una de las configuraciones anteriores una vez que las hayas configurado. Después de eso, selecciona la pestaña Design:

    AMP WooCommerce Pro, el uso de tipos de publicaciones personalizadas y más:

    amp-for-wp-extensions

    También es posible comprar temas Premium de AMP. Puedes verlos yendo a Design > Themes en tu escritorio. Hay opciones que se adaptan específicamente a tipos de sitios web particulares, como sitios de noticias, revistas, etc. Además, hay algunos temas multiusos destacables.

    Si quieres disfrutar de funciones aún más avanzadas, hay varios planes Premium disponibles para este plugin. Estos van desde el plan Personal (para un solo sitio desde USD 149 al año) hasta el plan Agency (para sitios ilimitados por USD 499 al año).

    Cómo validar tu sitio AMP de WordPress

    Luego de haber configurado alguno de los plugins de AMP para WordPress, hay un paso más a seguir. Deberás validar tu AMP para WordPress para asegurarte de que las plataformas compatibles puedan acceder y enlazarse. La validación también es una forma práctica de obtener una lectura de los errores de AMP con el fin de resolverlos.

    Un método rápido y fácil de realizar la validación de AMP implica usar las herramientas de desarrollo de tu navegador. Para hacer esto, necesitarás abrir una página AMP en tu navegador preferido (en este ejemplo, usaremos Google Chrome). Luego deberás agregar lo siguiente al final de la URL de la página:

    #desarrollo=1

    Una vez hecho eso, abre la consola de herramientas para desarrolladores de tu navegador. Para Google Chrome, esta es la consola de Chrome DevTools. Si hay errores, se resaltarán en rojo, junto con un análisis de lo que causó el error.

    Por lo general, los errores de validación son causados ​​por los prefijos inválidos, formato o código incorrecto y/o etiquetas no permitidas. En la mayoría de los casos, una opción para corregir el error estará presente en la lectura. Sin embargo, el proyecto Google AMP también enumera métodos para corregir errores de validación comunes si no hay una opción de reparación automática.

    Otro método efectivo de validación de AMP es usar la extensión AMP Validator para Google Chrome y Opera.

    Esta herramienta proporciona una visualización simple de errores (iconos rojos), así como sus causas. Además, si estás ejecutando AMP Validator en una página que no es de AMP, aparecerá un icono de extensión azul que te vinculará a la versión de AMP de esa página. Esta característica presenta una forma útil de evaluar elementos del tema de tu sitio que pueden evitar que AMP para WordPress se visualice correctamente.