Google AMP - Link

The Link tag in amp is used to tell the Google search engine about the amp and non-amp pages available. In this chapter, let us discuss in detail the aspects involved with Link tag and how google decides about the amp-page and non amp-page.

AMP Page Discovery

Consider you have a site called www.mypage.com. The news article links to the page − www.mypage.com/news/myfirstnews.html.

When a user searches in the Google search engine and happens to get the non amp-page, in order to also get reference to the amp page, we need to specify the amp url using the link tag as shown below −

Example

Page-url for Non amp-page

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

Here rel= ”amphtml” is specified for a non amp page to point to the amp version, so that Google shows the right one based on platform

Page-url for amp-page

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

Here rel=”canonical” is specified in amp page to point to the standard version of html, so that Google shows the right one based on platform.

Incase your site has only one page, which is an amp page, you should still not forget to add the rel=”canonical” which will point to itself −

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

The following diagram shows a reference to rel=”amphtml” pointing to amp page and rel=”canonical” pointing to standard html page.

AMP Html

Fonts Using Link

Fonts can be loaded externally using link as shown below −

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

Note that only whitelisted origins are allowed. The list of whitelisted origin where we can get the fonts is as shown here −

  • 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 (replace kitId accordingly)

A working example using rel=”canonical” and rel=”stylesheet” is shown below −

Example

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

Output

The output of the code shown above is as shown below −

Fonts Using Link
Advertisements