AMP対応のHTMLを作ってみた。 #CSS

AMPとは　Accelerated Mobile Pages の略で、モバイルページの表示を高速化するための規格です。

Google検索結果にAMP対応したページが優先的に上位に来ることを考えると対応した方がいいですね。

というわけで、今回やってみて参考にさせていただきましたページは以下です。

AMPとは～対応HTMLを作ってみてわかったこと～
https://www.brain-solution.net/blog/seo/amp-html/

AMPの対応方法まとめ (作成途中)
https://syncer.jp/amp#section-2

AMP 対応のトップニュース
https://developers.google.com/structured-data/carousels/top-stories

以上のページを参考に、実際書いてみたサンプルがこちら

<!doctype html>
<html AMP lang="ja">

<head>
    <meta charset="utf-8">
    <title>AMPテスト</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "mainEntityOfPage": "http://www.test.com/index.html",
        "headline": "AMPテスト",
        "datePublished": "2016-12-07T20:00:00+09:00",
        "dateModified": "2016-12-07T20:00:00+09:00",
        "description": "AMPのテストをしています。",
        "publisher": {
          "@type": "Organization",
          "name": "TEST.inc",
          "logo": {
            "@type": "ImageObject",
            "url": "http://www.test.com/img/logo.png",
            "width": 350,
            "height": 120
          }
        },
        "author": {
          "@type": "Person",
          "name": "Test"
        },
        "image": {
          "@type": "ImageObject",
          "url": "http://www.tet.com/img/cover.jpg",
          "height": 1920,
          "width": 1200
        }
      }
    </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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <link rel="canonical" href="index.html">

    <style amp-custom>
        .amp-page { max-width: 600px; margin: 10px auto; }
        h1 { color: #ed1b23 }
        .container { text-align: center; }
        .item { margin-bottom: 30px }
    </style>
</head>
<body>

        <div class="amp-page">

            <div class="container">
                <section>
                <p class="cover"><amp-img src="img/cover.png" width="193" height="80"></amp-img></p>
                <h1>TESTページ</h1>
                <p class="note">
                    ※TEST用にAMPページをつくってみました。
                </p>
                <amp-img src="img/item_01.jpg" width="600" height="600" layout="responsive"></amp-img>
                <p class="item">
                    <span class="name">商品名商品名</span>
                    <span class="price">500円</span>
                    <span class="note">（テストしてみました。）</span>
                </p>
                </section>
            </div>

        <footer>
            <div>
                <div class="text-center copyright">&copy; 2016 AMP TEST</div>
            </div>
        </footer>
</body>

</html>

こんなかんじで動きます。

ちゃんとAMPとして成立しているかどうかは、URLの末尾に「#development=1」を入れ、ChromeのデベロッパーツールのConsoleをみると

AMP validation successful.

と表示されると問題ないということです。

作ってみて思ったこと

CSSは外部ファイルを読み込めない！
- headの中に専用のタグで書きます。スマホ向けのみの見た目だと思えばいいかなと思いつつやっぱり外部ファイル読み込みたい。。。
画像はかならず横と高さを指定
- imgタグは amp-imgタグで。レスポンシブ対応したい場合は、 layout="responsive" を書くといいです。
JavaScriptはAMP対応したもののみ！
- これも高速化のためのようです。
- アコーディオンやカルーセルといったものは AMP用のJSがあるので、こちらを参考にどうぞ。Google Analytics ももちろんあります。https://ampbyexample.com/
- 今後ももっと増えると思われます（希望）。

HTML を書いている人ならそんなに難しくないですね。
ただ、通常ページとプラス１ページ余計に用意しないといけないという気持ちがあって、ちょっとめんどくさいと思ってしまうのでした。。。