Bueno pues una vez que tenemos funcionando AMP con WordPress como siempre llegan las sorpresas. Porque la gente que programa plugins no sigue los estándares. No añaden el código al header y al footer con las funciones por defecto, etc.
Y esto en que se traduce: Pues en errores de validación en Google Search Console y que las páginas AMP no aparecerán en los resultados de búsqueda de Google:
- La etiqueta HTML está prohibida o bien se ha hecho un uso no válido: Elimina las etiquetas HTML prohibidas o corrige los atributos o valores no compatibles con el estándar de AMP. Las páginas de AMP que contengan etiquetas HTML prohibidas o de las que se haya hecho un uso no válido pueden figurar en los resultados de búsqueda de Google sin las funciones de visualización específicas de AMP.
- Hojas de estilo CSS no válidas: Corrige los errores de la hoja de estilo para que se adecue a los estándares de AMP. Las páginas de AMP que contengan hojas de estilo CSS no válidas pueden figurar en los resultados de búsqueda de Google sin las funciones de visualización específicas de AMP.
- Se ha encontrado JavaScript creado por usuarios en la página: Elimina de tu página el código JavaScript personalizado. Las páginas de AMP que contengan código JavaScript personalizado pueden figurar en los resultados de búsqueda de Google sin las funciones de visualización específicas de AMP.
Por tanto: Nos interesa que pase la validación, porque sino es una tontería haber montado el AMP.
Un AMP que no valida no nos sirve de nada. Objetivo: La validación.
¿Y cuál es el problema de validación AMP que hemos encontrado?
Después de haber habilitado AMP en unos cientos de sitios, los problemas son tres (y siempre esos tres) provocados por el propio WordPress, por plugins que incluyen estilos sin usar la función por defecto de WordPress y plugins que incluyen javascript, tanto en el propio código como enlazado, sin usar la función por defecto de WordPress. Y esto se traduce en los tres errores de validación que he pegado arriba.
Ejemplo errores AMP en Google Search Console
¿Qué hacer ante estos errores de validación?
Ante los errores de validación en el primer sitio decidimos solucionarlos, viendo que plugins los provocaban y arreglarlos. Pero esto al final se volvió una locura, porque hay muchos plugins que no se ciñen a los estándares.
Por esta razón optamos por una solución drástica: Eliminar todo el contenido que no queremos y que nos impide pasar las validaciones, sin modificar el plugin que las origina.
Por tanto que hicimos, eliminar las hojas de estilo enlazadas externamente a través de código, eliminar el Javascript insertado dentro del código y también el enlazado externamente, además del código CSS de los Emoji de WordPress.
Código para eliminar CSS y JavaScript de AMP que impiden pasar la validación
Esto al final se vuelve a traducir en lo mismo que siempre: Añadir código en el archivo functions.php del tema activo. En este caso:
add_action( 'pre_amp_render_post', 'amp_add_custom_actions' );
function amp_add_custom_actions() {
if ( function_exists( 'is_amp_endpoint' ) && is_amp_endpoint() ) {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
add_filter( 'tiny_mce_plugins', 'disable_emojis_tinymce' );
}
}
add_action( 'amp_post_template_header', 'quitar_scripts_archivos_css' );
function quitar_scripts_archivos_css( $amp_template ) {
$amp_template = preg_replace('/(<link rel=\'stylesheet\')(.*?)(\/>)/Uis', '', $amp_template);
return $amp_template;
}
add_action( 'amp_post_template_footer', 'quitar_scripts_archivos_js' );
function quitar_scripts_archivos_js( $amp_template ) {
$amp_template = preg_replace('/(<script)(.*?)(</script>)/Uis', '', $amp_template);
return $amp_template;
}
Con este código hemos conseguido pasar la validación AMP de Google Search Console en casi todos los casos. Siempre hay algún caso más complicado y distinto, pero esto debería de servir para el 95 a 99% de los casos.
¡A pasar la validación AMP de Google Search Console!