Google AMP - 链接

amp 中的 Link 标签用于告诉 Google 搜索引擎有关可用的 amp 和非 amp 页面。在本章中，让我们详细讨论 Link 标签涉及的各个方面以及 google 如何决定 amp-page 和 non amp-page。

AMP 页面发现

假设您有一个名为 www.mypage.com 的网站。新闻文章链接到该页面 - www.mypage.com/news/myfirstnews.html。

当用户在 Google 搜索引擎中搜索并碰巧获得非 amp 页面时，为了也获得对 amp 页面的引用，我们需要使用链接标记指定 amp url，如下所示 -

例子

非 amp 页面的页面 url

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

这里为非 amp 页面指定rel= ”amphtml”指向 amp 版本，以便 Google 根据平台显示正确的页面

amp-page 的页面 url

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

这里在amp页面中指定rel=”canonical”指向html的标准版本，以便Google根据平台显示正确的版本。

如果您的网站只有一个页面，即 amp 页面，您仍然不应忘记添加 rel=”canonical” ，它将指向自身 -

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

下图显示了对指向 amp 页面的 rel=”amphtml” 和指向标准 html 页面的 rel=”canonical” 的引用。

AMP 网页

使用链接的字体

可以使用链接从外部加载字体，如下所示 -

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

请注意，仅允许列入白名单的来源。我们可以获取字体的白名单来源列表如下所示 -

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

  • 谷歌字体 - https://fonts.googleapis.com

  • 很棒的字体 - 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>

输出

上面代码的输出如下所示 -

使用链接的字体