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í:

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í:

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:

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 este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (9 votos, promedio: 4,44 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar