Google AMP: enlace

La etiqueta Link en amp se utiliza para informar al motor de búsqueda de Google sobre las páginas de amp y no amp disponibles. En este capítulo, analicemos en detalle los aspectos relacionados con la etiqueta de enlace y cómo decide Google sobre la amp-page y la no amp-page.

Descubrimiento de páginas de AMP

Considere que tiene un sitio llamado www.mypage.com. El artículo de noticias enlaza con la página: www.mypage.com/news/myfirstnews.html.

Cuando un usuario busca en el motor de búsqueda de Google y obtiene la página que no es de amp, para obtener también una referencia a la página de amp, debemos especificar la url de amp usando la etiqueta de enlace como se muestra a continuación:

Ejemplo

Page-url for Non amp-page

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

Aquí se especifica rel = "amphtml" para que una página que no sea amp apunte a la versión amp, de modo que Google muestre la correcta según la plataforma

Page-url for amp-page

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

Aquí se especifica rel = ”canonical” en la página amp para apuntar a la versión estándar de html, de modo que Google muestre la correcta según la plataforma.

En caso de que su sitio solo tenga una página, que es una página de amplificación, no debe olvidar agregar el rel = "canonical" que apuntará a sí mismo:

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

El siguiente diagrama muestra una referencia a rel = ”amphtml” apuntando a la página amp y rel = ”canonical” apuntando a la página html estándar.

Fuentes mediante enlace

Las fuentes se pueden cargar externamente usando el enlace como se muestra a continuación:

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

Tenga en cuenta que solo se permiten los orígenes incluidos en la lista blanca. La lista de origen de la lista blanca donde podemos obtener las fuentes es la que se muestra aquí:

Fonts.com - https://fast.fonts.net
Fuentes de Google: https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (reemplace kitId en consecuencia)

A continuación, se muestra un ejemplo práctico con rel = ”canonical” y rel = ”stylesheet” :

Ejemplo

<!doctype html>
<html amp>
   <head>
      <meta charset ="utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "amppage.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>

      <link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "images/christmas1.jpg" 
            width = "300" height = "250" 
            layout = "responsive">
         </amp-img>
      </p>

      <p style = "font-family: 'Roboto'; font-size:25px;">
         Welcome to Amp Page
      </p>
   </body>
</html>

Salida

La salida del código que se muestra arriba es como se muestra a continuación:

↰ Previous page Next page ↱