El tráfico desde dispositivos móviles hace tiempo que es superior al de ordenadores de escritorio. Pero es que en ocasiones (muchas más de lo que parece) un usuario puede encontrar la navegación desde un smartphone o tablet algo frustrante; mucho de los sitios web no siempre están correctamente adaptados para ello. Por eso, Google ha dado la luz al proyecto AMP, cuyo principal objetivo es el de mejorar la velocidad de carga de las páginas web para dispositivos móviles. Si tienes un blog en WordPress, puede ser interesante tener indexadas versiones optimizadas de tus posts. Para saber más y conocer los pasos necesarios que se necesitan, he preparado un post muy informativo e ilustrativo para adaptarte a esta nueva tecnología.
– Qué son las AMP (Accelerated Mobile Pages)
Las AMP o «páginas móviles aceleradas» son una iniciativa de Google y otros grandes medios, cuyo proyecto se presentó hace un año y que finalmente se ha puesto en marcha en febrero de 2016. Están enfocadas a lograr que los contenidos web de todo tipo de publicaciones online se descarguen de forma más rápida en nuestros dispositivos móviles; la tecnología utilizada se basa en AMP HTML, un nuevo formato abierto con licencia Apache. El objetivo es generar páginas web más ligeras de HTML; para conseguirlo, la utilización de HTML se restringe a las etiquetas permitidas en la especificación. Además, con JavaScript la plataforma también suministra los recursos necesarios por lo que AMP limita el uso del JS a sus librerías.
Resumiendo: para que las páginas carguen más rápido, AMP reduce el peso del código. Las páginas AMP son una versión simplificada de las normales; aunque contienen toda la información esencial, se decantan por la velocidad frente al diseño. De nuevo, los dispositivos móviles están en el punto de mira del SEO, y Google quiere premiar las páginas que se adapten a esta nueva idea. La velocidad de carga sigue siendo un lastre por complejidad de la mayoría de sites, a pesar de las diferentes generaciones de tecnologías en telefonía móvil. Las páginas realizadas con AMP se cargan de media cuatro veces más rápido y utilizan unas 10 veces menos datos que las normales.
– Cómo reconocer las webs con AMP
Las páginas web optimizadas mediante AMP HTML son versiones más ligeras, pero facilitan que si llevan algún contenido multimedia carguen de forma instantánea. Seguramente, ya habrás entrado en alguna página con versión AMP: llevan incorporado el /amp/ al final de la URL. Un ejemplo podría ser el actual post (puede que incluso ya estuvieras visualizándolo); estas páginas también son visibles desde un ordenador normal:
https://mibloguel.com/instala-las-amp-de-google-en-tu-wordpress/amp/
Como verás, la presentación es un poco más sencilla ya que no lleva cargado la personalización del tema, menús o widgets varios; lo justo para que accedamos al contenido expresamente.
Además, Google ha ampliado este servicio a todas sus búsquedas móviles; podrás identificar estos resultados por medio del icono de Google AMP en los rankings orgánicos:
Los iconos de Google AMP van a tener un click-through-rate mejorado ya que estos resultados destacarán sobre el resto. Quienes realizan búsquedas en dispositivos móviles, comenzarán a escudriñar las páginas Google AMP específicamente ya que accederán a ellas antes que las páginas móviles tradicionales.
– Quién debería usar AMP
Google ha puesto todo su empeño en el proyecto, así que tendrás que prestar atención si te preocupa algo tu posicionamiento web; si un cambio nos favorece en los resultados de búsqueda, tiene toda nuestra atención. Pero también es verdad que, en algunos casos, no está hecho a la medida de todo el mundo.
Si tienes una web nueva con muy poco contenido, un blog personal o de empresa, tienes que implementar ya las AMP; incluso me atrevo a decir que en los próximos meses no vas a tener otra opción. Esto es un método de mejorar la velocidad de carga de tu web, enriquecer la experiencia del usuario móvil y respaldado por Google; vas a conseguir beneficiarte en términos de SEO mediante unos sencillos pasos que describiré a continuación.
En el caso de que lleves una tienda online o una web en la que el diseño y la creatividad son la forma de llegar a tus clientes, quizás las AMP no son una necesidad ahora. Más adelante es posible, si evoluciona el proyecto o surgen variaciones en esta tecnología. De todas formas, no bajes la guardia y aplica las alternativas que puedas para optimizar el site. Google se toma muy en serio lo que funciona, y puede apretar el acelerador de su algoritmo en cualquier momento.
– Creando las AMP en WordPress
Para activar las AMP en sitios creados en WordPress, basta con usar un simple plugin. Pero si quieres que quede todo preparado para la posterior indexación, compatibilidad con Analytics y que se muestre una página /amp/ un poco más interactiva, habrá que echar mano de otros plugins y tocar algo de código. Tranquilo, vayamos por partes.
1. Instalación del plugin para AMP
Lo primero, descargamos e instalamos el plugin AMP de Automattic, bien desde su página o buscándolo dentro de nuestro CMS favorito en la sección de Plugins. Que no os asuste su bajo número de versión o el mensaje de compatibilidad: viene de la mano de uno de los mejores desarrolladores de WordPress, es totalmente fiable y funciona a la perfección. Es muy sencillo en su propósito: el plugin añade una etiqueta meta en la cabecera de las páginas para que los bots de Google sepan que existen estas nuevas versiones.
Cuando actives el plugin, todas las URLs de las entradas en tu WordPress tendrán una versión /amp/. Y ya está, puedes ir a cualquiera de tus posts en un navegador, añadir /amp/ al final de la URL (o /amp=1/, dependiendo de tu configuración en permalinks) y ver la versión AMP. Será totalmente básica, ya que este plugin no tiene personalización alguna; si necesitas lo mínimo para tu blog, con esto ya estarías preparado.
2. Personalizando las AMP y configurando Google Analytics
Siempre se puede intentar mejorar el resultado (por lo menos cambiar colores, añadir algún icono, etc.). El plugin de Automattic no tiene ningún tipo de configuración sobre el diseño de las AMP; además, si quieres tener un mejor control sobre el SEO, y quieres hacer seguimiento por Google Analytics de las AMP, necesitamos echar mano de una ayuda extra. Si ya estás utilizando el plugin Yoast SEO (deberías, es la utilidad por excelencia para SEO en WordPress), instala y activa su hermano pequeño Glue for Yoast SEO & AMP.
Con este plugin terminarás de integrar las AMP con el SEO de tu WordPress, limpiando y acoplando los metadatos que pudieran causar algún problema grave en la indexación. Los autores de Yoast han comentado que con el tiempo, sus dos plugins estarán fusionados en uno, aunque por ahora habrá que tenerlos separados. De todas formas, si accedes al menú SEO -> AMP, verás que están integrados. Ahí podrás modelar varias opciones:
- Elegir los tipos de post que tendrán apoyo de AMP (las páginas todavía no tienen soporte).
- Añadir un icono corporativo en la cabecera.
- Definir una imagen por defecto para el post que no la tenga.
- Modificar los colores en párrafos y enlaces.
- Introducir código extra para la cabecera/CSS.
- Código Google Analytics.
Yendo a la pestaña de Analytics, podrás introducir un código de seguimiento específico si lo deseas para que Google Analytics haga recuento de forma correcta de tus resultados AMP; por defecto, estará introducido el código UA que tenías configurado en Yoast SEO.
Si miras el código de la página versión AMP, encontrarás que se ha indicado con la etiqueta canonical en qué URL se encuentra el contenido equivalente de la versión de escritorio; de esta forma se evita que sea considerado como contenido duplicado por Google.
3. Incluir los botones de redes sociales
Como ya te habrás dado cuenta, es posible que tu versión AMP no contenga los botones para compartir en redes sociales; existen plugins que son compatibles, pero son los menos y a lo mejor no es tu caso. Como es un engorro tener que cambiar o instalar uno nuevo, existe una alternativa para no abarrotar WordPress de plugins; además, tu post seguirá descargándose rápido en dispositivos móviles, que es de lo que se trata. Y por supuesto, queremos que los lectores compartan nuestros contenidos; independientemente de que lo hagan desde su smartphone y a través de nuestras AMP.
Aunque es una tecnología que busca la rapidez de descarga y usa ciertas especificaciones, sigue estando basada en HTML. Por eso, usando un sencillo código dentro del plugin, podemos volver a tener operativos los botones para compartir en redes sociales dentro de nuestras AMP.
Primero, desde WordPres entramos en Plugins -> Editor; en la nueva pantalla, arriba a la derecha, elegimos AMP en «Elige el plugin a editar«. Buscamos en los «Archivos del plugin» y pinchamos en amp/templates/single.php.
Dentro de la ventana de edición del archivo, pegamos el siguiente código dentro de la sección de encabezado <head>:
<script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"></script>
Nos quedaría tal que así:
Ahora, en el mismo archivo, pegamos el código que generará los botones de redes sociales, dentro del cuerpo del documento; necesitarás introducir tu Facebook App ID en la línea correspondiente para poder publicar en Facebook:
<div align="center"> <amp-social-share type="twitter" width="60" height="44"> </amp-social-share> <amp-social-share type="gplus" width="60" height="44"></amp-social-share> <amp-social-share type="email" width="60" height="44"></amp-social-share> <amp-social-share type="pinterest" width="60" height="44"></amp-social-share> <amp-social-share type="linkedin" width="60" height="44"></amp-social-share> <amp-social-share type="facebook" width="60" height="44" data-param-app_id="0000000000000000"></amp-social-share> </div>
Así debería ir:
3.1 Facebook App ID
Si no sabes cuál es tu Facebook App ID o no tienes uno, tan sencillo como entrar en Facebook for developers para pedirlo. Introduce tus datos de Facebook, y busca una aplicación o añade una nueva rellenando los datos del formulario:
Escribe un nombre para la aplicación (por ejemplo «MiNuevaApp«), un correo de contacto y elige una categoría cualquiera. Se creará el identificador de la aplicación; copia este número y sustitúyelo en la línea:
data-param-app_id=»0000000000000000«>
4. Validando y testando nuestras AMP en Google
Teniendo ya nuestras entradas con el formato AMP, Google las irá indexando (a su ritmo, eso sí). No esperes tenerlas todas al mismo tiempo, y lo normal es que cualquier corrección que hagas tarde varios días en aparecer (y seguramente tengas que corregir algo).
Para hacer una validación de las páginas, puedes hacerlo desde el navegador Chrome. Entra en una de las páginas AMP y añade «#development=1» al final de la URL. Pulsa Control + Mays + I (o entra en «Herramientas para desarrolladores«) y selecciona «Console» en el menú. Refresca la página pulsando la tecla «F5» y en la ventanita debería aparecer el mensaje “AMP validation successful” (quiere decir que está todo bien), o un listado con correcciones por hacer:
También debes hacer el seguimiento desde tu cuenta de Search Console; entra en tu perfil de la página web y en el menú pulsa Aspecto de la búsqueda -> Accelerated Mobile Pages. Ahí te irán apareciendo las páginas AMP indexadas y las que tengan problemas, para ir corrigiéndolas. Con el tiempo, podrás hacer búsquedas desde un navegador móvil y aparecerán en los resultados de Google.
Por supuesto, no es instalar y ya está. Aunque el plugin te creará todas las entradas en versión AMP, tendrás que supervisar todo el proceso de indexación. Con los plugins recomendados no encontrarás dificultades; si quieres tener páginas más completas, sigue los pasos relatados para que queden más completas. Es verdad que hay que estar un poco más pendiente, pero tener tus posts preparados para la nueva característica de Google para las búsquedas móviles, es algo que merece la pena.
Si quieres hacer una pregunta, o te gustaría aportar algún comentario, estaré encantado de leerte.