Amp의 Link 태그는 사용 가능한 amp 및 non-amp 페이지에 대해 Google 검색 엔진에 알리는 데 사용됩니다. 이 글에서는 Link 태그와 관련된 측면과 구글이 amp-page 및 non amp-page에 대해 결정하는 방법에 대해 자세히 설명하겠습니다.
AMP 페이지 발견
https://www.mypage.com이라는 사이트가 있다고 가정하면 뉴스 기사는 https://www.mypage.com/news/myfirstnews.html 페이지로 연결됩니다.
사용자가 구글 검색 엔진에서 검색할 때 amp-page가 아닌 페이지를 가져오는 경우 amp 페이지에 대한 참조도 가져오려면 아래와 같이 링크 태그를 사용하여 amp URL을 지정해야 합니다.
예제
비 amp 페이지의 URL
<link rel="amphtml" href="https://www.mypage.com/news/amp/myfirstnews_amp.html">
여기서 rel="amphtml"은 AMP가 아닌 페이지가 amp 버전을 가리키도록
지정되어 구글이 플랫폼에 따라 올바른 페이지를 표시하도록 합니다.
amp 페이지의 URL
<link rel="canonical" href="https://www.mypage.com/news/myfirstnews.html">
여기서 rel="canonical"은 html의 표준 버전을 가리키도록 amp
페이지에 지정되므로 구글은 플랫폼에 따라 올바른 버전을 표시합니다.
사이트에 amp 페이지인 페이지가 하나만 있는 경우에도 자신을 가리키는
rel="canonical"을 추가하는 것을 잊지 말아야 합니다.
<link rel="canonical" href="https://www.mypage.com/news/amp/myfirstnews_amp.html">
다음은 amp 페이지를 가리키는 rel="amphtml" 및 표준 html 페이지를
가리키는 rel="canonical"에 대한 참조를 보여줍니다.
![](data:image/svg+xml;charset=utf-8,<svg height="458px" width="868px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)
링크를 사용한 폰트
아래와 같이 링크를 사용하여 글꼴을 외부에서 로드할 수 있습니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto">
허용된 출처만 허용됩니다. 글꼴을 가져올 수 있는 목록은 다음과 같습니다.
- Fonts.com
- Google Fonts
- Font Awesome
- Adobe Fonts
rel="canonical" 및 rel="stylesheet"를 사용하는 실제
예제는 다음과 같습니다.
예제
<!doctype html>
<html ⚡ lang="ko">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Google AMP - Link</title>
<link rel="canonical" href="https://googleblogamp.blogspot.com/2021/01/google-amp-link.html">
<meta name="viewport" content="width=device-width,minimum-scale=1">
<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 custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<style amp-custom>
h1 {color: red}
</style>
<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>
위에 표시된 코드의 출력은 다음과 같습니다.
![](data:image/svg+xml;charset=utf-8,<svg height="580px" width="335px" xmlns="http://www.w3.org/2000/svg" version="1.1"/>)