AMP, acrónimo de Accelerated Mobile Pages, es una iniciativa de código abierto que pretende ofrecer una experiencia de navegación en Internet ultra-rápida desde dispositivos móviles.

Básicamente, consiste en limitar el uso de elementos CSS, JavaScript y HTML para optimizar la velocidad de carga y renderizado de un página web. Por ejemplo, las especificaciones AMP HTML admiten sólo algunos elementos HTML y algunos son reemplazados por elementos propios. Por ejemplo, reemplaza <img> por <amp-img> que es renderizado por la biblioteca JavaScript amp.js de forma más eficiente y con soporte completo para srcset.

En este post no vamos a entrar en aspectos técnicos, nos vamos a centrar en como implementarlo en WordPress de forma práctica, incluyendo la implementación de Google Analytics y de Adsense.

Instalación de AMP en WordPress

Implementar AMP en WordPress es tan fácil como utilizar el plugin oficial AMP, y digo plugin “oficial” porque en su desarrollo interviene Automattic, la empresa que está detrás de WordPress.com y que también participa de forma directa en el proyecto AMP junto a Google y otras empresas referentes en Internet, como Twitter o ChartBeat.

Instalamos el plugin como cualquier otro y listo. Tendremos disponible la versión amp de nuestros posts automáticamente (de momento solo para posts) añadiendo al final de la URL de cada post /amp, si utilizas pretty permalinks, o ?amp=1, si utilizas la estructura de enlaces predeterminada.

El plugin AMP lo que hace es añadir la referencia a la versión amp en el <head> de la versión normal del post. De esta forma, la versión amp puede ser rastreada por Google, y otros consumidores de contenido, y ofrecerla a sus usuarios cuándo lo estimen oportuno.

<link rel="amphtml" href="https://ejemplo.com/post-name/amp" />

Personalización del template AMP

En la versión amp, el plugin carga un template con un diseño básico que podemos personalizar, ya sea introduciendo CSS propio o sobreescribiendo completamente el template.

1

Introducir CSS personalizado y opciones del template

El plugin AMP utiliza un diseño básico muy limpio pero que se puede personalizar fácilmente.

La primera fuente de personalización es automática utilizando algunos theme mods del core, como el custom background, el custom header o el site icon. Si el theme utiliza estas características, AMP las utilizará también de forma automática.

La segunda fuente de personalización es filtrar algunas de las propiedades CSS establecidas por el plugin AMP. Por ahora no son muchas, puedes verlas todas y cambiar las que necesites en el filtro amp_post_template_data. A través de este filtro se pueden personalizar también otras opciones visuales:

add_filter( 'amp_post_template_data', 'cyb_amp_custom_template_data', 10, 2 );
function cyb_amp_custom_template_data( $data, $post ) {

    // Uncomment para ver todo lo disponible para customizar
    // var_dump( $data );

    $data[ 'content_max_width' ] = 800;
    $data[ 'placeholder_image_url' ] = get_stylesheet_directory_uri() . '/images/amp-iframe-placeholder.png';

    return $data;

}

Algunas de las opciones que se pueden modificar en amp_post_template_data tienen sus propios filtros. Por ejemplo:

add_filter( 'amp_content_max_width', 'cyb_amp_set_content_width' );
function cyb_amp_set_content_width( $content_max_width ) {
    return 1200;
}
add_filter( 'amp_site_icon_url', 'cyb_amp_set_site_icon_url' );
function cyb_amp_set_site_icon_url( $site_icon_url ) {
    return get_stylesheet_directory_uri() . '/images/site-icon.png';
}

Además, podemos añadir nuestras propias reglas CSS utilizando el action amp_post_template_css:

add_action( 'amp_post_template_css', 'cyb_amp_css_styles' );
function cyb_amp_css_styles() {
    ?>
    body {
        font-size: 18px;
    }
    /* Más reglas CSS aquí */
    <?php
}

También se puede sobreescribir completamente el CSS. Para ello crea una carpeta llamada amp en tu theme y en ella crear un archivo style.php dónde se genere el CSS que quieras aplicar (fíjate cómo se hace en el original plugins/amp/templates/style.php).

