5 septiembre, 2018

Cómo configurar AMP en WordPress

Tiempo de lectura: 8 minutos

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. Por lo cual, es importante asegurarse de que tu sitio de WordPress cargue rápidamente y se vea bien. Afortunadamente, la iniciativa Google Accelerated Mobile Pages (AMP) hace que esta tarea sea mucho más fácil.

Si aún no tienes tu sitio WordPress, en este artículo te mostramos cómo crearlo.

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

1. Usando el plugin AMP para WordPress.

2. A través del plugin AMP para WP – Páginas móviles aceleradas.

También explicaremos qué es en realidad WordPress AMP y discutiremos cómo validarlo una vez que se haya completado el proceso de configuración.

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

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

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

Google AMP ofrece muchos beneficios, aunque también tiene algunos contras. Veremos ambos lados de esa moneda.

Primero, los pros incluyen:

• Un impulso a la optimización del motor 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 de la clasificación en los resultados del motor de búsqueda (SERP), 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 aumenta aún más su SEO).

• Una experiencia de usuario mejorada. Se estima que un asombroso 33% de todas las ventas potenciales falla 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 estos inconvenientes.

• Mayor rendimiento del servidor. Google AMP se beneficia de algunas de las características de optimización 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 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 con el uso de Google AMP:

• Límites de CSS y JavaScript. Aunque Google AMP te permite lograr tiempos de carga muy buenos, esto puede ocurrir en detrimento de otros elementos. AMP eliminará 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 sus páginas web. Por este motivo, es posible que tus usuarios no siempre tengan acceso a la última versión de tu contenido.

• Las capacidades de ingresos publicitarios están 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 te preocupan, podrías considerar 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, Google AMP aún vale la pena.

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

Cómo configurar WordPress AMP usando 2 complementos

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

Opción 1: utiliza el plugin AMP para WordPress

El plugin AMP para WordPress es una herramienta excelente si deseas configurar AMP para tu sitio WordPress de forma rápida y sencilla. Aunque la versión predeterminada tiene una cantidad mínima de funciones para personalizar la configuración de AMP, sus opciones se pueden ampliar con la ayuda de complementos adicionales.

Primero, vaya a Plugins> Agregar nuevo en tu editor de WordPress. Ingrese ‘AMP para WordPress‘ en la barra de búsqueda y seleccione el plugin AMP correcto para WordPress. Luego, instálelo y actívelo:

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

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 su sitio. Además, puedes seleccionar si deseas o no un esquema de color claro u oscuro (es decir, blanco o negro) para el sitio. Una vez que estén completos los cambios, simplemente presiona Publicar en la parte superior de la pantalla.

También puedes configurar si deseas hacer publicaciones, páginas o ambos en WordPress AMP. Para hacerlo, simplemente regresa al panel de WordPress y ve a AMP> General:

Una vez allí, marca las casillas debajo de Soporte de tipo de publicación para las opciones que deseas incluir en tu WordPress AMP, y haz clic en Guardar cambios.

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

Ve a Plugins> Agregar 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 panel. Desde allí, puedes seleccionar si desea habilitar las publicaciones y los tipos de medios para que tengan compatibilidad con AMP:

Luego, presiona el botón Guardar cambios. También puedes hacer configuraciones adicionales en Designtab. Allí, puedes establecer un ícono para tu sitio AMP de WordPress, ajustar la combinación de colores e incluso agregar CSS personalizados:

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

AMP para WordPress es un excelente complemento si deseas agregar funcionalidad AMP básica a tu sitio. Sin embargo, si deseas un mayor control sobre la apariencia de tu sitio WordPress AMP (y la posibilidad de extender su funcionalidad aún más), el plugin WordPress Accelerated Mobile Pages puede adaptarse mejor a sus necesidades.

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

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

Para usar este complemento de AMP para WordPress, primero deberás ir a Plugins> Agregar nuevo en tu escritorio. Busca ‘AMP para WP’ e instala y descarga el complemento:

A continuación, navega a la nueva pestaña AMP en tu tablero de WordPress. Verás un menú desplegable con secciones para Configuración, Diseño, Extensiones, etc.

Puedes ejecutar las distintas opciones de AMP para ofertas de WP, que incluyen:

• SEO: esto incluye ajustes de metadescripción, integración con complementos de SEO, etc.

• Rendimiento: hay una configuración única para activar y desactivar la reducción de archivos. La reducción puede mejorar aún más la velocidad de tu sitio.

• Analíticas: aquí puedes configurar la integración con Google Tag Manager, así como las opciones de análisis.

• Comentarios: esto te permite configurar si desea incluir comentarios de WordPress, Disqus y Facebook en tu WordPress AMP.

• Configuración avanzada: puedes ingresar HTML personalizado para encabezados y pies de página, configurar la redirección móvil y alternar entre las imágenes.

Asegúrate de hacer clic en Guardar cambios para cada una de las configuraciones anteriores una vez que las haya configurado. Después de eso, selecciona la pestaña Diseño:

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

Después de elegir un tema, puedes personalizar la apariencia. Encontrarás configuraciones de diseño para esquemas de color y tipografía, 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 deseas mostrar en tu sitio WordPress AMP.

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

La versión gratuita de AMP para 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 por estrellas (que son perfectas para productos), la integración con AMP WooCommerce Pro, el uso de tipos de publicaciones personalizadas y más:

Los temas Premium de AMP también están disponibles para comprarlos. Puedes verlos desde 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 pendientes:

Si deseas disfrutar de funciones aún más avanzadas, hay una variedad de planes Pro disponibles para este complemento. Estos van desde el plan Personal (que atiende a un sitio desde $ 149 por año) hasta el plan de la Agencia (que atiende sitios ilimitados por $ 499 por año).

Cómo validar tu sitio AMP de WordPress

Una vez que hayas configurado cualquiera de los plugins de AMP para WordPress, hay un paso más a seguir. Deberás validar tu WordPress AMP, para asegurarse de que las plataformas compatibles puedan acceder y vincularlo. La validación también es una forma práctica de obtener una lectura de los errores de AMP con fines de resolución de problemas.

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á agregar lo siguiente al final de la URL de la página:

#development = 1

Una vez que hayas hecho eso, abre la consola de herramientas del desarrollador 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, el formato incorrecto y las entradas de código, 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 superposición simple de errores (iconos rojos), así como sus causas. Además, si estás ejecutando el validador de AMP en una página que no es de AMP, aparecerá un icono de extensión azul que lo vinculará a la versión de AMP de esa página. Esta característica presenta una forma útil de evaluar los elementos de tu sitio que pueden evitar que WordPress AMP se visualice correctamente.

Conclusión

Incluso unos pocos segundos extra de tiempo de carga podrían reducir significativamente las clasificaciones de los motores de búsqueda de tu sitio (y las tasas de conversión).

Afortunadamente, como hemos visto, usar Google AMP puede ayudarte a garantizar que las páginas de tu sitio se carguen a la velocidad de la luz 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.

¿Te ha gustado este artculo?
Recíbe los nuevos en el newsletter mensual de Neolo o Telegram de Neolo