#BlackLivesMatter
AMP

Atractivo, intuitivo e instantáneo

AMP le permitirá crear fácilmente sitios web enfocados en el usuario

Comenzar
Captura de pantalla de un sitio web.
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

¿Qué es
AMP?

Páginas web atractivas, intuitivas y que se cargan casi instantáneamente

AMP incluye un formato sólido y sencillo, diseñado para garantizar que su sitio web sea rápido, enfocado en el usuario y le ayude a ganar dinero. AMP asegura el éxito a largo plazo de su estrategia web mediante una distribución óptima en plataformas populares y la reducción de costos operativos y de desarrollo.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Construya excelentes experiencias para los usuarios de la web pública

AMP permite la creación de sitios web y anuncios sistemáticamente rápidos, atractivos y de alto rendimiento en todos los dispositivos y plataformas de distribución. Los editores y anunciantes pueden decidir cómo presentar su contenido para crear una experiencia enfocada en el usuario.

Mantiene la flexibilidad, el control y reduce la complejidad de su código Puede utilizar CSS para personalizar su estilo y sus datos dinámicos, y obtener así los datos más recientes cuando sea necesario.
Crea bloques para garantizar el rendimiento Se requiere mucho tiempo y esfuerzo para desarrollar un gran sitio web. Los componentes de AMP ya están optimizados para garantizar el mejor rendimiento.
Crea un futuro sustentable en la web, disponible para todo el mundo El Proyecto AMP es una iniciativa de código abierto cuyo fin es proteger el futuro y brindar al usuario experiencias mejores, más rápidas y más cómodas.
La velocidad de la página web mejora la experiencia del usuario y las principales métricas empresariales Las páginas AMP se cargan casi instantáneamente en todos los dispositivos y plataformas.
Crear páginas AMP es muy sencillo A menudo podrá convertir todo el archivo en tan solo unos días, especialmente si utiliza CMS populares como WordPress o Drupal.
AMP puede aplicarse en varios puntos de contacto de la web Utilizado por plataformas mundiales como Google, Bing y Twitter, AMP permite que los usuarios vivan una experiencia similar a la que proporcionan las aplicaciones originales en todas las plataformas, seleccionando de forma predeterminada las páginas AMP cuando están disponibles.

Estamos comprometidos a mejorar la velocidad en todos los sentidos. Si nuestro sitio tarda mucho tiempo en cargar, no importa qué tan relevante sea nuestra información, algunas personas saldrán de la página antes de terminar de verla.

David Merrell, Director Ejecutivo de Productos

Lea una historia de éxito

Cómo está formado AMP HTML

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.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:visible}}@keyframes -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>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Componentes integrados

AMP HTML es similar a HTML pero cuenta con algunas restricciones para lograr un rendimiento confiable.

Aunque la mayoría de las etiquetas de una página AMP HTML son etiquetas normales de HTML, algunas etiquetas HTML se sustituyen por etiquetas específicas de AMP (consulte también la sección de etiquetas HTML en la especificación de AMP). Estos elementos personalizados, llamados componentes AMP HTML, hacen que los patrones comunes sean fáciles de implementar para obtener un mayor rendimiento.

Por ejemplo, la etiqueta amp-img proporciona compatibilidad total con srcset, incluso en navegadores que aún no son compatibles. Aprenda a crear su primera página en AMP HTML.

Los motores de búsqueda descubren las páginas AMP y otras plataformas mediante la etiqueta HTML. Puede utilizar una versión que no sea AMP y una versión AMP de su página, o solo una versión AMP.

Cachés de AMP

Las páginas AMP pueden almacenarse en el caché para cargarlas casi instantáneamente en la web. En plataformas como Google se ejecutan cachés AMP para permitir que su contenido se cargue rápidamente desde su servicio.

El Caché AMP de Google es una red de entrega de contenido basada en proxy que está diseñada para proporcionar todos los documentos AMP válidos. Recupera las páginas AMP HTML, las almacena en el caché y mejora automáticamente el rendimiento de la página. Cuando se utiliza el Caché AMP de Google, el documento, todos los archivos JS y todas las imágenes se cargan desde el mismo origen mediante HTTP 2.0 para lograr una máxima eficiencia.
El caché también cuenta con un sistema de validación integrado, el cual confirma que la página está garantizada para funcionar y no depende de recursos externos. El sistema de validación ejecuta una serie de afirmaciones que confirman que el marcado de la página cumple con la especificación AMP HTML.

Cada página AMP cuenta con otra versión del validador. Esta versión puede registrar los errores de validación directamente en la consola del navegador cuando se renderiza la página, lo cual le permite ver cómo los cambios complejos en su código pueden afectar el rendimiento y la experiencia del usuario.

Explore los diferentes casos de uso en los sitios web de AMP