Enrique J. Ros

Modificar las páginas AMP con el plugin de Automattic

Enrique J. Ros

Ya he hablado aquí anteriormente de las páginas AMP (Accelerated Mobile Pages), una tecnología web que, a pesar de que el proyecto ya tiene casi dos años, aún se puede calificar de novedosa, y que se puede implementar en WordPress con la ayuda de un plugin.

El plugin más extendido y utilizado para dar soporte a las páginas AMP en WordPress es el de Automattic que, si bien no es oficial (AMP es una tecnología desarrollada por Google), sí es oficioso ya que es la implementación de la gente que está detrás de WordPress.

Sin embargo este plugin (como otros plugins gratuitos disponibles para dar soporte AMP a WordPress) es bastante limitado en cuanto al resultado. Así que vamos a ver cómo podemos modificar y personalizar las páginas AMP generadas por el plugin de Automattic.

AMP en WordPress

No quiero extenderme mucho hablando de en qué consiste el proyecto AMP, entre otras cosas porque ya le dediqué en su día un artículo al tema. Si todo esto te suena un poco a chino (ya sea mandarín o cantonés), échale un vistazo a este artículo:

Qué es la tecnología AMP, Accelerated Mobile Pages

En cuanto a implementarlo en WordPress, hoy día hay algunas alternativas, aunque el asunto está aún dando sus primeros pasos. Las más destacadas son dos:

Hay, como decía algunas otras alternativas, como AMP Toolbox, Custom AMP o AMP for WP, pero si hechas un vistazo a los datos de uso y de actualizaciones comprenderás por qué no me detengo más en ellas.


Arriba un artículo de este blog (con un diseño anterior al actual). Abajo, la versión AMP de ese mismo artículo.

El plugin de Automattic

El plugin de WordPress AMP fue la primera solución disponible para dar soporte a la tecnología AMP en WordPress. Eso, y el hecho de que estuviera desarrollada por Automattic (garantía de calidad y de compatibilidad 100%, presente y futura), hizo que fuera ampliamente utilizado, a pesar de ser bastante limitado.

Y de hecho lo es. Las posibilidades de personalización son pocas, concretamente ninguna, aparte de poder elegir el color del fondo y texto de la cabecera y dos opciones para el contenido, claro u oscuro (en Apariencia > AMP).

Aunque la limitación más irritante de este plugin es que sólo da soporte para la tecnología AMP en las entradas: ni en las páginas, ni en los archivos por fecha, ni en custom post types, ni en la página de error 404, ni en las páginas de categoría, ni en los archivos de autor, ni en las páginas de etiquetas, ni en los resultados de búsqueda…

En fin, todo lo contrario que WP AMP, que sí da soporte a todos esos contenidos, además de permitir bastante (mucha) personalización.

Personalizar las páginas AMP del plugin de Automattic

Lo más frustrante del asunto es que, por la propia naturaleza de AMP, estas páginas no admiten CSS, así que la limitación para modificarlas es casi total. Sí, maifrén, he dicho «casi». Porque hay un secreto: como no podía ser de otra forma en un plugin creado por Automattic, éste incluye hooks, lo que permite modificar su salida mediante pequeñas funciones.

Así que, si estás tan familiarizado con PHP como con la escritura japonesa (ya sea hiragana o katakana), aquí te dejo una colección de snippets que te permitirán modificar la salida de AMP sin necesidad de saber ni lo que es una variable. Tan sólo copiar y pegar.

Quitar la imagen destacada en la versión AMP

Por defecto, el plugin de AMP muestra antes de las entradas la imagen destacada de ésta. Como para otras muchas cosas, el plugin carece de una opción que nos permita modificar esto, pero sí podemos hacerlo utilizando un filtro, concretamente el filter hook amp_post_template_data.

Aquí va la función que te permite ocultar la imagen destacada en la versión AMP:

add_filter ('amp_post_template_data', function ($data) {
      $data['featured_image'] = false;
      return $data;
      });

Cambiar el tipo de contenido en schema para las páginas AMP

Por defecto, el plugin de Automattic establece en los datos estructurados (el marcado schema) de la versión AMP de las entradas el tipo BlogPosting, que es bastante genérico. Sin embargo schema admite otros tipos más específicos, como NewsArticle, ImageGallery, TechArticle, Report, ScholarlyArticle… En fin, puedes ver todos los disponibles en la web de Schema.org

Así que, si tu contenido encaja con un tipo más específico que simplemente BlogPosting, puedes cambiarlo. Basta con usar la siguiente función:

add_filter ('amp_post_template_metadata', function ($metadata, $post) {
    $metadata['@type'] = 'NewsArticle';
    return $metadata;
    }, PHP_INT_MAX, 2);

