구글 AMP – Link

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"에 대한 참조를 보여줍니다.

링크를 사용한 폰트

아래와 같이 링크를 사용하여 글꼴을 외부에서 로드할 수 있습니다.

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

위에 표시된 코드의 출력은 다음과 같습니다.

방문해주셔서 감사합니다. 즐거운 하루 되세요!

댓글 쓰기