Blog Oficial

¡Mantente actualizado con nuestros contenidos de interés!

¿Cómo implementar AMP en tu sitio web?

Category: TUTORIALES Post Date: 08/27/2018
amp

AMP ¡El futuro de las Webs!

Hoy en día los sitios web optimizados para móviles están cada vez más en la mira de las prioridades de Google y esto muestra, no sólo que los usuarios pasan más tiempo en el móvil, sino también cuánto las empresas deben preocuparse por ofrecer una mejor experiencia en todos los dispositivos.

Cuando utilizamos el celular para acceder a sitios, a menudo estamos en conexiones 3G limitadas o incluso en Wi-Fi público de baja velocidad. Por lo tanto, es necesario optimizar la navegación móvil para todos los usuarios y estandarizar una versión móvil de su sitio con AMP, es una gran solución.

Como una iniciativa del propio Google, el AMP es un proyecto de código abierto junto con otras empresas del ramo de la tecnología como LinkedIn, Pinterest y Twitter que pretenden crear una web mejor para todos.

Pero para implementar esta solución, recuerde algunos ajustes que se deben hacer en el sitio. Conozca algunos consejos.

¿Qué es AMP?

AMP (Accelerated Mobile Pages), es una biblioteca de código abierto que proporciona una forma sencilla de crear páginas web que sean atractivas, sin problemas y de carga casi instantánea para los usuarios. Tiene como objetivo mejorar la estructura de contenido para dispositivos móviles. Optimiza las páginas del sitio para los dispositivos móviles sin necesidad de crear una nueva página.

Como el AMP prioriza la velocidad de carga de la página, tiene una arquitectura diferenciada, se compone de tres elementos principales:

  1. AMP en HTML: AMP HTML es HTML con algunas restricciones para lograr un rendimiento confiable, y con algunas extensiones para compilar contenido enriquecido más allá del formato HTML básico.
  2. AMP JS: La biblioteca JS implementa todas las prácticas recomendadas de rendimiento de AMP, administra la carga de recursos y proporciona las etiquetas personalizadas que se mencionan arriba para garantizar la representación rápida de tu página. Una de las optimizaciones más importantes es que transforma en asincrónico todo lo que proviene de recursos externos, de modo que ningún elemento de la página pueda bloquear la representación.
  3. Caché de AMP: es una red de distribución de contenido basada en proxy para la entrega de todos los documentos de AMP válidos. Captura las páginas AMP HTML, las almacena en caché y mejora el rendimiento de estas automáticamente. Al usarlo, el documento, todos los archivos de JS y todas las imágenes se cargan desde el mismo origen que usa HTTP 2.0 para lograr la máxima eficiencia.

¿Debo utilizarlo en todas las páginas del sitio?

La respuesta es no.

Como el AMP es una versión ligera de su página, sin muchos elementos visuales, usted no debe configurarlo en páginas que dependen del atractivo visual para atraer al visitante. Por ejemplo: su página principal, una página de cartera o una página de ventas no deben, en ningún caso, utilizar AMP. Esto porque el propósito original de la página se perdería, ya que todos los elementos de diseño web que hacen un sitio de venta se quitarían.

Los sitios que deben instalar AMP son aquellos que tienen información en la página como en un blog, es decir, sitios que producen contenido. Por lo tanto, se configurará sólo en esas páginas de contenido, no en todo el sitio.

Consejos para configurar el AMP

Ahora que ya ha recordado la estructura y puntos importantes, consulte algunos consejos para implementarlo en su sitio web.

Doctype: de forma predeterminada, debe iniciar su archivo con lo habitual: <!doctype html>

No olvide utilizar el <meta charset=“utf-8”> para que los caracteres de su página no queden desconfigurados.

Debe agregar la etiqueta AMP en su página HTML. Puede utilizar <html amp> ou <html ↯>

El uso de las etiquetas <head> y <body> continúan siendo los mismos.

Insertar la etiqueta canonical

Es importante recordar que al configurar una página AMP, se convierte en una segunda versión de la página con el mismo contenido. Se identifica con “/amp” al final del enlace para no generar contenido duplicado. Para evitar esto, es necesario incluir una etiqueta canonical en la versión de la página móvil, indicando a Google cuál es la versión original del contenido.

Por lo tanto, debe insertar la etiqueta canonical en su página móvil, remitiendo a la página original. Siempre mantenga el patrón de sus urls.

Ejemplo: <link rel=”canonical”href=”https://blog.hostingod.com/version-original.html”/>

Debe referirse a: <link rel=”canonical” https://blog.hostingod.com/AMP-Pagina.html”/>

Para que la etiqueta canonical funcione perfectamente, usted debe hacer algunos ajustes adicionales:

<meta name=”viewport” content=”width=device-width,minimum-scale=1″>

Esta línea se debe insertar en el encabezado para cargar el contenido a través del CDN.

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

La etiqueta <head> también se implementará:

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

Transferencia de datos estructurados

También puede identificar sus páginas con márgenes. De esta forma, puede ver páginas de noticias o recetas en dispositivos móviles en los motores de búsqueda, por ejemplo. Y para quien posee sitios de noticias puede también utilizar una marcación llamada “carrusel” en Google.

En un artículo que utiliza AMP, puede implementar:

{
“@contexto”: “http://schema.org”,
“@type”: “NewsArticle”,
“manchete”: “Título”,
“datePublished”: “2017-11-11T11:11:00Z”,
“imagem”:”logo.jpg”
}

Inserción de logotipos

Recuerde que sólo los formatos de archivo de imagen .jpg, .png .gif se deben utilizar. Los logotipos animados no son compatibles y el tamaño de las imágenes debe ser exactamente 60 × 600 píxeles. Busque priorizar el fondo blanco o transparente, ya que facilita la identificación en Google.

Para que sus imágenes aparezcan sin problemas, utilice el código: <img src> <amp-img src>

Ejemplo: <amp-img src=”caneca.jpg” alt=”Description” height=”400″ width=”800″></amp-img></em>

La importancia del rel-attribute en su página:

El rel-attribute sirve para hacer sus páginas más amigables para Google, por lo que ya se definió cuáles son los requisitos para las páginas AMP. Es importante que el contenido sea idéntico a la página en la que hace referencia.

Inserte antes de la etiqueta <head>:

<link rel=”amphtml” href=”https://blog.hostingod.com/AMP-Version.html” />

El proceso de construcción de sitios tiene varias etapas importantes y el cuidado de la navegación móvil debe ser una de ellas.

¿Usted ya implementó el AMP en algún sitio? Cuente en los comentarios cómo fue su experiencia.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *