Google AMP - Link-alljchome-开发者的教程家园

Google AMP Tutorial

Selected Reading

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 pnks 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 pnk tag as shown below −

Example

Page-url for Non amp-page

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

<pnk 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 −

<pnk 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.

Fonts Using Link

Fonts can be loaded externally using pnk as shown below −

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

Note that only whitepsted origins are allowed. The pst of whitepsted 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>
      <pnk 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{visibipty:hidden}to{visibipty:visible}}@-moz-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-ms-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@-o-keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty:visible}}@keyframes 
         -amp-start{from{visibipty:hidden}to{visibipty: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>

      <pnk 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 −

Google AMP - Link

AMP Page Discovery

Example

Fonts Using Link

Example

Output

友情链接