WordPress y AMP: Errores más comunes y como solucionarlos

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:

1. Comprobamos los datos estructurados de la página
2. Comprobamos que las páginas AMP están correctamente generadas.

¿Cuáles son los mejores temas de Genesis Framework para WordPress en 2019?

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:

Cómo crear tu web con WordPress: Guía de instalación paso a paso en tu servidor

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. También recomiendo visitar la página web: https://www.ampproject.org.

3.-Actualización a AMP versión 1

Sí. El plugin de AMP oficial de WordPress ya ha salido de la guardería y ha traído interesantes opciones con él. La principal, es que ya podemos cambiar con seguridad del «Classic Mode» al «Paired o Native Mode».

Recomiendo totalmente hacer este cambio porque pasas a usar el CSS de tus propias plantillas: tus páginas AMP ya tienen estilo propio, que es igual al de tu tema por defecto de WordPress.

• Nativo:Reutiliza las plantillas del tema activo para mostrar las respuestas AMP, pero no utiliza URLs separadas para AMP. Esto significa que tu sitio es AMP-first y tus URLs canónicas son AMP.  
• Emparejado:Reutiliza las plantillas del tema activo para mostrar las respuestas AMP, pero utiliza URLs separadas para AMP. Cada URL canónica puede tener una URL AMP correspondiente, si el contenido es totalmente válido para AMP. 
• Clásico: Muestra las respuestas AMP en plantillas de entradas clásicas (heredadas) en un diseño básico que no coincide con las plantillas de tu tema.

¿Qué modo recomiendo? Estoy utilizando el modo Nativo (toda tu página web con cambiar de URL se transforma en AMP) y la verdad es que funciona muy bien. El plugin directamente realiza una redirección 302 desde la antiguas urls del modo clásico y no se pierde nada de SEO en el proceso.

Además, con esta opción y marcando los dos apartados de gestión de validación, todos los errores que puedan aparecer en tus páginas AMP son gestionados directamente por el plugin .

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.

Como proteger y aumentar la seguridad de WordPress con WebARX

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.

5.-Es posible que el propio plugin de AMP de problemas

Es posible que al actualizar una nueva versión del plugin de AMP oficial, haya algún bug que provoque que las páginas AMP no funcionen correctamente. Visita el foro de soporte y comprueba si alguien tiene el mismo problema que tu. También es posible que en Google Webmaster Tools aparezca el error (si tienes dada de alta tu página en este servicio), lo que te puede ayudar a descubrir el problema y una posible solución.

6.-Google Analytics deja de hacer el seguimiento de tus páginas AMP

Pues sí… Google Analytics utiliza Javascript para contabilizar las visitas a tus páginas, y AMP se lo quita de un plumazo. Tienes que hacer una cosa muy sencilla:

Vas a la sección Analytics del Plugin AMP y añades lo siguiente en Configuración de JSON:

{
    "vars": {
        "account": "UA-XXXXXX-Y"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

¡IMPORTANTE! Donde UA-XXXXXX-Y es el código de seguimiento personal de tu página en Analytics y que puedes consultar en tu cuenta.

En el campo «Tipo» pones googleanalytics, y el apartado ID lo genera dinámicamente. Le das a guardar y todo listo. Tienes más información en: añadiendo Analytics a tus páginas AMP;