Cómo mejorar tus páginas AMP en WordPress

Te guste o no, es Google quien dicta las normas actuales de cómo tiene que ser la web, y una de sus últimas apuestas son las páginas AMP, o páginas móviles aceleradas.

¿Por qué AMP?

El objetivo de este HTML adaptado a móviles es ofrecer una experiencia de navegación sencilla y rápida, centrándose en lo fundamental, el contenido.

Para ello, AMP elimina de tus páginas todo aquello que considera irrelevante, la grasa de tus contenidos, como cabeceras, widgets, piés de página, casi todo menos lo que es contenido puro y duro.

AMP es feo

Como resultado, las páginas AMP no son bonitas, no tienen diseño, y en principio AMP solo está pensado para entradas, noticias.

Hay plugins que te permiten personalizar aspectos de sus páginas, y puedes meter publicidad de Adsense y otros servicios.

Aparte de esto, tus contenidos básicamente se mostrarán completos: texto, imágenes, vídeo. Eso sí, olvídate de virguerías y shortcodes de los plugins más populares.

¿Es bueno entonces ofrecer AMP?

Pues sí, porque Google está premiando ya las webs con versiones AMP de sus contenidos, regalándoles las primeras posiciones en los resultados del buscador en móvil, y como la mayoría de la navegación es móvil, pues eso, que es SEO inmediato.

Como muestra un botón, aquí tienes una captura de cómo se duplicó el tráfico de un cliente cada mes solo con añadir AMP.

Convencido ¿cómo instalo AMP?

Bueno, ya lo he contado en varias ocasiones, pero en resumen es así:

1. Instala y activa el plugin AMP para WordPress.
2. Si usas Yoast, además, tienes que instalar este otro plugin, sino Yoast no se entiende bien con AMP.

¿Cómo mejoro el aspecto de las páginas AMP?

Podrías instalar alguno de los plugins que hay por ahí para modificar su aspecto, pero es mejor coger el toro por los cuernos y añadirle tú mismo las funcionalidades básicas que echarás de menos en AMP.

Te  propongo añadir a AMP las siguientes características:

1. Imagen destacada en tus artículos
2. Un menú personalizado para tus páginas AMP
3. Iconos sociales para compartir tus contenidos

Añade una imagen destacada

Para conseguir añadir estos elementos lo suyo sería usar el filtro ‘the_content‘ pero si quieres que la función solo afecte a las páginas AMP hay que poner los filtros para que enganchen con la acción ‘pre_amp_render_post‘.

A la hora de añadir la imagen destacada lo primero que debes tener en cuenta es que la etiqueta estándar image no funcionará, así que hay que usar una etiqueta image especial.

Los siguientes códigos los añadiremos a nuestro plugin de personalizaciones o haremos uno específico.

El plugin AMP transformará automáticamente la imagen destacada al marcado correcto que necesitamos.

Sería algo así:

/* Imágenes destacadas en páginas AMP */
add_action( 'pre_amp_render_post', function () {
    add_filter( 'the_content', function( $content ){
        if ( has_post_thumbnail() ) {
            $image = sprintf( '<p class="jp-amp-featured-image">%s</p>', get_the_post_thumbnail() );
            $content = $image . $content;
        }
        return $content;
    }, 3 );
});

Observa que en el código se utiliza una prioridad baja en el gancho, y se pone la imagen destacada antes del contenido existente, lo que te asegura que la imagen destacada esté por encima del contenido.

En las siguientes personalizaciones (menús y enlaces sociales) haremos justo lo contrario.

Añade un menú

La verdad es que la idea de páginas minimalistas y super rápidas para la visualización móvil es fantástica, pero si no tienes barra lateral o un simple menú es difícil que tus visitantes lleguen a ver algo más de los contenidos de tu web.

Así que una idea para mantenerles ahí sería añadir un menú, en este ejemplo en el fondo de cada página AMP, para que tenga por donde seguir disfrutando de tus contenidos.

El siguiente código hace exactamente esto. Lo más relevante que destacar del mismo es que usa la función ‘amp_get_permalink()’ en vez de ‘get_permalink()’.

Esto se hace así para darle un enlace AMP si es posible, o sea, un enlace a  un tipo de contenido compatible con AMP, para que la experiencia de navegación siga siendo rápida y minimalista.

El código para el menú sería así:

/* Añadir menú al fondo de páginas AMP */
add_action( 'pre_amp_render_post', function () {
    add_filter( 'the_content', function( $content ){
        $menu_name = 'amp';
        $menu = wp_get_nav_menu_object( $menu_name );
        if ( ! empty( $menu ) ) {
            $menu_items = wp_get_nav_menu_items( $menu->term_id );
            $menu_list = sprintf( '<br /><ul id="%s" class="jp-amp-list">Menú: ', esc_attr( 'amp-jp-menu-' . $menu_name ) );
            foreach ( $menu_items as $key => $menu_item ) {
                $menu_list .= sprintf( '<li><a href="%s">%s</a></li>', amp_get_permalink( $menu_item->object_id ), esc_html( $menu_item->title ) );
            }
            $menu_list .= '</ul>';
            $content .= $menu_list;
        }
        return $content;
    }, 1000 );
});

No se te olvide crear un menú llamado ‘amp’ (sin las comillas) antes de añadir este código, pues será de ahí de donde muestre los enlaces.

Añade enlaces para compartir en redes sociales

Si de verdad quieres que tus páginas AMP sean super rápidas es evitar la carga de cualquier JavaScript. Y el problema con los plugins de iconos sociales es que en su mayoría utilizan algún SDK de JavaScript, y muchos de ellos ni siquiera funcionarán en AMP.

Pero, afortunadamente, puedes compartir contenidos en Facebook o Twitter con una simple URL.

El siguiente código lo puedes usar para añadir enlaces desde los que compartir tus contenidos AMP en las principales redes sociales, Twitter y Facebook, solo con HTML y  ‘add_query_arg()’ para añadir los argumentos de petición necesarios:

/* Añadir enlaces para compartir en Twitter y Facebook en AMP */
add_action( 'pre_amp_render_post', function () {
    add_filter( 'the_content', function( $content ){
        $post = get_post();
        if( is_object( $post ) ){
            $twitter = add_query_arg( array(
                'url' => urlencode( get_permalink( $post->ID ) ),
                'status' => urlencode( $post->post_title )
            ),'https://twitter.com/share' );
            $facebook = add_query_arg( array(
                    'u' => urlencode( get_permalink( $post->ID ) )
                ), 'https://www.facebook.com/sharer/sharer.php'
            );
        }
        $share = sprintf( '<hr /><ul id="amp-jp-share" class="jp-amp-list">Compartir: <li id="twitter-share"><a href="%s" title="Compartir en Twitter">Twitter</a></li><li id="facebook-share"><a href="%s" title="Compartir en Facebook">Facebook</a></ul>', esc_url_raw( $twitter ), esc_url_raw( $facebook ) );
        $content  .= $share;
        return $content;
    }, 1000 );
});

Lo mejor de estos enlaces es que se abrirán en las aplicaciones móviles de Facebook y Twitter de tu dispositivo, no en el navegador móvil.

¿Se puede hacer más?

Por supuesto, puedes personalizar casi lo que quieras en tus páginas AMP pero el límite debe estar en respetar la filosofía de que sean minimalistas y rápidas, sino no habrás conseguido nada.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)