Google AMP-기본 구문

이 장에서는 Google AMP 페이지를 시작하기위한 기본 요구 사항에 대해 설명합니다.

샘플 앰프 페이지

amp 페이지의 기본 예는 다음과 같습니다.

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.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>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "300" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

필수 태그

amp 페이지에 포함되어야하는 몇 가지 필수 태그가 있습니다. 이 섹션에서는 이에 대해 자세히 설명합니다.

추가해야합니다. amp 또는 ⚡ 아래에 표시된대로 html 태그에

<html amp>
   OR 
<html ⚡>

html 페이지에 <head> 및 <body> 태그를 추가해야합니다.

필수 메타 태그를 놓친 경우 앰프 유효성 검사가 실패 할 수 있습니다. 페이지의 헤드 섹션에 추가 될 일부 필수 mets 태그가 여기에 표시됩니다.

<meta charset="utf-8">
   <meta name  =  "viewport" 
      content = "width = device-width,
      minimum-scale = 1,
      initial-scale = 1">

head 태그 내부에 추가 할 rel = "canonical"링크

<link rel = "canonical" href = "./regular-html-version.html">

amp-boilerplate를 사용한 스타일 태그 −

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

amp-boilerplate가있는 Noscript 태그 −

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>

아래와 같이 async가 추가 된 amp 스크립트 태그입니다. 이것은 가장 중요한 태그입니다.

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

페이지에 사용자 정의 CSS를 추가하려는 경우이 태그를 사용해야합니다. amp 페이지에서는 외부 스타일 시트를 호출 할 수 없습니다. 사용자 정의 CSS를 추가하려면 모든 CSS가 여기에 있어야합니다.

<style amp-custom>
   //all your styles here
</style>

페이지 URL 끝에 # developement = 1을 사용하여 브라우저에서 위 페이지의 유효성을 검사 할 수 있습니다.

이제 브라우저에서 동일하게 테스트 해 보겠습니다. 페이지를 로컬로 호스팅하고 amppage.html로 저장했습니다.

위의 테스트 할 URL은 다음과 같습니다.

http://localhost/googleamp/amppage.html#development=1

예

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-version.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>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img 
            src = "images/christmas1.jpg" 
            width = "300" 
            height = "250" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

산출

다음과 같이 개발자 콘솔에서 앰프 유효성 검사 상태를 볼 수 있습니다.

유효한 AMP 페이지에 필요한 모든 필수 태그를 추가 했으므로 AMP 유효성 검사에 성공했습니다.