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.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(9 votos, promedio: 4.3)

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

21 comentarios en “Cómo mejorar tus páginas AMP en WordPress”

  1. Hola Fernando.
    Esta muy bueno este blog. Siempre lo reviso antes de hacer nada en mis WP…

    Acabo de implementar AMP, puse Adsense y este codigo que muestras aqui para que aparezcan las opciones de compartir en facebook y twitter..

    Pero claro, son enlaces ..

    Si AMP es casi como html… ¿Se podría poner imagenes que hagan de enlace, y con un poco de css hacer los clasicos botones de compartir con ese mismo codigo?

    Saludos y gracias por todo lo que me haz enseñado.. y seguramente a muchos mas !!

  2. Buenos días Fernando, como siempre usted con orientaciones muy oportunas, quería hacerle una pregunta: ¿los formularios de suscripción de Thrive Leads se visualizan con AMP? Me puede dar una url de una página con AMP para ver como queda porfa? Mil gracias

    1. Pues no lo uso así que no te lo puedo asegurar, aunque tengo leído por ahí que no. En cualquier caso, como es un plugin de pago pregunta a su soporte, que para eso pagas

  3. Muy interesante este artículo, he seguido los pasos y ya tengo añadida la versión AMP para mi web, pero tengo un problema, no me salen las imágenes en ningún post, ¿cómo podría solucionarlo eso? No sé a qué se puede deber tampoco…

      1. En el móvil no se ven, ni en el portátil tampoco, Fernando. ¿Alguien tiene una idea de lo que puede fallar? He visto que en el móvil ya aparece como que está la web en versión AMP incluso, pero queda fatal al no salir las imágenes de portada ni las demás. Debe haber algún error…

  4. Pingback: Corregir error AMP del atributo height con valor vacío - Francisco Rodríguez

  5. Antonio Keler

    buenos días Fernando. Es conveniente poner todas las paginas a AMP o simplemente crear la portada es suficiente. Muchas gracias por este excelente blog y todos tus consejos

    1. AMP no es para páginas, y mucho menos la portada… Si necesitas poner alguna en AMP, que sea importante para tu SEO, adelante, pero la portada no lo recomiendo

      1. Antonio Keler

        Buenas noches Fernando. Muchas gracias por contestar a mi pregunta. Al final encontré este artículo tuyo https://ayudawp.com/amp-seo-wordpress/ y ya entendí para que sirve el AMP. La cosa es que, un amigo, insistía que debería tener mi web wordpress, toda con la versión AMP. Ya que él también la tiene, incluso la portada. Voy aprovechar esta oportunidad y compartir tus entradas con él, que me parece necesita asesoramiento de un profesional como tú. Un saludos

  6. Gracias Fernando… Me dispongo a instalar el plugin AMP y tengo Yoast… ¿Sigue siendo necesario instalar también el otro plugin, o en alguna de las últimas actualizaciones de Yoast la incompatibilidad fue solucionada? ¿Sería preferible sustituir Yoast por otro plugin SEO? En tal caso, ¿perdería todo el trabajo realizado con Yoast?

    Gracias Compañero… Abrazo…

      1. Gracias Fernando… Una última cuestión: dices en el artículo: «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».

        A día de hoy… ¿recomiendas algún plugin que añade funcionalidades, o recomiendas crear nuestro propio plugin?

        Gracias… Feliz semana… Abrazo…

          1. Gracias Fernando… me ha gustado el artículo… parece realmente fácil de configurar…

            Me disponía a instalar el plugin AMP que recomiendas en este artículo, y me he encontrado con este otro: https://es.wordpress.org/plugins/accelerated-mobile-pages/ actualizado hace algunas horas… con menos instalaciones que el de Automatic (supongo que es más nuevo)

            En el vídeo en el que explican su uso, se puede ver cómo puedes construir el artículo para AMP a tu gusto…

            ¿Lo has probado? Gracias… Feliz día…

  7. Buen Articulo Fernando.

    JoseZabeleta, yo estoy usando ese plugins hace unos meses y si funciona de maravilla y tiene una opción de personalización para el CSS y datos estructurados que ayuda mucho en mejorar el CTR.

    Saludos!

    1. Gracias Javier… Si no entendí mal, el plugin te ofrece un editor mediante el que construir la versión paralela AMP… lo cual solo añade algo de trabajo extra en la creación de los post… pero tendría que construir la versión paralela de todos los post ya creados… Mientras que el plugin de Automatic una vez configurado crea la versión AMP de todos los post del Sitio, sin tener que construirlas una a una… ¿Es correcto?

      Abrazo…

Deja un comentario

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

 

Ir arriba Ir al contenido