WordPress

Cómo configurar correctamente AMP para WordPress

Cómo configurar 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, asegurarse de que tu sitio de WordPress se cargue rápidamente (y se vea bien) para aquellos 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 el proceso de configuración. ¡Empecemos!

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

Captura de pantalla de la página principal de Google AMP

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. El resultado se verá similar a esto:

Un ejemplo de un sitio web de AMP

Google AMP ofrece muchos beneficios, aunque también tiene algunos inconvenientes potenciales. Exploremos ambos lados de la moneda. Primero, los pros incluyen:

  • Mejora 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 prioriza en la posición superior de las búsquedas móviles (lo que ayuda aún más con tu SEO).
  • 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é. Las altas velocidades 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 un potencial de integración limitado 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.

Opción 1: Utilizar el Plugin AMP for WordPress

Captura de pantalla de la página del Plugin AMP for 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:

AMP for WordPress en la página de plugins de WordPress

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:

La pestaña de diseño de página del personalizador de 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 > General:

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:

El plugin Yoast SEO que se muestra en la captura de pantalla de la página del plugin de WordPress

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.

Opción 2: Instalar el plugin AMP for WP – Accelerated Mobile Pages

Plugin de wordpress AMP for WP - Accelerated Mobile Pages

Además de proporcionar una interfaz elegante y amigable para principiantes para 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), métricas de Alexa, notificaciones con botones push 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 – Accelerated Mobile Pages Captura de pantalla de la página del plugin de WordPress

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:

Captura de pantalla de la página de configuración del plugin AMP for WP

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.
  • Analítica: 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:

Captura de pantalla de la opción AMP for WP Temas

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 Theme Selector.

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:

Apariencia AMPforWP> Captura de pantalla de la vista previa 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:

Página de extensiones AMPforWP Captura de pantalla

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:

Captura de pantalla de la página de temas premium de AMPforWP

Si quieres disfrutar de funciones aún más avanzadas, hay varios planes Pro 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:

AMP Validator Extension captura de pantalla de 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 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 para WordPress? ¡Cuéntanos en la sección de comentarios!

Agrega un Comentario

Dale clic aquí para dejar un comentario

This site uses Akismet to reduce spam. Learn how your comment data is processed.

¡Comienza a ahorrar hoy mismo!

Alojamientos con todo incluido y nombre de dominio por

AR$36
00
/mes