¿Has oído hablar de Google AMP, pero todavía no lo has puesto en tu blog WordPress?
Pues estás de suerte, porque acabas de aterrizar en el mejor tutorial sobre ello.
Por si no lo sabes, la velocidad de la web es importante para muchas cosas, pero sobre todo para el SEO.
Sí, la velocidad es un factor de posicionamiento.
Así que tenemos que implementar todas las técnicas de WPO que podamos, y AMP es de las más importantes a día de hoy.
Esto, por supuesto, sin obsesionarte con ella.
Por eso he preparado este tutorial: para aprendas a instalarlo y configurarlo correctamente en tu web y acelerarla con un mínimo esfuerzo.
Bueno, aunque tendrás que dedicarle un ratillo.
Pero empecemos por el principio.
[toc]
¿Qué es AMP?
AMP o Accelerated Mobile Pages es una tecnología desarrollada por Google que hace que tu web cargue mucho más rápido.
Para que lo entiendas de forma sencilla, te diré que lo que hace es crear una versión más simplificada de tu web.
Básicamente usa un código HTML desarrollado por ellos que está muy optimizado y que carga superrápido.
Además, elimina muchos de los archivos pesados que tiene una web cualquiera, como son scripts CSS, JS, etc.
Y no solo eso, sino que también elimina componentes como el menú, los comentarios, los botones de compartir, la barra lateral y muchos más.
Osea que pone tu web a dieta del todo.
Es otra de las tareas que debemos hacer si queremos acelerar nuestra web.
Para que te quedes tranquilo (o tranquila), tienes que saber que por ahora solo se ejecuta en dispositivos móviles y solo con algunas personas.
Osea que los que ven tu web desde el PC la verán normal, algunos que la visiten del móvil también y otros usuario de móvil sí que verán la versión AMP.
Esto ya dependerá de Google.
Como una imagen es mejor que mil palabras, te pongo una captura para que veas la diferencia de mi web en su versión normal en móvil y la versión de Accelerated Mobile Pages.
Lo bueno de AMP
Es importante que conozcas las ventajas que tiene esta tecnología y por qué ya deberías haberla implementado en tu blog.
Acelera mucho tu web
Esta tecnología tiene muchos beneficios y el principal es que hará que tu web cargue en menos de la mitad de tiempo.
Si, el mero hecho de tenerlo instalado y activado hará que tu web vuele.
Por ponerte un ejemplo, yo tengo artículos que tardan en cargar 1,5 segundos (cosa que no está nada mal) y la versión AMP carga en medio segundo.
¡Casi un tercio!
Tu hosting consume menos recursos
Al eliminar todo lo «innecesario», la web será mucho más ligera y cargará mucho menos tu hosting.
Esto es bueno si no queremos tener problemas con nuestro alojamiento web.
Bueno, lo ideal es que escojas un hosting de calidad, pero esto es otra historia.
Además, si tu hosting tiene límites de consumo, te vendrá bien porque alargará la fecha para pasar a un plan superior.
Aumentan tus visitas
Como ya te he explicado antes, la velocidad es parte del SEO.
Así que en cuanto tu web baja los tiempos de carga, automáticamente aumentan tus visitas.
Ya lo verás si decides instalarlo.
Lo malo de AMP
Toda tecnología tiene sus cosas buenas y sus cosas malas y debes conocerlas.
Demasiado simple
Desde mi punto de vista, la única desventaja de AMP es que crea una versión de nuestra web demasiado simple.
Para los que trabajamos con el marketing de contenidos, nos viene bien que nos dejen comentarios, que se den de alta en nuestra newsletter y demás.
Las versiones de AMP no incluyen muchos de estos componentes, aunque día a día van integrando algunos.
Dependes de Google
Actualmente tu web carga todos los archivos desde tu WordPress, temas y plugins, aunque también cargas muchos externos, como analítica, fuentes de Google, etc.
Pero en el caso de este tipo de páginas la dependencia se hace mayor, porque casi toda la web usa sus scripts.
No es que sea malo, pero tampoco es bueno del todo.
AMP y posicionamiento SEO
Supongo que te puede estar rondando por la cabeza cómo te afecta poner esta tecnología en tu web de cara al posicionamiento.
No te preocupes, porque lo único que hará tu web será mejorar el SEO.
Hay gente que piensa que tener el mismo contenido en 2 páginas puede crear contenido duplicado. Es cierto.
Pero en el caso de AMP no pasa, así que puedes estar tranquilo.
En lo único que te afectará será en el aumento de tus visitas.
Pero sí debemos realizar ciertas tareas que te voy a explicar.
Bueno.
¿Nos ponemos en marcha con el tutorial?
Cómo instalar Google AMP en WordPress
Sobre este tema hay mucho lío, así que te doy una explicación rápida.
Aunque haya muchos plugins para ello, siempre, siempre, es obligatorio tener instalado el plugin original, que es el que da la funcionalidad.
Así que nos vamos al instalador de plugins de WordPress, buscamos «AMP» y lo instalamos.
Una vez que ya lo hayamos instalado y lo activemos, AMP ya estará disponible.
Simplemente tendremos que poner cualquier URL terminada en amp y veremos esa versión.
Por ejemplo: https://miblog.com/articulo-superguay/amp/
¿Así de sencillo? Pues sí.
Lo que pasa es que la versión que verás es la más simple.
Pero espera porque la vamos a personalizar a tope.
Personalizando Google AMP
Desde que estoy usando AMP he instalado y probado varias cosas para personalizarlo: he instalado varios plugins, lo he hecho a mano editando la plantilla del plugin, etc.
Estoy a favor de no usar tantos plugins para todo.
Pero hay veces que son tantas las cosas que tienes que hacer que es mejor instalar un plugin y que te quite todo ese trabajo.
Y también hay que tener en cuenta que AMP es una función necesaria si quieres aumentar las visitas de tu web.
Porque el hecho de usarlo automáticamente colocará muchos de tus contenidos delante de otras webs que no lo usen.
Obviamente, me refiero a dispositivos móviles.
Para que veas lo que te digo, te voy a explicar cómo personalizarlo con el plugin más conocido para ello: AMP for WP.
Es un plugin todo en uno que nos permite hacer muchas personalizaciones y agregar muchas funciones (como descubrirás en el artículo).
Instalar AMP for WP
Para ello nos vamos al instalador de plugins y buscamos «AMP for WP».
Si eres de los que prefiere instalar el plugin a mano, te lo puedes descargar de WordPress.org.
Una vez que está instalado, nos vamos a su panel de control y nos encontramos lo siguiente que veremos a continuación.
Te voy a explicar punto por punto lo que debes configurar para sacarle el máximo partido al plugin.
Los ajustes generales
Aquí básicamente lo que haremos será subir el logo si queremos, aunque yo no tengo y lo dejo como está.
Puedes personalizar el tamaño del logo, pero revisa que se vea bien desde las entradas.
Algo muy interesante aquí es que puedes activar AMP para páginas.
Yo uso actualmente un builder y no se me ve correctamente, así que es una de las tareas que tengo pendientes, pero si usas el editor de WordPress puede que te interese para que tus páginas tengan más visitas.
¿Activamos la homepage para AMP?
Se supone que AMP solo funciona para los artículos, pero este plugin también hace que la página home de tu web sea un listado de artículos, aunque tengas una página estática.
Yo lo veo recomendable para que baje la tasa de rebote en la web.
Piensa que este tipo de páginas dan muy pocas opciones y por eso la tasa de rebote es muy alta.
Si lo activas y un usuario se lee el post y quiere más, se ira al home y podrá ver todos tus post al igual que lo hiciera en la versión normal.
Ahora también puedes usar un page builder
La nueva versión de este plugin te permite crear una landing page mediante widgets.
Yo personalmente no lo he usado porque para eso tengo el plugin con el que las creo.
Pero bueno, puede que te sea de utilidad.
Si quieres saber más sobre esto, te recomiendo que te pases por sus páginas de tutoriales.
Personalizando el diseño
Llegamos a uno de los platos fuertes, el diseño de nuestra página AMP.
Por un lado tenemos la opción de Drag & Drop Post Builder con la que puedes modificar la estructura del mismo.
Esto es por si quieres poner por ejemplo los comentarios antes de los artículos relacionados y cosas así.
En Design Selector puedes elegir entre 3 tipos de diseños diferentes.
A mi personalmente me gusta el primero, dado que el menú está más a mano y es un diseño bastante recogido.
Ya es cosa tuya que elijas el que quieras.
Lo que sí te recomiendo es que actives la caja del buscador porque ayudará a tus usuarios a encontrar cosas que necesite.
Recuerda que solo se puede poner en páginas con certificado SSL.
Por último puedes poner un botón de llamada rápida si lo sueles tener en tu web o personalizar el diseño con CSS.
Una vez que haces esto, el resultado es este.
Personaliza la página de los posts
Aquí vamos a personalizar un poco el diseño de la página del post o single.
Osea los componentes que quieres que aparezcan dentro del post.
- Sticky Social Icons: con esto activas los botones de compartir fijos en la parte de abajo.
- Excerpt in single: hay plantillas que te dejan poner un pequeño texto como introducción y con esto lo muestras en AMP. Nunca lo he usado.
- Next-Previous Links: activas o desactivas el botón para acceder al post anterior o posterior publicado.
- Show Post Modified Date: con esto puedes mostrar la fecha de modificación del artículo.
- Author Bio in Single: activas o no la caja de autor y que ya sabes que no puede faltar a cualquier blogger.
- Show Related Post from: activas los artículos relacionados y te lo recomiendo encarecidamente. Debes bajar la tasa de rebote todo lo que puedas.
- Number of Related Post: eliges el número de artículos a mostrar en los relacionados.
Instalando Adsense
Si tienes un blog en el que pones publicidad de Adsense, poner anuncios es de lo más sencillo.
Te vas al apartado de Advertisement, activas uno de los 5 lugares donde ponerlo y rellenas los datos de tu Adsense.
Las posiciones en las que puedes poner anuncios son:
- Below the Header (SiteWide): debajo de la cabecera en todo el sitio web.
- Below the Footer (SiteWide): debajo del footer en todo el sitio web.
- Above the Post Content (Single Post): encima del contenido del post.
- Below the Post Content (Single Post): al final del artículo.
- Below The Title (Single Post): debajo del título del artículo (alta tasa de clics).
- Above the Related Posts (Single Post): encima de los artículos relacionados (también funciona muy bien).
Yo que tengo experiencia en esto, hecho de menos que se pueda poner uno en medio del artículo.
Otra de las tareas que no se te pueden olvidar es asignar un menú para tus páginas AMP.
Ya que lo hemos puesto para que el usuario tenga más opciones, lo suyo es adaptarlo lo mejor que podamos.
Puedes por un lado crear un menú que solo tenga contenidos de tu blog, como por ejemplo las categorías, dado que AMP solo se suele activar en posts.
O si prefieres que cualquier usuario pueda acceder a otras páginas, pues selecciona el menú normal que ya tienes.
Si activas la función de Auto Add AMP in Menu URL se añade automáticamente al final de la URL.
A mí no me hace gracia.
Los iconos de compartir
Ya que tenemos las redes sociales preparadas para compartir, lo suyo es que las personalicemos.
Es decir, que en Twitter añadas tu usuario y en Facebook le des acceso mediante la app id.
Si todavía no has creado una aplicación, puedes hacerlos desde la página de desarrolladores.
También puedes activar o desactivar las redes sociales que quieres que aparezcan.
Por ahora puedes poner Facebook, Twitter, Google+, email, Pinterest, LinkedIn, WhatsApp y hasta Line.
Optimizando el SEO
Entramos en un apartado interesante; y te lo digo porque le he dado mil vueltas.
A la hora de configurar el SEO de las páginas AMP hay varias opciones.
Desde usar otros plugins, el Glue AMP for Yoast y las que nos ofrece este.
He probado cada uno de estos plugins y he revisado el código de arriba a abajo mil veces y con diferentes combinaciones. Estas son mis conclusiones (que conste que es algo que sigo estudiando).
Cuando configuramos el SEO de las páginas AMP hay varios componentes que necesitamos:
- Título SEO: este siempre aparece actives o desactives cualquier plugin.
- Descripción SEO: si activas el plugin Yoast sí aparece la que le hemos configurado, pero si lo quitamos y activamos la descripción con AMP for WP, nos mete las primeras líneas del artículo.
- Metadatos de Twitter y Open Graph: estos son los encargados de que se muestren correctamente los textos e imágenes cuando se comparten en redes sociales; y hay que ponerlos.
- Schema: esto es lo interesante. Parece que en las páginas AMP lo importante no es la metadescripción normal, si no la que se pasa mediante Schema (y eso dice en la página oficial).
Con el tiempo lo iré estudiando más a fondo a ver qué saco en claro.
Pero por ahora me he dado cuenta de que se duplican algunas cosas y hay que tener cuidado.
Para hacerlo bien y que se muestren los metadatos que te he explicado y no se repita nada, sigue estas recomendaciones:
- No instalar Glue Yoast.
- No activar la Meta Description en el plugin.
- Activar las Meta Tags from Yoast.
- Y activar Yoast Description in ld+json.
Además de ello, y si no quieres tener problemas de contenido duplicado, puedes poner en no index:
- Archive subpages: estas son la paginación y sí que te crean contenido duplicado.
- Author Archive pages: esta depende de como tengas optimizado su SEO.
- Date Archive pages: los archivos de fecha prefiero no indexarlos.
- Categories: estas en mi caso sí que las tengo indexadas porque las tengo optimizadas.
- Tags: aquí pasa igual, si las tienes optimizadas bien, sino, no las indexes.
Con estos ajustes te garantizas una buena indexabilidad de los contenidos.
Instalando Google Analytics
Una de las cosas que les pasa a los nuevos usuarios de páginas AMP es que se creen que no reciben visitas en estas páginas.
Y la cosa no es que no reciban, es que a estas páginas hay que ponerles otro código de seguimiento porque el que pones normalmente no lo coge.
Para ello este plugin ya trae este apartado en el que simplemente poniendo el ID de Google Analytics ya funciona.
Recuerda limpiar la caché del plugin que tengas o del servicio CDN que uses para que empiece a trabajar el código.
Por cierto, ya ofrece hasta soporte para Google Tag Manager, algo que te recomiendo ir implementando en tu sitio web si usas muchos tags como de Google Analytics, Facebook, Adwords, etc.
Otro de los fallos que me he encontrado en páginas AMP es que no implementan el aviso de cookies.
Y esto sí que es importante y estás obligado si usas sistemas de analítica.
Menos mal que este plugin trae la opción de ponerlo.
Activando los comentarios
Las páginas AMP no traen comentarios de serie y tampoco dejan opción a que se les ponga a no ser que sea Disqus o Facebook o pagues por un addon que tienen para ello.
Yo estoy en contra de usar Disqus porque no me gusta usar tantos servicios externos.
Pero sí hay algo que quiero hacer, aunque no se pueda dejar un comentario y es que estos se muestren.
¿Por qué?
Pues porque los comentarios de un blog aparte de ser importantes, son palabras clave que se añaden al artículo y con los que se puede atraer mucho más tráfico.
Así que desde esta opción insertamos el número de comentarios máximo que queremos que se muestren y listo.
Tú puedes instalar algún plugin de comentarios de los que te he dicho y ponerle el formulario a tus usuarios.
No se te olvide activar la opción del plugin para ponerlo en marcha.
Traduciendo el plugin
Lo malo de usar plugins es que la mayoría vienen en inglés.
Pero este sí incorpora un sistema para traducir todos los textos.
Así que ponte un té fresquito y en 10 minutos tienes traducido tu plugin.
Ajustes avanzados
En este apartado no me voy a enrollar mucho.
Hay una opción que pone Mobile Redirection y lo que hace es redirigir todos los usuarios que vengan de móviles a la versión AMP.
Yo tengo intención de hacerlo en un futuro, pero antes tengo que personalizar muchas cosas para dar una buena experiencia.
También te recomiendo que tengas activada la opción de Link to Non-AMP page in Footer.
Es interesante para que los usuarios puedan cambiar de la versión AMP a la no AMP.
Verificando que todo funciona bien
Ya has instalado AMP, lo has personalizado, estás siguiendo las visitas, pero todavía te falta algo muy importante.
Comprobar que Google lo está indexando correctamente.
Para ello tienes que irte a Google Search Console o herramientas para webmaster de Google para comprobar que todo va bien.
Entras en Apariencia en el buscador – Accelerated Mobile Pages y podrás comprobar como se van indexando y si hay algún error.
Si lo has hecho todo como te he dicho, verás subir tus páginas sin errores.
Pero sí que puedes tener errores si dentro de tus artículos usas algunos tipos de plugins.
Yo me he encontrado errores con plugins que crean tablas, cajas de productos de Amazon y cosas similares.
Con esto solo tienes la opción de quitar esos plugins y, obviamente, lo que tengas dentro de los artículos, o que estás páginas no se muestren sus versiones en AMP.
¡Y se acabó!
Espero que este tutorial de Accelerated Mobile Pages te haya gustado.
Ha sido fruto de mucho probar plugins, de quitar unas opciones, de poner otras, de analizar y volver a probar, etc.
Sé que todavía hay mucho por hacer con esta tecnología.
Pero así por lo menos tendrás tu páginas bien configurada. Ya verás cómo aumentan tus visitas en cuanto lo pongas.
Y si quieres aprender más sobre WPO y SEO en WordPress, pásate por mi blog ragose.com que tengo mucho más.
¿Has instalado ya AMP? ¿Lo has configurado como yo o tienes alguna cosilla que enseñarnos?
Venga, te esperamos en los comentarios.
