Google AMP-基本的な構文

この章では、Google AMPページを開始するための基本的な要件について説明します。

サンプルアンプページ

アンプページの基本的な例を以下に示します-

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <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ページに含める必須タグがいくつかあります。このセクションでは、それらについて詳しく説明します-

以下に示すように、htmlタグに amp またはaddを追加する必要があります。

<html amp>
   OR
<html ⚡>

<head>および<body>タグをhtmlページに追加する必要があります。

必須のメタタグのいずれかが欠落すると、Amp検証が失敗する場合があります。ページのヘッドセクションに追加されるいくつかの必須の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-versionl">

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>

page-urlの最後で＃developement = 1を使用すると、ブラウザで上記のページを検証できます。

それでは、ブラウザで同じことをテストしましょう。ページをローカルでホストし、amppagelとして保存しました。

テストする上記のURLは

*http：//localhost/googleamp/amppagel＃development = 1*

例

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "./regular-html-versionl">
      <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ページに必要な必須タグをすべて追加したため、AMP検証が成功しました。

Google-amp-basic-syntax

目次

Google AMP-基本的な構文

サンプルアンプページ

必須タグ

例

出力