AMP: Consejos SEO para su implementación

AMP consejos SEO

AMP (Accelerated Mobile Pages) es una tecnología que permite mostrar una versión más ligera y rápida de una página en dispositivos móviles. Las páginas AMP pueden llegar a ser considerablemente más rápidas que las páginas web en su versión de escritorio o responsive. Esto se debe a que:

  • Restringe el uso de los elementos que más “pesan”: imágenes, formularios, iframes y elementos similares
  • Utiliza un etiquetado propio para algunos elementos. Por ejemplo <amp-img> en lugar<img>
  • Restringe el uso de CSS y JavaScript para aligerar la respuesta y la carga

Aparte de mejorar la velocidad de carga, (la cual es un factor fundamental en relación a la navegabilidad y accesibilidad), se trata de un criterio que Google tiene en cuenta como factor de ranking desde hace meses y de hecho, los sites que cuentan con AMP pueden aparecer en las página de resultados mediante un snippet.

 

Este nuevo formato de HTML que presenta Google se utiliza en periódicos digitales, blogs y sites que producen un contenido amplio y fresco. Por esta razón, si aún no has implementado AMP en tu blog, no pierdas de vista esta posibilidad.

A Google le gusta AMP <3

Especificaciones SEO para la implementación de AMP

En cuanto a los criterios SEO, es necesaria la implementación de una serie de directivas con el fin de evitar el contenido duplicado y el uso de la herramienta Google Analytics:

  • Contenido duplicado: puesto que cada página de AMP contará con una URL propia /amp/ , es importante tener en cuenta el uso de la directiva canonical, que en las URL de AMP debe apuntar hacia la URL del post “original” (versión escritorio, sin /amp/) con el fin de evitar que Google considere que se trata de contenido duplicado.
  • Las URL “originales” deben incluir un enlace hacia su correspondiente versión AMP mediante el siguiente código en el <head> de la página original:
    <link rel="amphtml" href="https://url-pagina-amp" >
  • Analítica: Para el seguimiento de sesiones, clics, y uso de las funciones de Google Analytics, es necesaria la implementación del correspondiente script:
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

    así como del elemento <amp-analytics> que contenga el código UA de la propiedad de Analytics. Este generador de código de Analytics para AMP es de gran ayuda para crear este elemento <amp-analytics>

  • Validación de páginas AMP: Para que estas nuevas páginas puedan ser indexadas por Google, debemos validarla y comprobar que cumple correctamente con los requisitos AMP HTML o no se indexará. Para validar el código podemos utilizar la herramienta oficial del proyecto: https://validator.ampproject.org/

Documentación:

Web oficial de AMP: https://www.ampproject.org/es/learn/overview/

Agregar Analytics a AMP: https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=es

Especificaciones no tan SEO

Que si este JavaScript no me gusta, que sólo hablo con mi CSS. AMP tiene sus cosillas:

  • JavaScript: La única librería con la que AMP trabaja es la suya propia, que debe ser incluida en todas las páginas AMP dentro de la sección head:
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  • Hoja de estilos: todo el CSS debe ir en el <head> dentro de una única etiqueta <style amp-custom>
  • Etiquetado HTML: La mayoría de las etiquetas HTML se pueden utilizar como en cualquier otra página, especialmente las que están relacionadas con contenido: <p>, <strong>, <ul>, <ol>, <li>, <h1>, <h2>, <h3>, <a>… (párrafos, negritas/cursivas, encabezados, listas, enlaces, etc.) No obstante, algunas etiquetas deben ser reemplazadas por etiquetas específicas de AMP. Por ejemplo, las imágenes: La etiqueta <img> se sustituye por <amp-img> Además, los atributos width y height son obligatorios.
    <amp-img src="/amp-html.png" width="800" height="500" layout="responsive" alt="Descripción de la imagen" ></amp-img>

Documentación sobre las etiquetas HTML permitidas en AMP:

 

https://www.ampproject.org/docs/reference/spec

Toque final

Si usas WordPress, usas Yoast, y la instalación de AMP la haces desde el plugin, hay que decirle a Yoast que hable con AMP y a AMP que hable con Yoast. Que se junten. Que se quieran. Que sientan apego. Glue for Yoast & AMP es un plugin que permite integrar ambos plugins, integrando Yoast en las páginas de AMP para que no ocurra esto:

 

The following two tabs change content below.

Lola Gallent

Últimos artículos de Lola Gallent (Ver todos)

Etiquetas:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (Ninguna valoración todavía)
Cargando…
Comentarios:
  • AMP es un tema que está a la orden del día y que sin duda es más útil conforme va pasando el tiempo, puesto que cada vez se añaden más opciones. Conviene manejarlo a la perfección, así que gracias por el artículo. Un saludo.

    20 marzo, 2018 en 1:05 pm

Deja un comentario:

  Acepto la política de privacidad de datos

dos × 2 =