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 de Google: Accelerated 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!

Descarga la hoja de trucos de WordPress definitiva

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

Interfaz de AMP WordPress

Google Accelerated 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 página 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 (SERPs), 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 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

Plugin AMP WordPress

El plugin 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:

Diseño de AMP WordPress

Aquí puedes personalizar la forma en que se mostrará tu sitio WordPress AMP y obtener una vista previa de los cambios antes de que tu sitio esté activo. Puedes ajustar el texto, el enlace y el color de fondo de tu sitio. Además, puedes seleccionar si quieres o no un esquema de color claro u oscuro (es decir, blanco o negro) para tu sitio. Una vez que estés satisfecho con tus cambios, simplemente presiona Publicar en la parte superior de la pantalla.

También puedes configurar si quieres publicar entradas, páginas o ambos en AMP para WordPress. Para hacerlo, simplemente regresa al escritorio de WordPress y ve a AMP > Ajustes:

Configuración general del plugin AMP WordPress

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 el plugin popular Yoast SEO con tu configuración de AMP.

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

A continuación, navega a Yoast 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 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:

Sección de diseños de Yoast SEO en WordPress

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), 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:

Plugin AMP for WordPress de WordPress

A continuación, ve a la nueva pestaña AMP en tu panel de control de WordPress y elige la opción de vista del panel que prefieras. Si has seleccionado Avanzado, verás un menú con secciones para Configuración, Diseño, Extensiones, etc. Echemos un vistazo a la opción de Configuración:

Secciones del AMP plugin for WordPress

Para comenzar, consulta la práctica Guía de Inicio enlazada en esta página. Te ayudará a configurar de forma óptima la configuración de AMP para WordPress. Después de eso, puedes ejecutar las distintas opciones de AMP para WP, que incluyen:

  • SEO: esto incluye configuración de 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 los comentarios de 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 Diseño:

Pestaña Diseño AMP for WordPress

Básicamente, aquí es donde puedes personalizar el aspecto de tu sitio AMP de WordPress. Para hacer esto, puedes elegir un tema de AMP dedicado, de entre los enumerados en el menú desplegable Selector de temas.

Después de elegir un tema, puedes personalizar la apariencia. Encontrarás configuraciones de diseño para esquemas de color y tipografía (que se enumeran en la pestaña Global), opciones de visualización de encabezado y pie de página, opciones de la barra lateral de la página principal y más. En la sección Social, también puedes seleccionar qué botones de redes sociales quieres mostrar en tu sitio AMP para WordPress.

Una vez que estés satisfecho con la apariencia de tu sitio AMP, puedes guardar los cambios. También puedes obtener una vista previa simplemente yendo a Apariencia > AMP.

La versión gratuita de AMP for WP contiene una amplia variedad de características. Sin embargo, puedes mejorar significativamente la apariencia y la funcionalidad de tu sitio AMP con extensiones premium. Existen extensiones para implementar calificaciones con estrellas (que son perfectas para productos o perfiles de bienes raíces), la integración con AMP WooCommerce Pro, el uso de tipos de publicaciones personalizadas y más:

Sección de extensiones de AMP for WordPress

También es posible comprar temas Premium de AMP. Puedes verlos yendo a Diseño > Temas 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:

#development=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.

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.

Conclusión

Incluso unos pocos segundos de demora durante la carga podrían reducir significativamente el posicionamiento de tu sitio (y sus tasas de conversión) en los motores de búsqueda. Afortunadamente, como hemos visto, usar Google AMP puede ayudarte a garantizar que las páginas web de tu sitio se carguen a la velocidad del rayo en dispositivos móviles.

Además, la configuración y personalización de AMP para WordPress es simple y directa, siempre y cuando utilices el plugin de WordPress para páginas móviles aceleradas.

¿Tienes alguna pregunta sobre cómo configurar el plugin AMP en WordPress? ¡Cuéntanos en la sección de comentarios!

Author
El autor

Gustavo B.

Gustavo es un apasionado por la creación de sitios web. Se enfoca en la aplicación de estrategias SEO en Hostinger para España y Latinoamérica, así como la creación de contenidos de alto nivel. Cuando no está aplicando nuevos trucos en WordPress lo puedes encontrar tocando la guitarra, viajando o tomando un curso online.