Google AMP - Link

A tag Link no amp é usada para informar ao mecanismo de pesquisa do Google sobre as páginas amp e não amp disponíveis. Neste capítulo, vamos discutir em detalhes os aspectos envolvidos com a tag Link e como o Google decide sobre amp-page e não amp-page.

Descoberta de página AMP

Considere que você tem um site chamado www.mypage.com. O artigo de notícias está vinculado à página - www.mypage.com/news/myfirstnews.html.

Quando um usuário pesquisa no mecanismo de pesquisa do Google e obtém a página não amp, para também obter referência à página amp, precisamos especificar o url do amp usando a tag do link, conforme mostrado abaixo -

Exemplo

Page-url for Non amp-page

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

Aqui rel = ”amphtml” é especificado para uma página sem amplificador para apontar para a versão do amplificador, para que o Google mostre o correto com base na plataforma

Page-url for amp-page

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

Aqui, rel = ”canonical” é especificado na página do amp para apontar para a versão padrão do html, para que o Google mostre a correta com base na plataforma.

Caso seu site tenha apenas uma página, que é uma página amp, você não deve se esquecer de adicionar o rel = ”canonical” que aponta para si mesmo -

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

O diagrama a seguir mostra uma referência a rel = ”amphtml” apontando para a página amp e rel = ”canonical” apontando para a página html padrão.

Fontes usando link

As fontes podem ser carregadas externamente usando o link mostrado abaixo -

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

Observe que apenas origens na lista de permissões são permitidas. A lista de origem na lista de permissões onde podemos obter as fontes é mostrada aqui -

Fonts.com - https://fast.fonts.net
Fontes do Google - https://fonts.googleapis.com
Fonte impressionante - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (substitua kitId de acordo)

Um exemplo prático usando rel = ”canonical” e rel = ”stylesheet” é mostrado abaixo -

Exemplo

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

Resultado

A saída do código mostrado acima é mostrada abaixo -

↰ Previous page Next page ↱