Google AMP - 链接
amp 中的 Link 标签用于告知 Google 搜索引擎可用的 amp 和非 amp 页面。在本章中，我们将详细讨论与 Link 标签相关的方面以及 Google 如何决定 amp 页面和非 amp 页面。
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">
此处指定 rel= "amphtml"，以使非 amp 页面指向 amp 版本，这样 Google 就会根据平台显示正确的页面
amp-page 的页面网址
<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 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>
输出
上述代码的输出如下所示 −
