Cargando...Pues así es, como indica el título del artículo, hoy me ha tocado revisar y arreglar todos los errores de validación de AMP de varias de mis páginas webs. Creo que no hace falta que recalquemos la importancia que tiene y el efecto que puede provocar en el posicionamiento web tener correctamente instalado y configurado el AMP en nuestras páginas webs.
En el artículo de hoy te voy a enseñar cómo he solucionado varios errores y advertencias que me habían llegado a través de webmaster tools y que por A o por B aún no había resuelto y hoy he decidido hacerlo y contarte como lo he hecho.
Cómo detectar errores de validacion de AMP de una web
Esta parte es muy sencilla solo tenemos que entrar a Google Search Console e ir a la sección de AMP. Te recomiendo que comiences a usar la nueva versión de Google Search Console ya que es mucho más completa y está todo mejor estructurado que la versión anterior. En este artículo nos basaremos en la estructura de la nueva sección.
Al entrar a la sección de AMP veremos un resumen del estado de nuestras urls. En ese resumen veremos el contaje de URLs que contienen errores, el contaje de URLs válidas pero con advertencias y por último el contaje de URLs válidas para Google.
Para ver el detalle del error de AMP tendremos que pulsar encima de la parte de errores y en la parte inferior verás que aparece el detalle del tipo de error, lo mismo con las advertencias.
Cómo solucionar errores de validación de AMP
Este paso es muy importante ya que no llega con saber que URLs está produciendo nuestra web, debemos averiguar en qué parte de nuestro código se está produciendo ese error para poder solucionarlo.
Ahora vemos todos los ejemplos de URLs en las cuales el robot de Google ha detectado errores en nuestra configuración de AMP. Tenemos que seleccionar una URL y a la derecha aparecerá una nueva sección en donde nos marcará la parte de nuestro código afectada por el error de configuración de AMP.
Comencemos a desglosar los tipo de errores de configuración de AMP y te explicaré como solucionarlos..
Solucionar error AMP Search Console: El valor del atributo «width» de la etiqueta «amp-img» no es válido
En mi caso puedes ver que el error se está originando en una imagen, exactamente en la imagen del logo de la web. AMP exige que los atributos de width y height de las imágenes vengan informados y como puedes comprobar, mi atributo width estaba vacío al igual que el atributo height, doble error.
Tu Analista Digital usa el plugin Accelerate Mobile Page al igual que casi todas mis webs. En este plugin tenemos un apartado en donde indicamos la imagen que usaremos para el logo e incluso podemos fijar un tamaño determinado. Lo primero que he hecho ha sido revisar la configuración del plugin y analizarlo.
Lo primero que detecté es que el tamaño del logo no estaba fijado manualmente y que lo tenía en automático. Me sorprendió que estuviera en automático y estuviera dando el error ya que tengo otras web con el mismo plugin y configuración que no me estaban generando el mismo error.
Por descartar fijé el tamaño manualmente y apliqué los cambios. Abrí la versión AMP y seguía sin aparecer el logo y generando el mismo error. Lo que me hizo solucionar el error de El valor del atributo «width» de la etiqueta «amp-img» no es válido fue entrar la configuración y volver a indicar la imagen que tenía que usar el plugin para generar el logo. Por algún motivo, algo había quedado roto y al volver repetir la inserción de la imagen se solventó.
Solucionar error AMP Search Console: Atributo “item” prohibido en etiqueta <pre>
Cuando se realiza un uso de un atributo no permitido en AMP te saldrá este aviso. Deberás como siempre detectar en que parte de la página aparece y por qué. Te explico porque me paso a mi.
En la web donde me generó el error de La etiqueta HTML está prohibida o bien se ha hecho un uso no válido fue generado por usar el plugin TinyMCE al insertar código fuente. Se generan datos estructurados de tipo Code y es llamado en el código HTML dentro de la etiqueta <pre>. Para solucionar el error deberás cambiar la estructura de HTML del plugin, para ello yo copié todo el texto de de la entrada y lo pegué en el editor por defecto de WordPress para que use las clases estándar.
Solucionar error AMP Search Console: Discrepancia de contenido grave
Google quiere coherencia entre la versión AMP y la versión original de la web. Cuando detecta que el contenido es diferente salta este aviso. Cómo siempre nos indicará las webs en las cuales pasa y podremos verlo.
Un ejemplo es que tengamos una landing adhoc en la versión normal de la web y en la versión AMP pongamos las ultimas entradas del blog como hacen muchos plugins. Esto generará errores que podremos solucionar de dos maneras:
- La solución más sencilla para que esto no ocurra es seleccionar las páginas que migraremos a AMP y dejar las que son custom sin migrar, home, landings editadas, etc.
- La solución perfecta será usar un plugin de AMP que nos permita personalizar la home para replicar el mismo contenido que la versión original. El plugin Accelerate Mobile Page permite hacer esto.
Validar la corrección realizada en nuestro código AMP
Desde que hayamos modificado el código y sepamos que ya funciona correctamente, lo único que tenemos que hacer es ir a la sección de error y pulsar encima de Validar Corrección.
Este proceso puede llegar a tardar unos minutos y en cuanto acabe te aparecerá el siguiente mensaje:
Pues esto es todo de momento, que sepas que todos los errores que me vayan apareciendo los compartiré contigo y así sabrás como solucionar los errores AMP de Google Search Console. Espero que me dejes un comentario con tu opinión sobre el artículo. Además espero que si tienes alguna duda me la pongas ahí.
