¿Qué es AMP? / ¿Qué son las Páginas Móviles Aceleradas?AMP es una forma de crear páginas móviles para contenido estático que se renderiza rápidamente. La biblioteca AMP JS garantiza la representación rápida de las páginas web de AMP. Google presentó AMP con la visión de que los editores pueden crear contenido optimizado para dispositivos móviles una vez y hacer que se cargue instantáneamente en todas partes.
¿Qué es Google AMP Cache?
Google AMP Cache es simplemente una red de entrega de contenido basada en proxy que entrega todos los documentos AMP válidos. Obtiene las páginas HTML de AMP, las almacena en caché y mejora el rendimiento de la página automáticamente. Google AMP Cache carga el documento, todas las imágenes y archivos JS desde el mismo origen que utiliza HTTP 2.0 para proporcionar la máxima eficiencia.
¿Por qué no AMP Blogger?
Aunque Accelerated Mobile Pages es un proyecto respaldado por Google y Blogspot es la plataforma de blogs de Google, "Blogger actualmente no admite AMP HTML". Así que eso es para que Google responda. Pero no podemos dejar que sea así, ¿podemos? Así que sigue estos pasos y crea tu nuevo blog de AMP.
¿Cómo implementar AMP Blogger Blog?
Paso 1: Reemplace el código <html> con el siguiente código:
<html amp='amp'>
Paso 2: Compruebe si hay metaetiquetas para el conjunto de caracteres y la ventana gráfica. Si no está presente, copie y pegue el siguiente código después de <head>.
<meta charset = "utf-8"> <meta name = "viewport" content = "width = device-width, minimal-scale = 1, initial-scale = 1">
Paso 3: Haz que tu blog sea visible usando la etiqueta canónica. Busque las etiquetas de enlace canónicas. Si no está presente, agregue el enlace canónico como <link rel = "canonical" href = "http://example.blogspot.in/article-metadata.html" /> que simplemente apuntará a sí mismo. Copie y pegue el siguiente código después de la etiqueta de la ventana gráfica.
<link expr: href = 'data: blog.url' rel = 'canonical' />
Paso 4: Reemplace el código </head> con el siguiente código:
<style amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>
Paso 5: Cambie el código <head> por el siguiente:
<head>
Y el </head> por:
</head><!--<head/>-->
Paso 6: Ahora lo siguiente será copiar en un bloc de notas los estilos que están entre <b:skin><![CDATA[ y ]]></b:skin>, una vez resguardado los estilos eliminamos todo el código y lo reemplamos por esto:
<!-- <b:skin><![CDATA[ ]]></b:skin>
<style amp-custom='amp-custom'> ... </style>
NOTA: Si en tu plantilla tienes etiquetas de estilos como <style> o <style type='text/css'> cámbiala por <style amp-custom='amp-custom'>:
Paso 8: Cambie el código </body> por el siguiente:
<!--</body>--></body>
Paso 5: Cambie las etiquetas img en etiquetas amp-img como en el siguiente ejemplo:
<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>
¿Cómo comprobar la validez de las páginas AMP?
Método 1:
Abra su página AMP en el navegador Chrome, por ejemplo, https://example.blogspot.in/p/amp-page.html .
Agregue "# development = 1" a la URL, por ejemplo, https://example.blogspot.in/p/amp-page.html#development=1 .
Haga clic derecho y abra la consola de Chrome DevTools y verifique si hay errores de validación.
Método 2:
Abra la interfaz web en validator.ampproject.org.
Ingrese el valor de url en el campo de URL, por ejemplo, https://example.blogspot.in/p/amp-page.html .
Cualquier cambio en la fuente html hecho en este editor interactivo resulta en una revalidación interactiva.
Añadir un comentario