WordPress AMP: Cómo configurar Google AMP + 4 mejores plugins

Si te preguntas cómo configurar una página AMP de WordPress, no estás solo.

Los administradores de sitios web, en un intento de optimizar su sitio para los usuarios móviles, investigan Google AMP, sólo para encontrar más preguntas que respuestas.

¿Qué es AMP? ¿Por qué lo necesito para mi sitio web? Si quiero páginas AMP, ¿cómo puedo empezar?

En esta guía de AMP responderemos a estas y otras preguntas.

Esto es lo que trataremos:

¿Qué es Google AMP?

Google AMP son las siglas de Google Accelerated Mobile Pages y se trata de un catálogo de código abierto de páginas web adaptadas a dispositivos móviles. AMP está pensado para que estas páginas móviles se carguen más rápido y sea más fácil desplazarse por ellas.

En realidad, lo que ocurre es que Google AMP crea un duplicado de tu sitio web en formato HTML AMP, que se construye sobre tecnologías web previamente existentes.

Esto elimina muchos de los elementos de su sitio que hacen que cargue más lentamente, haciéndolo a su vez más rápido. Además, Google "aplana" el sitio para que cargue aún más rápido.

Google lanzó AMP en octubre de 2015 centrándose principalmente en la velocidad. Eso tiene sentido porque 53% de personas abandonan un sitio web si tarda más de tres segundos en cargarse. Y 73% de usuarios de móviles dicen haber visitado un sitio web demasiado lento.

Pero, ¿cómo afectan estas cifras a su cuenta de resultados? ¿Por qué es importante la AMP?

AMP importa por esta estadística: un retraso de un segundo en el tiempo de carga puede suponer un 7% pérdida de conversiones.

Hoy en día, muchas empresas dependen de sus sitios web para convertir, como es probablemente el caso de su negocio. Así que ya ves por qué un tiempo de carga rápido puede potencialmente hacer o deshacer el crecimiento de tu empresa.

He aquí otra razón por la que AMP es importante: si un motor de búsqueda ve que su sitio no se carga lo suficientemente rápido para los usuarios móviles, Google no lo mostrará en la parte superior de los resultados de búsqueda.

Por eso, muchas de las empresas más conocidas han implementado AMP en sus sitios, como WordPress, Pinterest, LinkedIn y Reddit.

Para estar a la altura de esta nueva innovación, nuestro propio tema, Astraes uno de los pocos temas con compatibilidad nativa con AMP. Anunciado a principios de año, es uno de los mayores saltos que hemos dado para asegurarnos de que su sitio de WordPress esté actualizado con velocidad, en todos los dispositivos y plataformas.

Ventajas de utilizar AMP en un sitio web WordPress

¿Cómo puede beneficiar a tu tráfico y a tu negocio el uso de un sitio WordPress AMP? Estas son las ventajas de la optimización para AMP.

AMP es gratis

Desde el lanzamiento de AMP, su uso ha sido completamente gratuito para cualquiera. Es una de las muchas herramientas gratuitas que Google ofrece a los administradores de sitios web. Básicamente, Google quiere que la gente tenga una mejor experiencia usando su servicio, y tu sitio es parte de esa experiencia. Entonces, ¿por qué cobrarte por hacer que tu sitio sea más fácil de usar?

Optimización para motores de búsqueda

Google prefiere mostrar a los usuarios los sitios que forman parte de AMP, por lo que tener páginas AMP en tu sitio te da más posibilidades de aparecer en la primera página de los resultados de búsqueda.

Además, el uso de AMP ayuda a reforzar la velocidad de la página, que es un factor importante cuando se trata de SEO. Cuanto más rápido se cargue el sitio, más probabilidades tendrá Google de clasificarlo mejor en los resultados de búsqueda.

Además, Google AMP se asegura de que tu sitio aparezca en el carrusel de noticias de Google, que es más prioritario que los resultados de la mitad superior de la página en móviles.

Mejor experiencia de usuario Con los sitios web AMP WordPress

El uso de AMP no sólo carga su sitio web más rápido, sino que también es más cómodo para los visitantes del sitio. La velocidad es uno de los factores más importantes para un sitio web. Como hemos mencionado anteriormente, la mayoría de la gente abandona un sitio web si no carga lo suficientemente rápido.

Así que ofrecer a sus usuarios una mejor experiencia con AMP significa que podría ver menos rebotes, clientes más contentos y un posible aumento de las ventas.

Mejora del rendimiento del servidor

