Google AMP - 連結

amp 中的 Link 標籤用於告訴 Google 搜尋引擎可用的 amp 和非 amp 頁面。在本章中，讓我們詳細討論與 Link 標籤相關的方面以及 Google 如何確定 amp 頁面和非 amp 頁面。

AMP 頁面發現

假設您有一個名為 www.mypage.com 的網站。新聞文章連結到頁面 - www.mypage.com/news/myfirstnews.html。

當用戶在 Google 搜尋引擎中搜索並碰巧獲得非 amp 頁面時，為了也獲得對 amp 頁面的引用，我們需要使用如下所示的 link 標籤指定 amp url：

示例

非 amp 頁面的頁面 URL

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

這裡 rel= ”amphtml” 為非 amp 頁面指定指向 amp 版本，以便 Google 根據平臺顯示正確的頁面。

amp 頁面的頁面 URL

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

這裡 rel=”canonical” 在 amp 頁面中指定指向 html 的標準版本，以便 Google 根據平臺顯示正確的頁面。

如果您的網站只有一個頁面，即 amp 頁面，您仍然不應該忘記新增 rel=”canonical”，它將指向自身 -

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

下圖顯示了指向 amp 頁面的 rel=”amphtml” 和指向標準 html 頁面的 rel=”canonical” 的引用。

使用 Link 載入字型

字型可以透過 link 外部載入，如下所示：

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

請注意，僅允許白名單來源。我們可以獲取字型的白名單來源列表如下所示：

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（根據需要替換 kitId）

下面顯示了一個使用 rel=”canonical” 和 rel=”stylesheet” 的工作示例：

示例

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

輸出

上面顯示的程式碼的輸出如下所示：

列印頁面