Descripción

A continuación mostraré paso a paso cómo pasar una página web de HTML a AMP. Éste tutorial, mira alguna de las funciones principales de la tecnología AMP⚡️ y la implementación sencilla. Para empezar con este tutorial, es necesario recomendar: Conocer algunos aspectos básicos de HTML. Otros conceptos como URL canonical y tener la posibilidad de publicar el sitio web, por ejemplo en Github.

Tutorial paso a paso:

ANTES DE INICIAR

AMP no soporta algunos de los elementos por defecto de JavaScript. Por eso debemos verificar si está soportado. De momento, para términos prácticos, los des-habilitaremos todos.

1. Declaramos el tipo de documento o lo reemplazamos.

<!doctype html>

2. Reemplazamos por el rayo ⚡ de AMP.

<html ⚡>

EDITAMOS EL HEAD.

3. Declaramos el UTF-8

<meta charset="utf-8">

4. Nos apoyamos con el CDN de ampproject.org

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

5. Utilizamos la URL Canonical hacia la non-amp

<link rel="canonical" href="/ejemplo.html">

6. Amp recomienda iniciar initial-scale=1

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

7. Buscamos el archivo CSS y le bajamos el peso. Tenemos que tener en cuenta que este código de CSS lo pasaremos a una sola linea.

Optimizar Css

HERRAMIENTAS

-> Eliminar CSS sin uso
-> Minificar CSS

8. Agregamos los CSS (Menos de 50K)

<style amp-custom>
    h1 {
      color: red;
    }
</style>

9. AMP Boilerplaite
(Este código hace que nuestra página en AMP se muestre cuando termine de cargar o esté totalmente renderizada.)

<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>

EDITAMOS EL BODY.

10. Ahora podemos utilizar etiquetas normales como “h1” y “p”. Para algunos otros debemos cambiar un poco la forma de generarlos en HTML.

<amp-img src="/foto.jpg" width="1080" height="1080" layout="responsive"></amp-img>

OTROS ELEMENTOS

NON-AMP

<img src="/foto.jpg">

AMP-VERSION

<amp-img src="/foto.jpg" width="1080" height="1080" layout="responsive"></amp-img>

Para las fuentes de Google Fonts.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">

-> Para validar AMP en código.

El SEO vive en un constante cambio. Hace 3 años la versión de Google Search Console era muy limitada y el uso de AMP era mínimo. No habíamos vivido tiempos difíciles los cuáles detonarán en un crecimiento explosivo de las búsquedas en Google o YouTube, por ejemplo.

Hoy quiero anunciarles el relanzamiento de mi curso de SEO básico (o ya no tanto) y expresarles mi agradecimiento a los 21.786 de estudiantes los cuales creyeron en mi trabajo. La idea es continuar creando nuevos cursos con mejoras constantes y metodologías de explicar nuevas. Espero me sigan acompañando.

Curso SEO Jorge Jaramillo

Ir al Curso con descuento en Udemy

Siempre hablaba de un curso muy vendido pero jamás pensé tener la acogida lograda por éste. Me han escrito de muchas partes del mundo. México, España y Colombia son los países con mas estudiantes en mis 3 cursos. Muchas gracias, en serio.

Estudiantes Udemy

Trate de mejorar aspectos como la edición, la fotografía, el tono, los colores, las dinámicas y muchos más aspectos con el fin de enriquecer el curso. Les pido me disculpen si escuchan un sonido de algún animal, sobretodo lagartijas. No puedo controlar eso mientras esté viviendo en el campo.

Video promoción

 

Quiero Aprender SEO