Como AMP elimina los elementos de tu página que la ralentizan, el ancho de banda necesario disminuye. Y cuanto menos ancho de banda necesite tu sitio, mejor será el rendimiento de tu servidor.

Evita grandes marcos

Participar en AMP puede ayudar a evitar que los sitios utilicen grandes marcos de hojas de estilo en cascada (CSS) y JavaScript (JS).

Opciones de publicidad

Si tu sitio está en AMP, tienes opciones de publicidad que pueden ser exclusivas para los usuarios móviles que visiten tu sitio. Los anuncios aparecerán de forma diferente en tus páginas AMP que en tu sitio normal, lo que significa que puedes crear y compartir anuncios específicos para móviles.

Optimización automática de imágenes

Cuando creas una versión AMP de tu sitio, todas tus imágenes se optimizan para los usuarios móviles, incluyendo convertir imágenes a formato WebP cuando sea necesario. De este modo, podrá ofrecer a sus visitantes móviles una entrada de blog o una página de fácil lectura.

Es más fácil de lo esperado

Implementar AMP en tu sitio de WordPress es mucho más fácil que en muchas otras plataformas de creación de sitios web, gracias a algunos plugins muy útiles (más sobre esto a continuación).

Es de código abierto

Como AMP es de código abierto, sigue mejorando. Además, es más seguro porque todo es público, lo que significa que hay menos posibilidades de que alguien o algo pueda corromper todo el sistema.

¿Lo sabías? Astra es en realidad uno de los pocos temas, aparte de los temas por defecto de WordPress que soportan AMP de forma nativa. Así que por qué no intentarlo y probar AMP en Astra?

Cómo configurar Google AMP para WordPress - Habilitar AMP en WordPress

Ahora vamos a ir a través de los pasos para configurar Google AMP para su Sitio web WordPress. No es muy complicado, por lo que este tutorial debería eliminar la posibilidad de errores.

Utilizaremos el plugin oficial de WordPress AMP y el AMP para WP como ejemplos.

1. Instalar y activar el plugin AMP

Si utilizas WordPress.com, no podrás instalar ningún plugin a menos que te actualices a su plan de empresa.

Sin embargo, si tienes un sitio autoalojado en WordPress.org, podrás instalar cualquier plugin que necesites.

Para instalar un plugin, puedes utilizar la función de búsqueda yendo a Plugins → Añadir nuevo y escribiendo "plugin AMP" en la barra de búsqueda. Una vez que encuentres el plugin, haz clic en "Instalar ahora".

Si quieres subir el plugin AMP desde tu ordenador, simplemente pulsa el botón "Subir plugin" en la parte superior de la página y sube tu plugin.

A continuación, tendrás que activarlo. En la página "Instalar plugin", pulsa el enlace "Activar plugin" para que el plugin empiece a funcionar en tu sitio.

2. Ajuste la configuración

Una vez activado el plugin, ya puedes ajustar la configuración para personalizar el aspecto de tus páginas AMP.

Ve a la pestaña AMP > General del panel de control. Aquí es donde puedes configurar el plugin.

Una vez que hayas ajustado la configuración a tu gusto, pulsa el botón "Publicar". Tu sitio AMP será visible para los usuarios y Google podrá descubrirlo.

También puedes elegir si tus entradas, páginas o ambas se mostrarán en tu sitio AMP. Desmarca la casilla de Plantillas compatibles y verás más opciones.

Elija las opciones necesarias y haga clic en "Guardar cambios."

Si sigues buscando otras opciones de personalización puedes utilizar varios plugins como el Glue for Yoast SEO & AMP para integrar el plugin Yoast SEO en tu configuración de AMP. Gracias a una buena colaboración con Google, la funcionalidad de este plugin ahora forma parte tanto de Yoast SEO como del plugin oficial de AMP.

Pero para añadir este plugin simplemente vaya a "Plugins", haga clic en "Añadir nuevo", a continuación, busque el "Yoast SEO & AMP"

Haga clic en "Instalar ahora" y luego en "Activar". Después de activar el plugin Yoast SEO, navega hasta "SEO" y luego haz clic en "AMP". Te proporcionará otras opciones de personalización para tu página, simplemente no olvides hacer clic en el botón "Guardar cambios".

3. Previsualice sus páginas AMP

Ahora puedes previsualizar tu sitio AMP antes de publicarlo. Solo tienes que visitar cualquiera de tus páginas o entradas de blog y añadir /amp/ al final de la URL.

