Momento importante para darle una gran experiencia de usuario a tu grupo objetivo. En esta ocasión veremos cómo implementar AMP desde el jugoso código HTML.

Sencillo de implementar

Definitivamente, cuando hablamos de código HTML nos referimos a un lenguaje de etiquetas (no es un lenguaje de programación, ¿vale?) y que de inmediato lo hace un juego de niños como digo yo.

Si eres una persona más visual y prefieres ver cómo hago todo paso a paso, te comparto el vídeo de Youtube, donde hago un rápido tutorial de esta implementación.

 

Pero si te gusta leer, prosigamos.

Etiquetas AMP

Para que nuestro sitio empiece a funcionar con la aceleración páginas móviles, basta con agregar las siguientes etiquetas

<html amp> </html>

¡Listo! Eso ha sido todo por hoy. Naah ¡es broma!

Código en acción para AMP

Ahora te comparto el código fuente para este ejemplo de una manera práctica y sencilla donde comente el código, de las líneas que nos interesa integrar para habilitar AMP.

 

<!doctype html> 

<!–Etiqueta HTML AMP para optimizar el sitio en moviles–>

<html amp> 

<head> 

  <meta charset=”utf-8″>

  <title>Pagina de prueba</title>

  <!–Hace referencia al HTML estandar/base–>

  <link rel=”canonical” href=”./regular-html-version.html”>

  <!–meta viewport es para tener nuestro sitio web responsive–>

  <meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui”>

  <style amp-custom>

    h1 {color: red}

  </style>

  <script type=”application/ld+json”>

  {

    “@context”: “http://schema.org”,

    “@type”: “NewsArticle”,

    “headline”: “Article headline”,

    “image”: [

      “thumbnail1.jpg”

    ],

    “datePublished”: “2015-02-05T08:00:00+08:00”

  }

  </script>

  <script async custom-element=”amp-carousel” src=”https://cdn.ampproject.org/v0/amp-carousel-0.1.js”></script>

  <style>body {opacity: 0}</style><noscript><style>body {opacity: 1}</style></noscript>

  <!–Habilita las opciones fundamentales de javascript de forma asincronica. Pero no la mayoria–>

  <script async src=”https://cdn.ampproject.org/v0.js”></script>

</head> 

<body> 

<center>

<h1>Hola Mundo!</h1> 

<p> 

  Aprendiendo algunas etiquetas HTML-AMP y su funcionamiento.

 

</p> 

<amp-img src=amplogo.jpg width=300 height=170></amp-img>

<amp-ad width=300 height=250 

    type=”a9″

    data-aax_size=”300x250″

    data-aax_pubname=”test123″

    data-aax_src=”302″>

</amp-ad> 

</center>

</body> 

</html>

 

Si necesitas el material de apoyo, perfecto, descarga el código fuente de este ejemplo en el siguiente botón.

Descargar Código

 

Si te ha servido este tutorial, compártelo con tus colegas y visítanos en nuestras redes sociales.

Por tu código… LazarusGT.