Google AMP - Lien

La balise Link dans amp est utilisée pour indiquer au moteur de recherche Google les pages amp et non amp disponibles. Dans ce chapitre, laissez-nous discuter en détail des aspects impliqués avec la balise Link et comment Google décide de la page amp-page et non amp-page.

Découverte de pages AMP

Considérez que vous avez un site appelé www.mypage.com. L'article de nouvelles renvoie à la page - www.mypage.com/news/myfirstnews.html.

Lorsqu'un utilisateur effectue une recherche dans le moteur de recherche Google et parvient à obtenir la page non amp, afin d'obtenir également une référence à la page amp, nous devons spécifier l'URL amp en utilisant la balise de lien comme indiqué ci-dessous -

Exemple

Page-url for Non amp-page

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

Ici, rel = "amphtml" est spécifié pour qu'une page non amp pointe vers la version amp, afin que Google affiche la bonne en fonction de la plate-forme

Page-url for amp-page

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

Ici, rel = "canonical" est spécifié dans la page amp pour pointer vers la version standard de html, afin que Google affiche la bonne en fonction de la plate-forme.

Si votre site n'a qu'une seule page, qui est une page amp, vous ne devez pas oublier d'ajouter le rel = "canonical" qui pointera vers lui-même -

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

Le diagramme suivant montre une référence à rel = "amphtml" pointant vers la page amp et rel = "canonical" pointant vers la page html standard.

Polices utilisant Link

Les polices peuvent être chargées en externe en utilisant le lien comme indiqué ci-dessous -

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

Notez que seules les origines sur liste blanche sont autorisées. La liste des origines sur liste blanche où nous pouvons obtenir les polices est comme indiqué ici -

  • Fonts.com - https://fast.fonts.net

  • Google Fonts - https://fonts.googleapis.com

  • Font Awesome - https://maxcdn.bootstrapcdn.com

  • Typekit - https://use.typekit.net/kitId.css (remplacez kitId en conséquence)

Un exemple de travail utilisant rel = "canonical" et rel = "styleheet" est présenté ci-dessous -

Exemple

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

Production

La sortie du code ci-dessus est comme indiqué ci-dessous -