He aquí un ejemplo:

http://yoursite.com/blog-post-title/amp/

Con esto, sabrás si tu sitio AMP está listo para funcionar.

Cómo configurar Google AMP para WP Plugin

Si busca un diseño y una funcionalidad más avanzados, más sencillos Google Analytics y otras herramientas adicionales como WooCommerce, Alex para tus estrategias SEO y OneSignal push-button notifications, entre otras.

1. Instalar y activar el plugin AMP para WP

Para instalar este plugin de AMP para WP, vaya a "Plugins", haga clic en "Añadir nuevo" y busque "AMP para WP". Haga clic en "Instalar" y luego "Activar" el plugin.

2. Ajuste la configuración

Ahora puedes usar el plugin AMP para WP, simplemente navega a "AMP" en tu panel de WordPress. Se abrirá el personalizador dividido en dos secciones: Configuración y Diseño.

La sección Ajustes muestra principalmente las características de backend del plugin que incluye, entre otras, las siguientes:

• SEO - para meta descripción e integración con Plugins SEO.
• Rendimiento - para activar o desactivar la minificación de archivos para aumentar la velocidad del sitio.
• Analytics - para la integración con Google Tag Manager.
• Configuración avanzada: para personalizar el HTML de cabeceras y pies de página, configurar la redirección a móviles y activar y desactivar las imágenes retina.

La otra sección importante es la de Diseño, que controla el aspecto de la salida AMP, que incluye, entre otras cosas, lo siguiente:

• Selector de temas: para seleccionar temas en el menú desplegable.
• Diseño, encabezado y pie de página, y barra lateral de la página de inicio - para esquemas de color y tipografía.
• Social: para la selección de pantallas de redes sociales.

Haz siempre clic en el botón "Guardar cambios" cuando hayas terminado de personalizar tu sitio web AMP.

Cómo comprobar que Google AMP funciona correctamente

Ahora tienes que asegurarte de que tu sitio AMP funciona correctamente. Hay dos formas principales de validar tu WordPress AMP, ambas te darán una lectura de tu código y de cualquier error que necesites corregir.

Herramienta de prueba de AMP de Google

La forma de probar su sitio Google AMP es a través de Herramienta de pruebas AMP de Google. Lo lanzaron en octubre de 2016, justo un año después del lanzamiento de la propia AMP.

¿Cómo se utiliza la herramienta de pruebas AMP de Google?

Bien, una vez que llegue a la página principal de la herramienta de pruebas, sólo tiene que introducir la URL de su sitio, página o entrada en el cuadro y pulsar "URL de prueba." También puede pegar el código de su sitio web y hacer clic en "URL de prueba."

A continuación, Googlebot analizará la optimización AMP de su sitio, incluida la validez del marcado AMP y los datos estructurados.

Si tienes un sitio válido optimizado para AMP, esta herramienta te mostrará una vista previa del aspecto que pueden tener tus páginas AMP en la página de resultados de búsqueda de Google.

Esta herramienta hace que sea mucho más fácil encontrar cualquier error de AMP en tu sitio, y puede ayudarte a mostrar el código que está causando el problema. También puedes compartir fácilmente los resultados del análisis con los miembros de tu equipo haciendo clic en el botón de compartir situado en la esquina inferior derecha.

Validación manual

También puede validar su AMP de WordPress manualmente.

Primero, abre una de tus páginas AMP. A continuación, añade lo siguiente a la URL:

#desarrollo=1

A continuación, abre la consola de herramientas para desarrolladores en tu navegador. Si tu página AMP tiene algún error, lo verás resaltado en rojo. También verás una explicación de la causa.

Muchas veces, los errores de validación se deben a prefijos no válidos, código incorrecto y/o etiquetas no permitidas. La mayoría de las veces, la solución se da justo al lado de la explicación del error.

Pero no siempre es así. Cuando eso ocurra, tendrás que saber cómo corregir esos problemas.

Los 4 mejores plugins AMP de WordPress para 2024

Configurar manualmente tu sitio en Google AMP es complicado. Afortunadamente, hay un montón de plugins AMP para WordPress que hacen que este proceso sea muy sencillo.

Así que echemos un vistazo a los cuatro mejores plugins AMP para WordPress.

1. AMP (El plugin oficial de WordPress)
2. AMP para WP
3. AMP WP por Pixelative
4. AMP en WordPress - weeblrAMP CE

1. AMP (El plugin oficial de WordPress)

