Google AMP: sintaxis básica
En este capítulo, analizaremos los requisitos básicos para comenzar con las páginas de Google AMP.
Página de muestra de amplificador
A continuación, se muestra un ejemplo básico de una página de amplificador:
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width = device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<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>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img
src = "images/christmas1.jpg"
width = "300"
height = "300"
layout = "responsive">
</amp-img>
</p>
</body>
</html>Etiquetas obligatorias
Hay algunas etiquetas obligatorias que deben incluirse en una página de amplificador. Esta sección los analiza en detalle:
Tenemos que asegurarnos de agregar amp o ⚡ a la etiqueta html como se muestra a continuación
<html amp>
OR
<html ⚡>Deberíamos agregar las etiquetas <head> y <body> a la página html.
La validación de amplificador puede fallar si omite alguna de las metaetiquetas obligatorias. Aquí se muestran algunas etiquetas mets obligatorias que se agregarán en la sección de encabezado de la página:
<meta charset="utf-8">
<meta name = "viewport"
content = "width = device-width,
minimum-scale = 1,
initial-scale = 1">El enlace de rel = "canonical" se agregará dentro de la etiqueta principal
<link rel = "canonical" href = "./regular-html-version.html">Etiqueta de estilo con amp-boilerplate -
<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>Etiqueta Noscript con amp-boilerplate -
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none}
</style>
</noscript>La etiqueta de script amp con async agregado como se muestra a continuación. Esta es la etiqueta más importante de todas:
<script async src = "https://cdn.ampproject.org/v0.js">
</script>Debe usar esta etiqueta en caso de que desee agregar CSS personalizado a la página. Por favor tome nota aquí que no podemos llamar hojas de estilo externas en páginas de amplificador. Para agregar CSS personalizado, todo su CSS debe ir aquí:
<style amp-custom>
//all your styles here
</style>Puede validar la página anterior en su navegador usando # development = 1 al final de la URL de la página.
Ahora, probemos lo mismo en el navegador. He alojado la página localmente y la guardé como amppage.html.
La URL de arriba para ser probada es
http://localhost/googleamp/amppage.html#development=1
Ejemplo
<!doctype html>
<html amp>
<head>
<meta charset = "utf-8">
<title>Amp Sample Page</title>
<link rel = "canonical" href = "./regular-html-version.html">
<meta name = "viewport" content = "width=device-width,
minimum-scale = 1,initial-scale = 1">
<style amp-custom>
h1 {color: red}
</style>
<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>
</head>
<body>
<h1>Amp Sample Page</h1>
<p>
<amp-img
src = "images/christmas1.jpg"
width = "300"
height = "250"
layout = "responsive">
</amp-img>
</p>
</body>
</html>Salida
Puede ver el estado de validación del amplificador en la consola del desarrollador de la siguiente manera:
Nos da una validación de AMP exitosa, ya que hemos agregado todas las etiquetas obligatorias necesarias para una página de amplificador válida.