2

Sobreescribir el template o partes

Actualmente el plugin AMP funciona sólo para la vista de un sólo post, no para páginas de archivo (categorías, blog, etc). El plugin carga un template single.php y dentro de este template carga diferentes partes, por ejemplo meta-author.php que muestra la información del autor del post. El template y las partes están localizadas en plugins/amp/templates/.

Puedes sobreescribirlas desde tu theme simplemente creando una carpeta de nombre amp y poniendo en ella los templates amp que quieras sobreescribir.

Y también se pueden sobreescribir desde plugins. Por ejemplo, podrías cargar un template single.php de este modo:

add_filter( 'amp_post_template_file', 'cyb_amp_set_custom_single_template', 10, 3 );
function cyb_set_custom_amp_single_template( $file, $type, $post ) {
  if ( 'single' === $type ) {
    $file = dirname( __FILE__ ) . '/amp-templates/single.php';
  }
  return $file;
}

Es muy importante recordar que el template single.php incluye actions que deben incluirse necesariamente en el template personalizado. Por ejemplo, el action amp_post_template_head:

do_action( 'amp_post_template_head', $this );

Para evitar fallos, puede ser interesante copiar el template single.php original y modificar lo que necesite a partir de el.

Además del template general single.php, también se pueden sobreescribir las partes del template que mencionábamos antes. Si no quieres alguna de estas partes, por ejemplo el meta-taxonomy.php, la puedes quitar:

add_filter( 'amp_post_template_meta_parts', 'cyb_amp_remove_taxonomoy_meta', 10, 3 );
function cyb_amp_remove_taxonomoy_meta( $meta_parts ) {
  foreach ( array_keys( $meta_parts, 'meta-taxonomy', true ) as $key ) {
    unset( $meta_parts[ $key ] );
  }
  return $meta_parts;
}

O si quieres añadir un template meta personalizado:

// Añadimos el key del template meta
add_filter( 'amp_post_template_meta_parts', 'cyb_amp_add_comment_count_meta' );
function cyb_amp_add_comment_count_meta( $meta_parts ) {
    $meta_parts[] = 'cyb-meta-comment-count';
    return $meta_parts;
}
// Asociamos un archivo con el key definido anteriormente
add_filter( 'amp_post_template_file', 'cyb_amp_set_comment_count_meta_template', 10, 3 );
function cyb_amp_set_comment_count_meta_template( $file, $type, $post ) {
    if ( 'cyb-meta-comment-count' === $type ) {
        // Desde el theme
        $file = get_stylesheet_directory() . '/amp/meta-comment-count.php';
        // Desde un plugin
        // $file = dirname( __FILE__ ) . '/amp/meta-comment-count.php';
    }
    return $file;
}
3

Uso del filtro the_content y shortcodes

Muchos hooks de WordPress siguen estando disponibles en los templates amp. Uno de los más importantes, al menos en lo que a personalización se refiere, es el filtro the_content().

Por ejemplo, podemos añadir la imagen destacada del post:

add_action( 'pre_amp_render_post', 'cyb_amp_custom_render_post_actions' );
function cyb_amp_custom_render_post_actions() {
  add_filter( 'the_content', 'cyb_amp_add_featured_image' );
}
function cyb_amp_add_featured_image( $content ) {
  if ( has_post_thumbnail() ) {
    $image = sprintf( '<div class="featured-image">%s</div>', get_the_post_thumbnail() );
    $content = $image . $content;
  }
  return $content;
}

O también se podría hacer con el condicional is_amp_endpoint():

add_filter( 'the_content', 'cyb_amp_add_featured_image' );
function cyb_amp_add_featured_image( $content ) {
  if ( is_amp_endpoint() && has_post_thumbnail() ) {
    $image = sprintf( '<div class="featured-image">%s</div>', get_the_post_thumbnail() );
    $content = $image . $content;
  }
  return $content;
}

El condicional is_amp_endpoint()

