A comienzos de año, en las novedades SEO para este 2017, os hablamos de AMP y su peso en el SEO debido a la optimización de la velocidad de carga de las webs para dispositivos móviles.
AMP ¿sí o no?
Un Sí rotundo teniendo en cuenta que Google valora positivamente las webs que incorporan esta funcionalidad. Las versiones de las paginas AMP reducen los contenidos de una web al mínimo necesario de forma que se cargan más rápido que nunca.
Por tanto si Google nos recomienda el uso de AMP, sin duda debemos hacerle caso. Especialmente por que ello nos ayudará a mejorar nuestros resultados en las SERP.
Cómo implantar AMP en un blog de WordPress
Hacer compatible tu blog de WordPress con AMP es sumamente fácil. Tan sólo tienes que descargarte el Plugin que lo hará compatible sin tener que realizar ningún tipo de configuración adicional. Basta con tenerlo instalado y el plugin se encarga del resto de forma automática y sin que tengas que hacer nada al respecto. A continuación te dejamos los enlaces a dos Plugins que realizan esta función.
https://es.wordpress.org/plugins/amp/ by Automattic
https://es.wordpress.org/plugins/accelerated-mobile-pages/ by Ahmed & Mohammed Kaludi
Cómo implantar AMP en una página web
En una página web no será tan sencillo como en tu WordPress, ya que será un proceso manual y por tanto más complejo y delicado.
Debemos crear versiones AMP de cada una de las páginas finales (producto, noticias, landings…) que sean relevantes para Google y para los usuarios móviles. Las cuales serviremos con otra URL y que contendrán una etiqueta HTML especifica en su código.
Una versión AMP de una página es aquella que:
- Descarta o elimina el uso de elementos pesados como imágenes, iframes, formularios… innecesarios para transmitir rápidamente la información a los usuarios finales. Eliminando completamente la posibilidad de uso de Javascript.
- Utiliza en su código HTML etiquetas específicas para identificarla como una versión AMP. Por ejemplo: en lugar de <img> se utilizaría <amp-img>.
Además, las hojas de estilo tienen sus propias limitaciones en una versión AMP:
- No se pueden utilizar hojas de estilo (CSS) externas.
- Las CSS han de estar dentro de una única y misma etiqueta específica para AMP: <style amp-custom>
- Reglas CSS como @import e !important tienen el uso completamente prohibido.
Adaptando una página a AMP
Teniendo en cuenta lo anterior, duplicaremos nuestra página y editaremos su código HTML para convertirla en AMP.
Paso a paso:
- La etiqueta <!doctype html> debe estar presente y en primer lugar.
- A continuación cambiamos la etiqueta <html> por una como esta: <html amp lang=”es”>, como ves, además de señalar que es una página amp, también indicamos el idioma.
- Dentro de <head> empezamos con la etiqueta <meta charset=”utf-8”>
- Inmediatamente a continuación introducimos la siguiente librería: <script async src=https://cdn.ampproject.org/v0.js»></script>.
- Para evitar problemas SEO de contenido duplicado, es imprescindible introducir una etiqueta <link rel=”canonical”> que apunte a la URL de la página original que estamos convirtiendo. Esto es importante o Google en vez de premiarnos con mejores posiciones nos penalizará.
- Optimizamos la visualización del contenido a la resolución del dispositivo: <meta name=»viewport» content=»width=device-width,minimum-scale=1,initial-scale=1″>
- Introducimos los estilos CSS dentro de la etiqueta <style amp-custom> </style>
- Antes del cierre del <head> es imprescindible copiar y pegar el siguiente código que incluye estilos específicos relativos a la visualización del contenido de la página.
</script>
<style amp-custom>Aquí los estilos CSS (tipos y tamaños de fuente, colores… </style>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style>
</noscript>
Estos son los pasos básicos para construir una página específica en AMP, siempre respetando los requisitos indicados en un principio para una página AMP. Pero además podemos añadir metadatos de schema.org que identifiquen el contenido de la página: artículo, noticia, post de blog…
Te animamos a visitar la página del proyecto AMP y descubrir mucho más: https://www.ampproject.org/es/
¿Ya utilizas AMP? ¿Has notado cambios en tu indexación en las SERP?
