Googe Amp 対応にホームページを作ろう「Hello world」 | Google AMP 入門

2018年5月20日

Google Ampに対応したホームページを作ってみたいなとネットで調べてみたのですが、資料が少ないことに驚きました。
結構前から騒がれているのに。。。
ということで、私が学んだことを書いていきたいと思います。

はじめなのでまずは定番「Hello world」から
しかし Googleのリファレンスをみて作りましたが、headerによくわからないものがたくさん入ってます。
とりあえずソースを

Hello world のソース

<!--  最上位階層のタグを <html ⚡>(<html amp> でも可)にする -->
<html amp lang="en">
  <head>
      
      <!--  head タグの最初の子要素を <meta charset="utf-8"> タグにする。 -->
      <meta charset="utf-8">
      
      <!--  ホームページタイトルを指定 -->
      <title>Hello, AMPs</title>
      
      <!--  ヘッド部に <link rel="canonical" href="$SOME_URL"> タグを入れて、 -->
      <!--  AMP HTML 版の通常の HTML バージョンを指定する。該当する HTML が存在しない場合は自身を指定する。 -->
      <link rel="canonical" href="http://kotatu.net/index.html">
      
      <!--  head タグ内に <meta name="viewport" content="width=device-width,minimum-scale=1"> タグを含める。initial-scale=1 も入れることをお勧めします。 -->
      <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
      
      <!--  次の内容を <head> タグの中に含める。 -->
      <script type="application/ld+json">
        {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
        }
      </script>
      <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>
      
      <!-- これによって AMP JS ライブラリがインクルードされ、読み込まれます) -->
      <script async src="https://cdn.ampproject.org/v0.js"></script>
      
  </head>
  <body>
      
    <h1>Hello world</h1>
    
  </body>
</html>

コメントをたくさん入れたので理解していただけると思います。

ほぼこれが基本の形なのでおまじないとして覚えていきましょう。