Plugin AMP de WordPress es bueno tanto para principiantes como para aquellos que buscan mejorar la optimización de AMP en un sitio WordPress. Sin embargo, los principiantes de WP pueden tener más dificultades de aprendizaje que los expertos, ya que requiere una codificación sencilla.

Este plugin te ofrece una guía que muestra cómo puedes personalizar tu sitio AMP. Aunque puede que no sea tan fácil de usar como otros plugins de código abierto, lo están desarrollando y mejorando constantemente.

2. AMP para WP

AMP para WP es un plugin que optimiza tu sitio para Google AMP. Viene con extensiones, herramientas de diseño y soporte adicional.

Los desarrolladores lo actualizan regularmente para eliminar errores y añadir nuevas funciones, por lo que no te quedarás atascado con un plugin que nunca mejora. Es ideal para los principiantes en WordPress, ya que funciona sin requerir mucha experiencia.

AMP para WP le permite crear un diseño AMP que es diferente de su diseño regular de páginas webgracias a la función de arrastrar y soltar del Editor AMP personalizado. Esto te da un control total sobre lo que ven tus usuarios móviles en lugar de dejárselo a Google.

3. AMP WP

AMP WP dice que puede hacer que su sitio móvil cargue 5 veces más rápido utilizando sus funciones. Parece una afirmación atrevida, pero en realidad es creíble.

La lista de funciones gratuitas es bastante larga e incluye cosas como "Compatibilidad total con Google AMP" y "Compatibilidad con el plugin Automattic AMP"."

Cuando instale el plugin, puede elegir la instalación automática, que es donde WordPress transfiere todos los archivos para usted y usted no tendrá que salir de su navegador web.

4. AMP en WordPress

En AMP en WordPress - weeblrAMP CE tiene una versión gratuita y otra de pago para crear páginas AMP. Puedes crear una versión AMP completa de tu sitio web, optimizando entradas, páginas, etiquetas, categorías e incluso archivos.

Si adquieres la edición premium, podrás convertir automáticamente los formularios para que los usuarios puedan seguir utilizándolos fácilmente, incluidos los formularios de registro de MailChimp, Contact Forms 7, WooCommerce, WPForms y muchos más.

weeblrAMP viene con una configuración predeterminada, por lo que puede empezar a trabajar para usted de inmediato. Y si eres desarrollador, tienes control sobre cada parte de AMP: puedes anular plantillas, filtros y acciones. Esto significa que tu sitio AMP se verá y actuará de la forma más similar posible a tu sitio real.

Tanto si eres usuario gratuito como de pago, la interfaz tiene un diseño sencillo, aunque está orientada a desarrolladores y diseñadores.

Resolución de problemas de Google AMP

Además de ofrecerte una lectura de los errores de validación, Google suele notificarte directamente los problemas de AMP, así como los pasos necesarios para corregirlos.

Pero debes conocer los errores comunes de AMP y cómo solucionarlos porque Google no siempre da la respuesta.

Así que a continuación verás los problemas más comunes de AMP y cómo resolverlos. También puedes ver una lista completa de errores AMP específicos de Google aquí.

1. Error 404 (URL no encontrada)
2. Páginas en blanco AMP
3. "Se requiere un valor para el campo Logotipo"
4. "URL no válida para el atributo HTML 'href' en la etiqueta 'a'"
5. Scripts .js duplicados
6. Desajuste de contenidos

1. Error 404 (URL no encontrada)

Como hemos dicho antes, deberías poder añadir /amp/ al final de tus páginas AMP después de instalar el plugin AMP. Sin embargo, es posible que veas un Error 404 justo después de instalar el plugin. Afortunadamente, se trata de un problema menor con fácil solución.

Sólo tiene que actualizar los enlaces permanentes. Para ello, vaya a Configuración > Enlaces permanentes. A continuación, sin realizar ningún cambio, pulse "Guardar."

Esto básicamente refresca la estructura del permalink, incluyendo las versiones AMP de la página. Esto debería corregir el problema 404 AMP al instante.

2. Páginas en blanco AMP

Dependiendo del plugin AMP que utilices, puede que veas que tu sitio AMP carga páginas en blanco o simplemente no carga. Esto suele significar que tus páginas AMP están ahí, pero tienen errores.

Primero, actualiza los permalinks como hiciste con el error 404. Configuración > Enlaces permanentes > Guardar.

