¿Qué pasa si mi WordPress no pasa la validación AMP?

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.

A ver si los que programan plugins los program bien o por lo menos se esfuerzan un poquito

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.

Errores AMP en Google Search Console

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.

Validación AMP correcta

Validación AMP correcta - detalles

¡A pasar la validación AMP de Google Search Console!

10 comentarios en “¿Qué pasa si mi WordPress no pasa la validación AMP?

      1. Juan Luis

        Pues probé a usar el código que publicásteis para pasar la validación AMP y no solo no me han desaparecido los errores que decíais que se eliminarían sino que han aparecido más.

        En fin, creo que esto de AMP es complejo de resolver.

        Un saludo y gracias de todas formas.

        Responder
  1. Sergio

    Buenas noches, disculpe implemente su código y todo va muy bien pero me marca este error, le agradecería mucho si me ayuda a solucionarlo, gracias:

    Catchable fatal error: Object of class AMP_Post_Template could not be converted to string in /home3/comitan/public_html/wp-content/themes/vantage-bak/functions.php on line 243

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Los comentarios de esta página se procesan por un sistema automático de moderación por lo cual no siempre se publican de forma instantánea. Por favor respeta a los demás y ciñete al tema del post. Nos reservamos el derecho de eliminar cualquier comentario o enlace que nos parezca inadecuado o tenga una expresión de grosería, insulto, odio, hostilidad o negatividad.

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.