09 de enero de 2017 Marc Coiduras

Cómo configurar nuestro WordPress con AMP


  • Buenas amigos, en este artículo vamos a aprender algo sobre las páginas AMP y cómo configurar nuestro WordPress con AMP.

    Como bien sabemos todos, los dispositivos móviles se utilizan cada vez más para navegar por sitios web.

    AMP compila las páginas web para representar de forma rápida contenido estático.

    ¿WordPress con AMP?

    AMP en acción consta de tres partes diferentes:

    • Primero: AMP HTML HTML con restricciones logrando un alto rendimiento.
    • Segundo: AMP JS Con esta biblioteca, nos garantizamos representar rápidamente nuestras páginas AMP HTML.
    • Tercero: Google AMP Cache (opcional) Nos proporciona las páginas AMP HTML con cache.

    AMP HTML

    Básicamente es contenido HTML con propiedades AMP personalizadas.

    Ejemplo de AMP HTML sencillo:

    <!doctype html>
    <html ⚡>
     <head>
       <meta charset="utf-8">
       <link rel="canonical" href="hola-mundo.html">
       <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
       <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:[email protected] -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
       <script async src="https://cdn.ampproject.org/v0.js"></script>
     </head>
     <body>Hola Mundo!</body>
    </html>

    Como podrás observar, la mayoría de etiquetas AMP HTML son como las etiquetas HTML comunes.

    Otras se reemplazan por etiquetas específicas de AMP personalizadas.

    Estos elementos personalizados, llamados componentes AMP HTML, crean patrones para implementarse en forma sencilla.

    Por ejemplo, la etiqueta amp-img proporciona soporte completo de srcset, incluso en navegadores que todavía no lo admiten.

    AMP JS

    La biblioteca AMP JS implementa las prácticas de rendimiento AMP, carga de recursos administrada.

    Y para garantizar la carga rápida de tu página, te proporciona las etiquetas personalizadas que se mencionan en AMP HTML.

    Una de las más importantes optimizaciones, es que transforma en asincrónico todo lo que proviene de recursos externos.

    De modo que ningún elemento de la página pueda bloquear la representación.

    Google AMP Caché

    Google AMP Caché es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos.

    Lo que hace es capturar todas las páginas AMP HTML y almacenarlas en caché para mejorar su rendimiento automáticamente.

    Usando Google AMP Caché, los archivos JS e imágenes se cargan desde el mismo origen que usa HTTP 2.0.

    Así se logra la máxima eficiencia, cada página AMP viene con otra versión del validador integrada.

    Plugin WordPress AMP Supremacy

    Para que nuestro WordPress funcione con AMP, tan solo tendremos que descargarnos el plugin AMP Supremacy.

    AMP Supremacy es un plugin de instalación de un solo clic, y tendrás tu wordpress con AMP.

    AMP Supremacy

    ¿Qué significa AMP y por qué debo usarlo?

    • AMP es páginas móviles aceleradas.
    • AMP convertirá tus publicaciones y páginas actuales en un estilo de texto e imagen sólo en el que los tiempos de carga de páginas disminuyan drásticamente.
    • Google muestra páginas relacionadas con AMP en un carrusel de AMP en la parte superior de sus páginas, aumentando el tráfico de sitios.

    ¿Cómo podré ver la versión AMP de mi página?

    • Después de instalar y configurar el plugin, pulse Guardar.
    • A continuación, sólo tiene que añadir /amp/ al final de cualquier URL de página en su sitio.
    • Y verá una bonita versión de AMPd de su página.

    Tengo cloudflare trabajando detrás de mis páginas, ¿está bien con AMP?

    • No, AMP no soporta cloudflare.
    • Así que necesitarás detener Rocket Loader en tu nube para inyectar scripts en páginas AMP.
    • De modo que cloudflare está restringido para páginas AMP sólo con URL que termina en /amp/.

    Espero que este artículo te haya servido de ayuda para configurar tu WordPress con AMP, eres libre de comentar.



  • Marc Coiduras

    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona Web
    Google+
    Reddit
    Si te ha gustado el artículo puedes compartirlo usando los siguientes botones:
    Zona movil
    Tagged: , , , ,
    Artículos relacionados
    Buenos días compañeros, todo bien? En la review de hoy vengo a hablaros de SEO
    Hola amigos, ¿Qué tal vais? Hoy os traigo una review sencilla para WordPress, de como
    Buenas tardes amigos, si estás pensando en rediseñar tu sitio web, recuerda que no debes
    Se que la idea de crear un sitio web puede ser aterradora, especialmente cuando no

    About the Author

    Marc Coiduras Hola, mi nombre es Marc Coiduras y soy diseñador web, localizado en Valencia, España.

    Deja un comentario

    CONTACTA CONMIGO PARA CUALQUIER COSA

    Te doy la bienvenida a ponerte en contacto conmigo para obtener más información
    sobre cualquiera de mis productos o servicios.