El otro día comentaba que a lo mejor sería interesante crear tu propias páginas AMP para WordPress. Las páginas de Accelerated Mobile Pages (AMP) son páginas web diseñadas en función de una especificación de software libre. Las páginas de AMP validadas se rastrean, se almacenan y se publican desde una caché que permite que su publicación sea aún más rápida. Y Google les esta dando un trato preferente, así que pueden suponer un gran impulso par tu web.
En WordPress, solo tenemos que instalar el plugin para AMP, se activa y todo debería de funcionar (luego hay que esperar a que Google indexe tus páginas)… pero a veces tenemos problemas… ¿Cómo? Es posible que veas perfectamente tus páginas AMP y que Google no las indexe porque contienen errores. ¿Qué podemos hacer?
Si vas a las Herramientas para Webmaster de Google, te puedes encontrar algo como esto:
Entonces, nos tenemos que poner manos a la obra y descubrir cuales son los errores. Tenemos que comprobar que todo es correcto realizando dos acciones:
- Comprobamos los datos estructurados de la página
- Comprobamos que las páginas AMP están correctamente generadas.
1.-Comprobamos los datos estructurados de nuestra página
Vamos a la página https://developers.google.com/structured-data/testing-tool/ y metemos la url que queremos comprobar, en mi caso:
Cómo crear tu web con WordPress: Guía de instalación paso a paso en tu servidor
Si todo sale bien deberias obtener algo como esto:
En caso contrario, en el lado derecho te indicaran cuales son los errores a solucionar.
- También puedes utilizar la página https://search.google.com/search-console/amp, donde te dice claramente cuales son los errores y alguna posible solución.
2.-Comprobamos que las páginas AMP están correctamente generadas.
En este caso tenemos que utilizar Google Chrome como navegador y meter la url del ejemplo con un pequeño añadido:
https://algoentremanos.com/como-crear-tu-web-con-wordpress-guia-de-instalacion-paso-a-paso-en-tu-servidor/amp/#development=1
con #development=1 al final de tu url, y luego tenemos que entrar en las Herramientas para Desarrolladores de Chrome (menú de las 3 barras de la derecha > Más herramientas), y si todo sale bien obtendremos algo como esto:
donde al final, abajo del todo, no nos sale ningún error y nos dice que las páginas AMP son correctas. En caso contrario, te indicaran cual es el error y en que parte del código lo puedes encontrar.
Errores muy comunes que te puedes encontrar al instalar AMP en WordPress
1.-Error: Algún plugin te esta modificando las cabeceras. Obtienes unos errores como estos al comprobar la página AMP en Chrome:
- The attribute ‘type’ in tag ‘script type=application/ld+json’ is set to the invalid value ‘text/javascript’.
- The attribute ‘href’ in tag ‘link rel=stylesheet for fonts’ is set to the invalid value ‘//fonts.googleapis.com/css?family=Merriweather:400,400italic,700,700italic|Open+Sans:400,700,400italic,700italic’. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#custom-fonts)
- The attribute ‘src’ in tag ‘amphtml engine v0.js script’ is set to the invalid value ‘//cdn.ampproject.org/v0.js’. (see https://github.com/ampproject/amphtml/blob/master/spec/amp-html-format.md#scrpt)
- The attribute ‘type’ in tag ‘script type=application/ld+json’ is set to the invalid value ‘text/javascript’.
Solución: Prueba a desactivar cada plugin de WordPress uno a uno hasta que desaparezca el error.
2.-Error: Tienes instalado Cloudflare y activado Rocket Loader
Solución: Desactiva esta opción en el panel de control de Cloudflare. Esta opción modifica partes del código de manera sustancial.
- Me he puesto en contacto con el soporte de Cloudflare y me han comentado que van a arreglar este error que se produce al activar esta función de cache.
3.-Error: Es posible que el plugin AMP de WordPress tenga algún error.
Solución: Visita el foro de soporte del plugin AMP y mira si a alguien le esta pasando lo mismo que a ti. Es posible que actualicen el plugin en breve.
4.-Error en tu servidor: ¿Tienes instalado mod_pagespeed?
Solución: mod_pagespeed es un modulo que acelera la carga de tu contenido web modificando muchos aspectos de tus imagenes, css, javascript etc, y eso puede afectar al codigo de la pagina amp en gran medida. Tenemos que evitar que este modulo de apache y ngix haga esto entrando en su fichero de configuración (/etc/httpd/conf.d/pagespeed.conf o similar) y añadiendo la siguiente orden (fuente: stackoverflow.com):
- ngix: pagespeed Disallow */amp/*;
- apache: ModPagespeedDisallow */amp/*;
Luego tienes que reiniciar tu servidor Apache o ngix para que el cambio surta efecto.
Hola
Gracias por tu artículo. Muy útil.
Ahora la search console me está lanzando este error en numerosos posts:
El atributo “width” de la etiqueta “amp-img” se ha establecido con el valor “”, que no es válido.
¿Qué debo hacer?
¿es un problema del plugin que estoy usando o es un problema del código original de los posts?
Gracias
Uff…. Puede ser desde tu configuración del servidor hasta un plugin…. Prueba la herramienta de Google especifica para chequear AMP en Google Webmasters Tools.