En el ejemplo anterior hemos visto como, con el condicional is_amp_endpoint(), se pueden ejecutar filtros del core de WordPress sólo para las versiones AMP.

Lo bueno de que filtros como the_content funcionen en las versiones AMP es que se integrará con cualquier plugin y theme. Lo malo es que mucho HTML y JS no es válido en AMP. Por este motivo el conditional is_amp_endpoint() puede ser muy útil.

Por ejemplo, podríamos utilizar este condicional en shortcodes que añadan elementos no válidos para AMP.

4

Añadir soporte para custom post types

El plugin AMP sólo funciona para el tipo de post estándar. Si tenemos un tipo de post personalizado que queremos que también soporte versión amp, lo podemos añadir de este modo:

add_action( 'amp_init', 'cyb_add_amp_post_type_support' );
function cyb_add_amp_post_type_support() {
    add_post_type_support( 'mi-custom-post-type', AMP_QUERY_VAR );
}
5

Personalización del marcado Schema.org

El plugin AMP utiliza de forma predeterminada el marcado BlogPosting, pero se pude modificar según las necesidades que tengamos. Por ejemplo, podemos cambiarlo a NewsArticle:

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

Hay otras muchas opciones de personalización, creo que he cubierto las más destacadas. Para no hacer el post interminable, lo dejaremos aquí por el momento.

Añadir Adsense

En el repositorio del proyecto AMP se pueden encontrar ejemplos de implementación de Google Adsense y otras redes publicitarias que soportan el elemento amp-ad.

Podríamos añadir Adsense al template amp de muchas formas, por ejemplo podemos poner un bloque de anuncios en la parte superior del contenido utilizando el filtro the_content:

add_filter( 'the_content', 'cyb_amp_add_adsense' );
function cyb_amp_add_adsense( $content ) {
  if ( is_amp_endpoint() ) {
    $ads = '<amp-ad width=300 height=200
      type="adsense"
      data-ad-client="ca-pub-66666666"
      data-ad-slot="79856666666">
    </amp-ad>';
    $content = $ads . $content;
  }
  return $content;
}

Añadir Google Analytics

Se puede añadir Google Analytics, o cualquier otro proveedor que soporte AMP, utilizando el filtro amp_post_template_analytics. Un ejemplo con Google Analytics:

add_filter( 'amp_post_template_analytics', 'cyb_amp_add_google_analytics' );
function cyb_amp_add_google_analytics( $analytics ) {
  if ( ! is_array( $analytics ) ) {
    $analytics = array();
  }
  // Ver https://github.com/ampproject/amphtml/blob/master/extensions/amp-analytics/amp-analytics.md
  // y https://developers.google.com/analytics/devguides/collection/amp-analytics/
  $analytics['cyb-googleanalytics'] = array(
    'type' => 'googleanalytics',
     'attributes' => array(
         // ....
     ),
    'config_data' => array(
      'vars' => array(
        'account' => "UA-XXXXX-Y"
      ),
      'triggers' => array(
        'trackPageview' => array(
          'on' => 'visible',
          'request' => 'pageview',
        ),
      ),
    ),
  );
  return $analytics;
}

Nota: son obligatorios $analytics['type'], $analytics['attributes'] y $analytics['config_data']. Aunque todas las opciones de $analytics['attributes'] son opcionales, $analytics['attributes'] es obligatorio, aunque sea un array vacío como en el ejemplo anterior. Vea la documentación para más proveedeores de análisis y las posibles opciones de atributos y configuración.

Redireccionar a los usuarios móviles a la versión AMP

Aunque es bastante común ver tutoriales en los que redireccionan a todos los usuarios móviles a la versión AMP, no lo recomiendo en absoluto. AMP es muy limitado y no es un sustituto de la web estándar ni de una web responsive. Hay que dejar que sea el consumidor de contenido que esté utilizando el usuario quien decida si utilizar la versión AMP o no.

Por ejemplo, Google ofrece la versión AMP, si está disponible, para usuarios que buscan desde dispositivos móviles a través del Content Carousel.

De todas formas, si queréis hacerlo, podéis, aquí una opción para hacerlo desde .htaccess:

RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://ejemplo.com/$1/amp [L,R=302]
  • Ronald

    Saludos. En donde añado add_action( ‘amp_post_template_css’, ‘cyb_amp_css_styles’ ); en el functions.php del theme ?. Gracias

    • Cómo cualquier otra interacción con el API de WordPress, actions y filters funcionarán prácticamente por igual en un plugin o en el functions.php del theme. La elección es tuya.

      Si son cosas que deberían desaparecer o cambiar si te pasas a otro theme, ponlo en el functions.php del theme. Si son cosas que deben permanecer incluso sin cambias de theme, ponlo en un plugin.

      En el caso del CSS, si lo que persigues es conseguir un aspecto visual de las páginas AMP que se corresponda con el aspecto visual del resto del sitio, es decir, que se corresponda con el estilo del theme, yo lo pondría en el functions.php del theme. Si lo que persigues es otra cosa, pues ya depende de lo que sea que persigues.

      Espero que entiendas lo que quiero decir.

  • Alberto Cuervo Mallada

    Buenos días;

    Yo tengo una pregunta, acabo de implantar AMP en mi web, en google analytics donde puedo ver que google se ha enterado que he implantado AMP en mi web, bueno actualmente solo tengo una noticia publicada, pero esta semana publicaré alguna mas para ver el resultado.

    Un saludo y gracias!

  • Mauro Alves

    Hola, para implementar adsense según el ejemplo del blog, ¿dónde se pega el código del ejemplo? ¿En template/single.php? Eso es lo que no entiendo. ¿Alguna opción para ponerlo después del segundo párrafo? Gracias por la respuesta.

  • Xurxo Freitas Pereira

    Acabo de intentar poner la imagen destacada con este plugin y no fui capaz con lo que tu pusiste.

    Viendo el gihub oficial encontré esto y me funcionó:

    add_action( 'pre_amp_render_post', 'xyz_amp_add_custom_actions' );
    function xyz_amp_add_custom_actions() {
    add_filter( 'the_content', 'xyz_amp_add_featured_image' );
    }

    function xyz_amp_add_featured_image( $content ) {
    if ( has_post_thumbnail() ) {
    // Just add the raw tag; our sanitizer will take care of it later.
    $image = sprintf( '%s', get_the_post_thumbnail() );
    $content = $image . $content;
    }
    return $content;
    }

    • El ejemplo del post tenia un error, no cambie el nombre de la funcion callback para el filtro the_content 😉

      Si lo miras, no hay diferencia con el ejemplo que pones tu.

  • Cómo podría poner un anuncio de Adsense pero justo después del contenido, intenté con amp_post_template_footer, pero me aparece un error.

    Gracias!

    • En el post hay un ejemplo utilizando el fitlro the_content, ¿lo has visto?

    • Xurxo Freitas Pereira

      Hola Juan he visto todos los ejemplos pero soy un poco novato en esto y aún no conseguí que funcionara, me podrías pasar un enlace o decirme como hacer lo que roc21 pide?

    • Pues lo mismo que en el ejemplo pero en lugar de poner primero el ad y luego el contenido, lo poner al revés y ya está. La verdad que no puedo imaginar dónde veis el problema.

  • César Carballo

    lo que no logro es implementar analytics con tu ejemplo!

    • Lo siento muchísimo por la confusión. El filtro amp_post_template_analytics aún no está implementado en la versión pública, sólo en la versión de desarrollo del plugin. Parece que se integrará en la próxima versión.

    • El component amp-analytics ha sido ya introducido en la versión 0.3.2, liberada hoy, pero parece que con algún bug. No logro que me funcione. Estoy probando, volveré con noticias.

    • Ya está probado y reprobado. En la versión del plugin AMP 0.3.2 se puede añadir Google Analytics. Mira el ejemplo actualizado del post.

  • César Carballo

    Muy bueno

  • 100% de acuerdo, Juan. Yo tampoco recomiendo redireccionar a todos los usuarios, es de locos! Por cierto, muy buen tutorial, felicidades! 🙂