Si eso no corrige el problema, tendrá que ir a AMP > General. Asegúrese de que tanto el "Plantillas" y "Páginas" están marcadas, pulse "Guardar."

Esto debería corregir el problema. Consulta la versión AMP de cualquier entrada de blog o página para asegurarte.

3. "Se requiere un valor para el campo Logotipo"

Uno de los problemas más comunes de AMP en WordPress es recibir el mensaje de error "Se requiere un valor para el campo del logotipo" en el informe de error.

Esto tiene una solución sencilla. Significa que no has añadido un favicon o logotipo a tu sitio AMP.

Para añadir un favicon, vaya a Apariencia > Personalizar > Identidad del sitio. Bajo "Icono del sitiopulse "Seleccionar imagen"para cargar su logotipo. Una vez cargado, haga clic en "Publique."

4. "URL no válida para el atributo HTML 'href' en la etiqueta 'a'"

Si tu informe de errores muestra "URL no válida para el atributo HTML 'href' en la etiqueta 'a'" o algo similar, significa que tu sitio AMP tiene un enlace que apunta a un sitio web inexistente o con error 404.

Para solucionar este problema, haz clic en el error y visualiza la versión en vivo. Al hacer esto, probarás tu página AMP en formato HTML y se resaltará la línea en la que se encuentra el error.

Si entender los códigos HTML te parece abrumador, puedes visitar la página AMP y probar cada enlace, y luego arreglar o eliminar los enlaces rotos.

5. Scripts .js duplicados

Cuando añadas un script .js a tu página AMP, comprueba que no lo has añadido dos veces por error. Si lo has hecho, se producirá un error.

Para solucionarlo, simplemente elimine cualquier script .js adicional hasta que sólo tenga uno.

6. Desajuste de contenidos

Cuando recibes un error de "contenido no coincidente" en AMP, significa que hay contenido que estaba en la página web y que falta en la versión AMP. Normalmente, se trata de un vídeo incrustado que puede haberse eliminado.

Así que no sólo se ve mal, sino que también generará este error.

Para solucionarlo, basta con eliminar o sustituir el vídeo o el elemento de la página que sea.

Contras de Google AMP

A estas alturas, puede que pienses que participar en Google AMP es una obviedad. Pero, como todo, tiene su lado negativo.

Restricciones CSS y JS

Aunque limitar los frameworks CSS y JS ayuda a que los sitios se carguen más rápido, puede acabar eliminando elementos de marca, como gráficos, animaciones e imágenes de alta definición. Y una cosa que hace que un sitio sea único y agradable a la vista es la marca. Es posible que hayas escrito una entrada de blog que utiliza infografías, pero con Google AMP es posible que se eliminen.

Sólo muestra las páginas en caché

AMP sólo muestra las páginas almacenadas en caché, lo que significa que es posible que los usuarios no puedan acceder a tus contenidos más recientes. ¿Por qué ocurre esto? Porque Google puede mostrar los resultados más rápido cargando tus páginas en caché.

Opciones limitadas de ingresos publicitarios

Google AMP le permite anunciarse, pero el proceso es complicado y ofrece una integración limitada con otras plataformas publicitarias. Este es el proceso paso a paso para utilizar anuncios en AMP.

Puede perjudicar el compromiso

Aunque la idea de Google AMP es aumentar el engagement, algunas personas informan que el uso de AMP conlleva tasas de rebote mucho peores y menos sesiones de página.

Cuestiones de seguimiento

Las estadísticas de tus páginas AMP se rastrean y almacenan de forma separada y diferente a las de tu sitio real. Así que, a menos que seas muy cuidadoso y organizado, puedes acabar perdiendo el rastro de las estadísticas de tu sitio.

Conclusión

Si su sitio web carga incluso uno o dos segundos más lento, podría afectar drásticamente al tráfico de su sitio web. Su tasa de rebote podría aumentar. La experiencia del usuario es pobre. Y Google podría no clasificar bien tu sitio porque nota que es lento.

La velocidad es el principal aspecto positivo para implementar un plugin AMP para WordPress. Aunque usar AMP puede ayudar con el SEO, mejorar el rendimiento de tu servidor y optimizar tus imágenes, tener un sitio web rápido es la razón más convincente para usarlo.

Si estás pensando en darle a tu sitio un pequeño empujón de velocidad, pruébalo con la función Astra tema. Desde el principio, este tema está optimizado para ofrecer velocidad y seguridad. Añádele su compatibilidad nativa con AMP y tendrás algo realmente potente entre manos.