Lógicamente, tendrás que cambiar NewsArticle por el tipo que te interese.

Establecer como fecha de publicación de la versión AMP la de la última actualización

Ya sabes que a Google le gusta el contenido fresco, y que la fecha de publicación es uno de los aspectos que influyen en el posicionamiento de una entrada.

Con esta función podrás cambiar la fecha de publicación, haciendo que ésta sea la de la última actualización:

add_filter ('amp_post_template_metadata', function ($metadata, $post) {
    $metadata['datePublished'] = $metadata['dateModified'];
    return $metadata;
    }, 10, 2 );

Ojo, porque esto no va a afectar a la visualización: la fecha de publicación que WordPress mostrará en la entrada no va a cambiar. Lo que sí cambiará es el dato incluido en los datos estructurados de la publicación, que al fin y al cabo es lo que Google mira.

Puedes comprobar el cambio utilizando la herramienta de pruebas de datos estructurados de Google.

Quitar la fecha de publicación de las páginas AMP

Hablando de la fecha de publicación, y volviendo de nuevo a las opciones de visualización, también puedes hacer que ésta no se muestre en la versión AMP. Para ello basta con utilizar el filtro amp_post_article_header_meta, de la siguiente forma:

add_filter ('amp_post_article_header_meta', function ($partes) {
    unset( $partes[array_search ('meta-time', $partes)]);
    return $partes;
    });

Eliminar el autor de la visualización AMP

Y ya que estamos con cosas que puedes quitar de la cabecera de la versión AMP gracias al filtro amp_post_article_header_meta, también puedes quitar el autor con una función muy similar a la anterior:

add_filter ('amp_post_article_header_meta', function ($partes) {
    unset ($partes[array_search ('meta-author', $partes)]);
    return $partes;
    });

Aunque específicamente esto no afecta a la visualización en la versión AMP y el error hace referencia a los datos estructurados, resulta que a veces se genera este error en la versión AMP.

Te lo puedes encontrar, si tienes bien configurado Google Search Console (y si no sabes de qué te hablo quizá te convenga echar un vistazo a mi servicio de optimización de SEO para WordPress), en el apartado Apariencia en el buscador > Accelerated Mobile Pages, donde te está notificando problemas en todas las páginas AMP.

Afortunadamente la solución es bastante sencilla: basta con añadir la información relativa al logo a los datos estructurados de la versión AMP. Para ello necesitas un logo de, como máximo, 60 píxels de alto y 600 píxels de ancho.

Después sólo tienes que utilizar el filtro amp_post_template_metadata, mediante el que introduces el objeto imagen dentro de los metadatos enriquecidos correspondientes al objeto Publisher, que es al que le falta el campo requerido. ¿Suena complicado? Pues en absoluto, mira:

add_filter ('amp_post_template_metadata', function ($metadata, $post) {
    if ($post->post_type === 'post') {
        $metadata['@type'] = 'BlogPosting';
        $metadata['publisher']['logo'] = array (
            '@type' => 'ImageObject',
            'url' => 'https://www.enriquejros.com/desarrolloweb/logo-amp.png',
            'height' => 60,
            'width' => 264,
            );
        return $metadata; 
        }
    }, 10, 2);

Evidentemente, tienes que cambiar la URL por la de tu logo, al igual que la altura (height) y la anchura (width) en pixels.

Bonus 2: solucionar la advertencia El atributo image.width tiene un valor no válido

Este es otro de los típicos. Resulta que los datos estructurados para AMP requiere que el ancho mínimo de la imagen destacada sea de 696 píxeles, y si es menor el validador te soltará esta advertencia.

Lo correcto en estos casos es hacer las cosas bien: esos requerimientos están por algo, concretamente para que esta imagen se visualice correctamente en todos los dispositivos y configuraciones, sin que en ningún caso aparezca pixelada. Así que si ves esta advertencia lo mejor es ir a la entrada y establecer una imagen destacada con el ancho mínimo requerido.

Pero claro, si te encuentras con que esta advertencia se repite en varios cientos de entradas, y que además has creado el filtro (que hemos visto más arriba) para que la imagen destacada no se muestre, ¿qué vas a hacer?

Bueno, pues puedes hacer algo de trampa y «falsear» las medidas de la imagen para que cumpla ese mínimo. Eso lo puedes hacer con esta función:

add_filter ('amp_post_template_metadata', function ($metadata, $post) {
    if (!empty ($metadata['image']['width']) && ($metadata['image']['width'] < 696)) {
        $metadata['image']['height'] = round ($metadata['image']['height'] * (696 / $metadata['image']['width']));
        $metadata['image']['width'] = 696;
    	}
    return $metadata;
    }, 10, 2);

Al fin y al cabo, trampa que vale no es trampa.

Salir de la versión móvil