AMP (Accelerated mobile pages) es una tecnología de código abierto que permite acelerar la carga de sitios web en dispositivos móviles, así como mejorar la usabilidad y experiencia de usuario. En este tutorial te mostramos paso a paso cómo configurar AMP en tu WordPress.
En este post encontrarás...
¿Por qué es importante?
Hoy en día la mayor parte de tráfico web viene desde dispositivos móviles y es una tendencia en alza. Es muy importante que tu sitio web se cargue rápido y la navegación sea fluida cuando se visualiza en un móvil o Tablet.
Además, tener implantado AMP en tu sitio te permitirá mejorar el tráfico orgánico de tu sitio ya que Google, además de ser uno de los principales impulsores de AMP, valora mucho la optimización para móvil a la hora de indexar tu sitio en su buscador.
¿Qué restricciones tiene una página que utilice la tecnología AMP?
Ya que el objetivo de la tecnología AMP es la máxima velocidad y fluidez en la carga y navegación de la página web no permite utilizar elementos que puedan obstaculizar dicho objetivo. Una estructura y diseño muy básicos de cabecera, cuerpo y pie definen la plantilla base para todas las páginas AMP.
A partir de ahí podremos adaptarla al estilo de nuestro sitio pero sin utilizar elementos pesados. El objetivo es que se realicen las mínimas conexiones http posibles.
¿Cómo puedo incorporar AMP a mi WordPress?
Hay disponibles varios plugins que permiten implementar la tecnología AMP en WordPress sin necesidad de tener conocimientos técnicos avanzados. Automattic, la empresa detrás de WordPress.org tiene el plugin más descargado pero, aunque funciona bien, es muy básico y permite pocas personalizaciones.
En esta entrada vamos describir cómo implementar AMP utilizando el plugin que consideramos más completo y personalizable: AMP for WordPress.
El plugin lo podrás descargar aquí:
A continuación, vamos a ver paso a paso como configurar el plugin AMP for WordPress para poder añadir la tecnología AMP a nuestro sitio aplicando un estilo que se adapte al look original de nuestro sitio.
Instalación del plugin AMPForWP
Aunque el plugin que instalemos sea de confianza, siempre recomendamos realizar una copia de seguridad de tu WordPress antes de instalar cualquier nuevo plugin. De esta forma, ante cualquier inconveniente inesperado, siempre podremos recuperar nuestro sitio web en el punto inmediatamente anterior a la aparición del problema.
Una vez tengamos nuestra copia de seguridad podemos proceder a instalar el plugin. Simplemente seguiremos el procedimiento habitual de WordPress para instalar el plugin descargado desde la web del autor.
Una vez tengamos el plugin instalado y activo, utilizando la configuración que viene por defecto, ya podremos acceder a las páginas de nuestro sitio utilizando la tecnología AMP. Sólo tenemos que añadir “/amp” a la url de la página que queramos acceder y podremos ver como quedar con AMP con la configuración por defecto. Hay que tener en cuenta que las páginas AMP están pensadas para ser visualizadas con dispositivos móviles por lo que si la visualizas en pc se verá bastante “fea”.
Cómo podemos observar se trata de una página muy sencilla y con un diseño muy básico. A continuación vamos a configurar el plugin para darle un aspecto más atractivo.
Configuración General
En esta sección vamos a configurar los parámetros de configuración básicos del módulo, en primer lugar nos dirigimos al nuevo menú “AMP” que se ha creado al instalar el plugin y seleccionamos la sección principal “Settings”.
General
En esta primera sección podremos seleccionar el logo de nuestro sitio web y definir las páginas que se mostrarán con AMP. Para el logo, aunque el plugin ofrece la posibilidad de utilizar un logo de tamaño personalizado, es recomendable utilizar una imagen pequeña (el propio plugin sugiere un tamaño de 190×36 px) que encaje bien en una cabecera pequeña que son las habituales en las páginas AMP.
Por otro parte, en esta sección, tenemos la opción de seleccionar que páginas soportarán la tecnología AMP. En nuestro caso, para este tutorial estamos utilizando el supuesto de que nuestro sitio es de tipo Blog por lo que no tenemos páginas complejas que no se puedan adaptar a las restricciones de las páginas AMP. Así que activaremos el soporte AMP para todos los tipos de página. Al activar la opción “Homepage” nos da la opción de activar la opción dependiente “Custom Front Page” que nos permite seleccionar una página que ya tengamos creada, de momento dejamos la home que genera el plugin por defecto.
SEO
En esta sección podemos configurar los metadatos de cada página. Nos da la opción de mostrar la meta descripción y de añadir otros tags de metadatos adicionales. Ten en cuenta que solo aparecerá meta descripción si la has introducido en cada una de tus páginas, esto es muy importante para el posicionamiento de tu sitio por lo que siempre recomendamos utilizar algún plugin especializado como YOAST SEO. De hecho, en esta sección el plugin AMP for WP permite activar la integración con YOAST permitiendo utilizar todos los metadatos de tus páginas de forma automática:
Analytics
Es muy importante analizar las estadísticas de visitas de nuestra web, inicialmente se tenían muy en cuenta los datos de las visitas desde pc pero la tendencia de tráfico ha cambiado y, con toda probabilidad, la mayoría de usuarios que entren en tu web, lo hará utilizando un móvil.
Por este motivo es obligado no olvidar rellenar este apartado. La pantalla es muy sencilla en primer lugar seleccionaremos nuestro servicio de analítica y después introduciremos nuestro código ID que nos identifica. Si por algún motivo no estas utilizando Google Analytics o cualquier otro servicio en tu web te animamos a que lo hagas ya que proporciona una información muy valiosa que te permitirá mejorar tu sitio para conseguir más visitas. Y encima Google Analytics es gratis!
Structured data
Los “Structured data” o datos estructurados son unos metadatos especiales que facilitan al buscador de Google entender el contenido de tu web y así poder ofrecer características avanzadas que mejoren la experiencia de usuario al realizar búsquedas. Con los datos estructurados podemos indicarle al buscador de Google de que tipo es nuestro contenido. Por ejemplo si tenemos un blog de recetas, indicaremos que nuestras entradas son del tipo “Recipe” (receta en inglés) y así Google utilizará un formato mas avanzado a la hora de mostrar nuestra entrada en sus resultados.
Cómo para este tutorial el sitio ficticio con el que estamos trabajando es un blog nosotros simplemente vamos a dejar configuradas nuestra entradas y páginas con el tipo BlogPosting además de añadir nuestro logo.
Translation Panel
En esta sección podremos traducir todos los mensajes que utiliza el plugin AMP for WP para mostrar los textos de botones, enlaces de navegación y etiquetas en las páginas AMP generadas.
Con todo esto ya tenemos configuradas las opciones de configuración generales para el correcto funcionamiento de nuestras páginas AMP, ¡Ahora vamos a por el diseño!
Parámetros de configuración generales relativos al diseño
Hemos llegado a la sección mas interesante de este tutorial, aquí podremos adaptar el diseño que viene por defecto con el módulo y adaptarlo al diseño de nuestro sitio web y nuestra marca. Para ir a la sección de configuración del diseño del plugin hacemos click en el menú AMP y seleccionamos la sección “Design”.
Themes
El plugin AMP for WP viene con tres diseños base por defecto que se utilizan como punto de partida para construir el diseño de las páginas AMP. Por defecto viene seleccionado el theme “Design two” pero nosotros recomendamos que, en general, es mas práctico y tiene un diseño que se adapta a cualquier estilo el theme “Design tree”. Aunque esto depende del estilo de cada web nosotros dejaremos seleccionado el theme “Design tree”.
Global
En este apartado podemos definir el esquema de colores general de nuestro diseño y personalizar la visualización de cualquier elemento de las páginas AMP utilizando reglas css aunque, como es necesario tener ciertos conocimientos técnicos, ahora nos limitaremos a seleccionar el esquema de colores.
Header
En este apartado vamos a definir cómo se va visualizar la cabecera de nuestras páginas AMP. A continuación, vamos a describir la configuración necesaria para obtener el siguiente diseño:
- Activamos el menú de navegación activando la opción “Navigation menu”
- Activamos la opción “Seach”
- Seleccionamos el color verde de nuestro logo en la opción “Header Elements Color”
- Pulsamos el botón “Save Changes”
En solo tres pasos hemos conseguido el estilo que queremos, pero si pulsamos en el menú vemos que aparece vacío sin ningún ítem. Para solucionarlo tenemos que dirigirnos al menú “Apariencia”, apartado Menú. Una vez dentro, seleccionaremos la pestaña “Gestionar Ubicaciones” y en la ubicación AMP Menú seleccionaremos el menú principal de nuestro sitio web. Pulsamos el botón “Guardar cambios”.
Ahora nuestro menú ya muestra todos sus elementos y podemos navegar por las secciones de nuestro sitio web. Veamos cómo va quedando la versión AMP de nuestro sitio web:
Single
En el apartado single podemos configurar la apariencia de una entrada básica. Podemos activar o desactivar elementos de información y navegación de la página que no sean el propio contenido de la entrada: el breadcrumb, las categorías, los iconos de redes sociales, el tipo de entradas realacionadas que vamos a mostrar etc …
Nosotros vamos a dejar configurados los elementos que consideramos más habituales:
Este apartado nos permite configurar parte del contenido que aparecerá en el pie de las páginas AMP. Configuraremos las siguientes opciones:
- Link to Non-AMP page in Footer: es bueno ofrecerle la posibilidad al usuario de acceder a la versión tradicional de la web.
- Back to Top Link: ese link permite subir automáticamente a la cabecera de la página, teniendo en cuenta las limitaciones de la pantalla de los dispositivos móviles y que nos movemos con el dedo, es importante tener este botón activado.
- Color de fondo del footer.
Social
En este apartado podremos introducir nuestros identificadores de redes sociales que utilizaran los botones de compartir en redes sociales de nuestras páginas AMP así como los perfiles sociales de nuestra web (los botones que aparecen en el menú y en el pie). Nosotros vamos a desactivar los perfiles y a introducir nuestras credenciales de Facebook y Twitter.
Orden de los elementos en una entrada
Por último, sólo nos queda configurar el orden de los elementos de cada página AMP. Este último punto es muy importante porque un correcto orden de los elementos mejora el diseño, favorece la navegación y la correcta lectura del contenido.
Nos dirigímos a la sección AMP del menú “Apariencia”
En la siguiente pantalla pulsamos la opción “AMP”, después “Design”, y accederemos al “Design Manager” que consiste en una lista de los elementos que aparecen en una página y que podemos reordenar arrastrándolos. Vamos a modificar el orden de los elementos para que quede así:
Resultado final
Ahora que hemos configurado todas las opciones necesarias para personalizar nuestras páginas AMP podemos ver como han quedado respecto a la configuración por defecto:
Hemos podido ver como con poco esfuerzo, en 20 minutos, hemos implantado la tecnología AMP consiguiendo:
- Mejorar la velocidad de carga dispositivos móviles.
- Mejorar la experiencia de usuario en dispositivos móviles.
- Debido a los dos anteriores, mejorará nuestro posicionamiento SEO en el buscador de Google
- Personalizar la apariencia por defecto para adaptarla al estilo de nuestro sitio web.
Espero que este tutorial os haya sido útil y os ayude a mejorar vuestro sitio web.
Saludos!
